/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
🇨🇳 简体中文

Contents

#Start

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

#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?

#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.

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>

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?

#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

#Conference Videos

#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

What is React Fiber?

Is Fiber ready yet?

How can I contribute to Fiber?

#Video Courses

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

#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

#Tools