React FAQ

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

In the future it might cover best practices and how and why to use different patterns and techniques. For now enjoy the links and please share/link back to this repo.

Remember we're all learning. Read, Try, Mess Up (it's okay), Learn. It's okay if you don't know all the terms.

#Start

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

Thinking in React - Pete Hunt
Pete Hunt: React: Rethinking best practices (JSConf EU 2013)
Pete Hunt: The Secrets of React's Virtual DOM (FutureJS 2014)
🔥 All the terrible things I did the first time I wrote a complex React App Raquel @raquelxmoss
React in 7 Minutes this is a slightly dated but still really good starter
Books

#History JSConfUS 2013 - Tom Occhino and Jordan Walke: JS Apps at Facebook The one where React became #OSS

#Creating a React Project

How do I create a new React project?

💯 create-react-app
nwb if you need more control of the setup / config

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

What so good about React?

7 Strengths of React Every Programmer Should Know About Samuel Hapák @samuha
Design Principles

#JSX What's JSX?

JSX in Depth
React’s JSX: The Other Side of the Coin Cory House @housecor
What does JSX stand for? Tom Occhino @tomocchino

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 What is the Virtual DOM

The one thing that no one properly explains about React — Why Virtual DOM Sai Kishore Komanduri @saiki

#State How do I handle state?

The 5 Types Of React Application State James K Nelson @james_k_nelson
State of React #1: A Stateless React App? James K Nelson @james_k_nelson
A Case for setState Zack Argyle
Where to Hold React Component Data: state, store, static, and this Sam Corcos
How to handle state in React. The missing FAQ Osmel Mora @osmel_mora
Should I keep something in React component state? I made a small cheatsheet. Dan Abramov @dan_abramov
Best Practices for Component State in React.js Gabe Scholz @gabescholz
Exploring React’s State Propagation Eric Greene @ericwgreene

How can I decouple state and UI?

How to decouple state and UI Michel Weststrate @mweststrate

#Props

How do I pass props?

Transferring Props Jack Franklin @Jack_Franklin

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

Differences between require() and passing an object via prop or context Dan Abramov @dan_abramov

How do I pass boolean values?

JSX and are equivalent

How do I validate props?

Better Prop Validation in React Moe Sattler @travelperk

#Component Types

What types of components are there?

React Component Jargon as of August 2016

Presentational and Container Components <Code />

Presentational and Container Components Dan Abramov @dan_abramov

Higher-Order Components <Code />

React Higher Order Components in depth @franleplant
Higher Order Components: A React Application Design Pattern Jack Franklin @Jack_Franklin
Mixins Are Dead. Long Live Composition Dan Abramov @dan_abramov
Higher Order Components: Theory and Practice

Function as Child Components <Code />

Function as Child Components Merrick Christensen @iammerrick

Stateless Function <Code />

React Stateless Functional Components: Nine Wins You Might Have Overlooked Cory House @housecor

How do I decide what type of Component to use?

React.createClass versus extends React.Component Todd Motto
4 different kinds of React component styles Peter Bengtsson @peterbe
React.Component vs React.createClass Naman Goel & Zach Silveira

#Finding Components

Where are some good places to find components?

#Binding

What is this bind thing?

Don't Use Bind When Passing Props Dave Ceddia
5 Approaches for Handling Binding Cory House @housecor
How to Deal with this Reference Inside the Promise? Toptal Developers

#Events

How does the event system work in React?

React events in depth Kent C. Dodds, Ben Alpert, & Dan Abramov

#Rendering

What should go in the render function?

Return as soon as you know the answer @SimonRadionov

#Lifecycle Methods

What are Lifecycle Methods?

Going further with React lifecycle methods Jamie Barton
Component Specs and Lifecycle
My #reactjs component lifecycle cheatsheet for quick reference Peter Beshai @pbesh
React component’s lifecycle Osmel Mora @osmel_mora

#Keys

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

Why can't i put key in default props

What should I use for a key?

Index as a key is an anti-pattern Robin Pokorný @robinpokorny

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

The key is using key Tim Arney @timarney

#Forms

How can I build forms with React?

Learn Raw React: Ridiculously Simple Forms James K Nelson @james_k_nelson

#Patterns

React Patterns @chantastic
React.js in patterns Krasimir Tsonev
Patterns For Style Composition In React Brent Jackson @jxnblk

#Learning

What do I need to know about React to get started?

react-howto Pete Hunt
Intro to React.JS Core Concepts Pascal Weiland @bitcrowd / Tony Alito
React - Basic Theoretical Concepts
Components, the war horses of React Osmel Mora @osmel_mora

#Gotchas

What are some React Gotchas?

React Gotchas Dave Ceddia

#Refs

What are refs and are string refs are bad?

Refs to Components
Why do you use findDOMNode()? Dan Abramov @dan_abramov
String refs are bad in quite a few ways Dan Abramov @dan_abramov

#PATENTS

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

Some links to point people to when they misinterpret PATENTS clause or spread false claims Dan Abramov @dan_abramov

#Mixins

Why are Mixins Considered Harmful?

Mixins Considered Harmful Dan Abramov @dan_abramov

#Internationalization

How should I handle internationalization?

Internationalization in React Preethi Kasireddy

#Third Party Libraries

How do I use third party libraries?

Integration with Third Party Libraries Rally Coding

#Performance

How can I make my app faster?

Component Rendering Performance in React Grgur Grisogono
Don‘t use PureComponent everywhere. Measure Dan Abramov @dan_abramov
React.js pure render performance anti-pattern
Should I use shouldComponentUpdate? James K Nelson @james_k_nelson
Reconciliation

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