/react-faq

A collection of links to help answer your questions about React.js

React FAQ

This guide aims to pull together quality content about React core concepts into a central location for quick reference.

Remember we're all learning. Read, Try, Mess Up (it's okay).

Other Languages

🇪🇸 Español
🇨🇳 简体中文

#Start

There's lots to learn but if you break it down there are some key concepts to focus on. JSX, React elements, Components, Lifecycle Methods, Props and State. These articles will start you down the path to learning React.

I don't know React what should I watch / read before I start?

Official React Docs are a great resource

Additional information to start with

Resources

#History

#Creating a React Project

How do I create a new React project?

That depends on what your looking for out of the box. No config, config, server-rendered etc... here are a few to consider. Of course you can setup from scratch as well (not covered here).

Also see these projects

Where can I find videos for using React Create App?

React Create App + Express @sprjrx @ladyleet

Can I play around with React Online?

#Why use React?

  • Composable components
  • Easy to use with existing projects
  • Declarative
  • Functional / Immutable friendly

Is it fast?

What so good about React?

#JSX What's JSX?

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant. - http://buildwithreact.com

What does JSX really do for me?

This is the sort of stuff JSX saves you from having to manage Jonny Buchanan @jbscript

#The Virtual DOM

The Virtual DOM provides a lightweight implementation of the DOM and events system. Instead of dealing with the browser, you manipulate an in-memory version of the DOM.

What is the Virtual DOM?

Is the Virtual DOM all about speed?

No

See :

https://twitter.com/dan_abramov/status/790326092582252544 https://twitter.com/acdlite/status/779693791607336960

I wonder if we can reclaim the VDOM term to mean "Value DOM", as in Value Type, instead of "Virtual DOM"...? More accurate. @sebmarkbage

> It doesn't improve perf over hand written DOM code but it's hard to write on scale. React scales well. **@dan_abramov**
> React ultimately has to call browser APIs at some point, it can't possibly be faster than writing the same exact calls by hand **@dan_abramov**
>React will not do anything that you cannot. By definition everything it does can be reproduced (and some people have with other libraries/frameworks that follow similar conventions). The point is not that React does something that you can't, but rather that by introducing React to your application you are relieved of having to worry about manually handling your DOM, manually determining how to update it efficiently, minimizing traversals, etc. - [Sean Grogg](https://www.quora.com/Is-ReactJS-faster-than-direct-DOM-manipulation-with-JavaScript-or-jQuery)

Key Takeaway:

React keeps your product reasonably fast without you having to think about it all the time, or to jump through the hoops @dan_abramov

#React elements

Elements are the smallest building blocks of React apps. Elements are what components are "made of ..." — React Docs

#Components

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. Conceptually, components are like JavaScript functions. - React Docs

What are some of your best practices when working with components?

  • Keep it (F)ocused.
  • Keep it (I)ndependent.
  • Keep it (R)eusable.
  • Keep it (S)mall.
  • Keep it (T)estable.
  • or in short, FIRST.

— Addy Osmani https://addyosmani.com/first

See : https://twitter.com/mxstbr/status/790084862954864640 Max Stoiber @mxstbr

#Lifecycle Methods

Components have several "lifecycle methods" that allow you to override / run code at particular times.

What are Lifecycle Methods?

#Component Types

There are two main types of components Functional and Class Components

// Functional Component
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Components can be used (composed) in many ways see the following links for patterns and thoughts on creating Components.

How do I decide what type of Component to use?

This comes down to a few factors... a primary one being you need to decide what a component should do.
See: Some Thoughts on Function Components in React from A. Sharif @sharifsbeat for some help deciding.

Also:

Stateless Function <Code />

Presentational and Container Components <Code />

Higher-Order Components <Code />

Function as Child Components <Code />

What types of components are there?

#Finding Components

Where are some good places to find components?

#Props

What are props?

props (short for properties) are a Component's configuration, its options if you may. They are received from above and immutable as far as the Component receiving them is concerned. - react-guide

See : props vs state

How do I pass props?

How do I pass boolean values?

Should I use import, props, or context in React?

#PropTypes

PropTypes are essentially a dictionary where you define what props your component needs and what type(s) they should be. - Niels Gerritsen

What are PropTypes?

Why are React PropTypes important?

How do I validate props?

#State

In one sense, “state” means the current visual representation of the app on screen... In the React sense, “state” is an object that represents the parts of the app that can change. Each component can maintain its own state, which lives in an object called this.state. - Dave Ceddia

What is state in React?

How do I handle state?

How can I decouple state and UI?

Coming from jQuery... how do I adjust my mental modal to work with React / State?

I heard you can pass a function to setState when should do that?

#Children API

#Binding

The JavaScript bind method has several uses. Typically, it is used to preserve execution context for a function that executes in another context.

**How do I bind events (i.e. onClick) in React?** > There are several ways to bind things in React [this video](https://egghead.io/lessons/javascript-public-class-fields-with-react-components?pl=javascript-from-kent-ff87bbdb) via Kent C. Dodds + @eggheadio covers multiple ways to bind events showing the benefits and drawbacks for each.

What should you use for binding methods in React classes?

What is this bind thing?

#Events

How does the event system work in React?

#Rendering

What should go in the render function?

#Keys

React uses keys to help with Reconciliation (i.e. how it calculates the DOM diff for each render).

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

As noted in 'What should I use for a key?' Be careful what you use for a key. Using an array index isn't a best practice... aim to use a unique id.

Why can't i put key in default props (or define the default somewhere else)?

What should I use for a key?

What are some examples where I should manually change a key?

#Refs

The ref attribute makes it possible to store a reference to a particular React element or component returned by the component render() configuration function. This can be valuable when you need a reference, from within a component, to some element or component contained within the render() function. - reactenlightenment.com

What are refs and are string refs are bad?

#Context ⚠️ Context is an advanced and experimental feature. The API is likely to change in future releases. The rumours of its existence are true but be careful!

#Forms

How can I build forms with React?

How can I validate form input?

#Controlled Components

What is a controlled component?

Via Loren Stewart @lorenstewart111 React.js Forms: Controlled Components

A controlled component has two aspects:

  1. Controlled components have functions to govern the data going into them on every onChange event, rather than grabbing the data only once, e.g. when a user clicks a submit button. This 'governed' data is then saved to state (in this case, the parent/container component's state).

  2. Data displayed by a controlled component is received through props passed down from it's parent/container component.

This is a one-way loop – from (1) child component input (2) to parent component state and (3) back down to the child component via props – is what is meant by unidirectional data flow in React.js application architecture.

#React Ajax

What is the best practice for getting server data into React components?

It depends! See: React AJAX Best Practices Andrew H Farmer @ahfarmer

#Patterns

#Gotchas

What are some React Gotchas?

How do you add comments in JSX?

render() {
  return (
    <div>
      <!-- Fail -->
    </div>
  )
}

render() {
  return (
    <div>
      {/* Works! */}
    </div>
  )
}

More info and Sublime Text snippet here: http://wesbos.com/react-jsx-comments @wesbos

#PATENTS

What's all this stuff I hear about Facebook PATENTS clause?

#Mixins

Why are Mixins Considered Harmful?

#Internationalization

How should I handle internationalization?

What repos should I checkout for internationalization?

#Third Party Libraries

How do I use third party libraries?

#Performance

How can I make my app faster?

#Animations

How do I animate things in React?

Is there declarative api for animations?

How can I animate Page Transitions?

What are some good repos to checkout for animation in React?

#SVG & React

How do I work with SVG's in React?

#React Style Guides

Where can I find some good React style guides?

#Redux and Mobx

What's (Redux/Mobx)?

Do I need to use (Redux/Mobx)?

How to scale React-Redux apps?

#Adding React to an existing app

How do I start adding React to an existing app?

#CSS and React

What about styling things in React?

You can use plain CSS or any preprocessor (Sass, Less etc...) with React. React outputs standard markup so technically you can keep doing what you've been doing.

Using CSS to style our React content is actually as straightforward as you can imagine it to be. Because React ends up spitting out regular HTML tags, all of the various CSS tricks you've learned over the years to style HTML still apply. - kirupa

What about using Bootstrap with React?

Component Level Styling

There are various approaches for React that allow us to push styling to the component level. - survivejs.com

What repos should I checkout for styling at the component level?

Note: Also see - Styled components or Glamor?

What's the difference between what’s called "inline styles" and what's called “CSS-in-JS”?

I just need some simple inline styles ... What's the most basic way to use inline styles with React?

What resources are available discussing the pros and cons of inline styles and CSS in JS?

What about using CSS Modules for styling?

There's too many CSS in JS options how can I compare them?

How can I style/build a component that's very reusable customizable?

#Testing

#Contributing to React JS

Where can I learn about Contributing to React JS?

#Core Notes

Where can I find out what's going on with React / Upcoming versions?

#Universal React

#Deep Dive

#React Fiber

Why, What, and How?

What is React Fiber?

Is Fiber ready yet?

How can I contribute to Fiber?

#Videos & Courses

What are some good video resources / courses to learn React?

Also see Conference Videos

#A11Y

What about accessibility?

How do I handle A11y in React

#Talks

#Training

Where can I get React training?

Micheal Jackson @mjackson & Ryan Florence @ryanflorence

*Brian Holt* @holtbt

#Books

Where can I find some good books about React?

#Newsletters

Where can I find React specific newsletters?

Interview Questions

Where can I go to find good React interview questions?

#Tools

What Developer Tools are available for React?

#Server-Side Rendering

Do I need to Server-Side Render?