React Study Notes

This is the React study notes I made when I started to learn React.
In the study process, I've learned from more than 20 tutorials & videos and collected all the demos that helped me to understand React.

What is React

React is a JavaScript library for building user interfaces.

Features & Advantages:

Component-Based: Build encapsulated components that manage their own state, then compose them to make complex UIs.
JSX: combination of JS & HTML.
ES2015 (ES6) ready: take advantage of many of the newest language features.
Virtual DOM: is a "lightweight" DOM, with new data new virtual DOM is created and compared with previous one using Diff algorithm to reduce the cost of manipulating "real" DOM nodes.
Server-side rendering
Performance: the prior 2 bullet points make performance good.

Comparison between React & AngularJS:
Quora question: "Is React killing Angular?", Kate Kolesova's answer](https://www.quora.com/Is-React-killing-Angular)

Setup

Use npm to install React and use create-react-app to start a new project

npm install -g create-react-app
create-react-app hello-world
cd hello-world
npm start

Hello World

In JS file, use the following lines of codes to import React framework from library (see in index.js & App.js in the "hello-world" folder):

import React from 'react'; // for build React component
import ReactDOM from 'react-dom'; // for build DOM

There are 3 ways of writing Hello World:

JSX way of directly return HTML tag in return, note that:
- only one parent tag can be included, returning several parallel tags causes error;
- wrap all HTML part with "()" OR put at least one tag on the line of return to avoid error;
Use React.createElement([tagName], [property], [innerText]) to create HTML element and return;
Use ES6 arrow function, note that:
- React state cannot be used in this method.

Example:
http://jsfiddle.net/HubertWang/htk6mmg8

Property

Prop can be used for passing data:

Use this.props.[propName] to get prop value;
Use [ComponentName].propTypes to set prop types & if requried;
Use [ComponentName].defaultProps to set prop default values.

Example:
http://jsfiddle.net/HubertWang/bchp8wtk

Sometimes detailed property validation is required, in this case, using function in stead of key-value pair to validate prop:

Example:
http://jsfiddle.net/HubertWang/roszmerk

State

Unlike prop, which are a collection of values that are meant to be passed to component as static values and not to be changed by component, states represents a collection of values that meant to be managed as well as updated by component.

In short, using prop to manage data that will not be changed and using state to manage data that will be changed by interaction with users.

Several steps to use states:

Create constructor in component to create state by assign this.state;
- Note that super() is needed in constructor to give this the context of component rarther than its parent class React.Component;
- And in stead of using this.props.[propName], using this.state.[stateName];
Create update custom method for updating state by this.setState({...});
Assign update method to element (eg. callback function of onChange event) and DO NOT forget to bind this to method handler. The reasons of binding this:
- In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
- Generally, if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
- references: usage of bind(this), React's explanation

Example:
http://jsfiddle.net/HubertWang/bmeyokxd

props.children

this.props.children can get all the children nodes of component. Use React.Children.map(this.props.children, child=> ... ) to deal with each node.

Example:
http://jsfiddle.net/HubertWang/rj65xhon

ref

Component is not the "real" DOM tree node. It is a data structure in the memory called Virtual DOM and only after being inserted into the DOM, can you get them by document.getElementById(...). Facebook uses Diff algorithm and virtual DOM to reduce the cost of manipulating DOM nodes.

But sometimes, we need to get the "real" DOM node from the component. ref is used for this purpose: this.refs.[refName].

Example:
http://jsfiddle.net/HubertWang/a63yqvdj

Lifecycle methods

React provides 5 methods for component's lifecycle:

componentWillMount() // before render()
componentDidMount() // after render()
componentWillUnmount() // before leave the DOM
componentWillUpdate(object nextProps, object nextState) // before prop/state update
componentDidUpdate(object prevProps, object prevState) // after prop/state update

Here is an example that set m=2 before mounting component(componentWillMount) and update component every 500ms(componentDidMount) and interval will be removed before component unmounted(componentWillUnmount). The detailed video for this example is here and here.

Example:
http://jsfiddle.net/HubertWang/ejn5y7cv

map

Array.prototype.map() method can be used to iterate Array(not only in React, see MDN map() method).

Example:
http://jsfiddle.net/HubertWang/oLz660bk

Array.prototype.map() can also be used in React.Children to iterate each child in React component, as shown before in the props.children.

More cool things!

References

React, Official Tutorial
React, Official Docs
Egghead, Videos, Start Using React to Build Web Applications
Yifeng Ruan, React Tutorial
Codeschool, Videos, Powering Up With React
Learn Coding Tutorials, Video, React Tutorial (with Webpack + ES6): Build a ToDo App with Best Practices
Kamil Przeorski, Quora answer, "What's the best place to learn React.js?"
Kamil Przeorski, eBook, ReactJS for Dummies: ReactJS Redux, the Right Way.
MDN, Array.prototype.map()
Egghead, Videos, Building React Applications with Idiomatic Redux
Samer Buna, Videos, React.js: Getting Started
Samer Buna, Medium Article, So you want to learn React.js?
Udemy, videos, Modern React with Redux

Thanks to all the people above who have made these tutorials & videos!