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.
- React
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 assignthis.state
;- Note that
super()
is needed in constructor to givethis
the context of component rarther than its parent class React.Component; - And in stead of using
this.props.[propName]
, usingthis.state.[stateName]
;
- Note that
- Create
update
custom method for updating state bythis.setState({...})
; - Assign update method to element (eg. callback function of
onChange
event) and DO NOT forget to bindthis
to method handler. The reasons of bindingthis
:- 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 asonClick={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!
-
Inbrowser JSX transpiler to understand JSX at a deeper level
-
Kamil Przeorski's Quora answer to "What's the best place to learn React.js?"
-
Getting Started with Redux and then Building React Applications with Idiomatic Redux
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!
网友评论