1. Installation

npm install --save react react-dom
Webpack as bundler
import React from 'react'; import ReactDOM from 'react-dom';

2. Hello World

ReactDOM.render( <h1>hello world</h1> document.getElementById('root') );

3. Introducing JSX

render里可以渲染element, function, class component

4. Rendering Elements

function tick() { //... ReactDOM.render( //... ); } setInterval(tick,1000);
回調(diào)函數(shù)的應(yīng)用:
It calls ReactDOM.render() every second from a setInterval() callback.
setTimeout() 參數(shù)和setInterval()一樣，但只執(zhí)行一次，不存在周期概念。兩個函數(shù)都是異步的。tick()作為參數(shù)傳進(jìn)來，它是個回調(diào)函數(shù)。AJAX動態(tài)加載，DOM事件，Node.js事件，鏈?zhǔn)秸{(diào)用也都用到了回調(diào)函數(shù)。

5. Components and Props

composing components

Conceptually, components are like JavaScript functions. They accept arbitrary inputs (called "props") and return React elements describing what should appear on the screen. All React components must act like pure functions with respect to their props.Such functions are called "pure" because they do not attempt to change their inputs, and always return the same result for the same inputs.

6. State and Lifecycle

1) Converting a function to a class:

• Create an ES6 class with the same name that extends React.Component
• Add a single empty method to it called render()
• Move the body of the function into the render() method.
• Replace props with this.props in the render() body.
• Delete the remaining empty function declaration.

2) Adding local state to a class (move the data from props to state):

• Replace this.props.date with this.state.date in the render() method:
• Add a class constructor that assigns the initial this.state, pass props to the base constructor
• Remove the date prop (<Clock date={new Date()} />)from the <Clock /> element. We will later add the timer code back to the component itself

3) Adding Lifecycle Methods to a Class:

componentDidMount() componentWillUnmount() These methods are called "lifecycle hooks". The componentDidMount() hook runs after the component output has been rendered to the DOM. This is a good place to set up a timer. If the Clock component is ever removed from the DOM, React calls the componentWillUnmount() lifecycle hook so the timer is stopped.

Clock

7. Handling Events

Toggle Click

In Javascript, class methods are not bound by default. Without 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.

bind( )

8. Conditional Rendering

class LoginControl

functions

• For ReactDOM.render, we only put the class <LoginControl /> in it, which has its own render(), will rendering all <*Button /> and <*Greeting />. And all key value going to be used in render() well handled in constructor().
• constructor() of <LoginControl /> will bind this to two handlers, and initialize the state of 'isLoggedIn' used as an condition check parameter, for deciding which <*Greeting /> or <*Button /> should be rendered .
• We use this.setState (//preveStata) to change isLoggedIn. Whenever the button clicked, isLoggedIn will be re-assign a boolean value, then this boolean value also leads to <*Greeting /> changed. Consider why initial state assigned boolean false? how this boolean firstly works in render()? how <*Greeting /> initialized?how <*Greeting /> toggled by isLoggedIn as well? (It's all about the logic behind it)
• Take care of 'let button = null' and {button}
• Tried to remove function UserGreeting and GuestGreeting, works. And WITHOUT EXTRACTING & ENCAPSULATION，the code will be looks like this:

用handleToggleClick重做

9. Lists and Keys

map() 數(shù)組每個元素調(diào)用一個指定方法后，返回值組成新數(shù)組并返回；
forEach為數(shù)組中的每個元素執(zhí)行一次回調(diào)函數(shù)。

• Keys only make sense in the context of the surrounding array.
  For example, if you extract a ListItem component, you should keep the key on the <ListItem /> elements in the array rather than on the root <li> element in the ListItem itself.

• Keys Must Only Be Unique Among Siblings. Keys used within arrays should be unique among their siblings. However they don't need to be globally unique. We can use the same keys when we produce two different arrays.

• A good rule of thumb is that elements inside the map() call need keys.

10. Forms

Forms Picker

<input type="text">, <textarea>, and <select> all work very similarly - they all accept a value attribute that you can use to implement a controlled component.

11. Lifting State Up

class TemperatureInput

class Calculator

Lifting state involves writing more "boilerplate" code than two-way binding approaches, but as a benefit, it takes less work to find and isolate bugs. Since any state "lives" in some component and that component alone can change it, the surface area for bugs is greatly reduced. Additionally, you can implement any custom logic to reject or transform user input.
If something can be derived from either props or state, it probably shouldn't be in the state. For example, instead of storing both celsiusValue and fahrenheitValue, we store just the last edited value and its scale. The value of the other input can always be calculated from them in the render() method. This lets us clear or apply rounding to the other field without losing any precision in the user input.

12. Composition vs Inheritance

講Composition時, 每個例子特點(diǎn)不同：

1. 有個外部框架function，已經(jīng)做好了初始化，比如歸屬的className, 然后里面有個{props.children}，之后用到什么就往里填什么。所以外部框架的function不變，隨著{props.children}的改變，得到的新的function也都截然不同。
2. 在例子1的基礎(chǔ)上，{props.children} 有被其它function代替，而不直接是JSX代碼。
3. <WelcomeDialog /> is Make a special case of <Dialog />。這個例子，就是直接給{props.children}賦值。模塊里就沒別的了。
4. <SignUpDialog />結(jié)合了之前的幾個例子。

講Inheritance時, 還提到props和state，很受用：

React deal with Inheritance:"Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
If you want to reuse non-UI functionality between components, we suggest extracting it into a separate JavaScript module. The components may import it and use that function, object, or a class, without extending it."

13. Thinking in React（filterableProductTable）

另外，關(guān)于ref，ref={(input) => { this.textInput = input; }} />
不要濫用，state還是正路子。#ref and DOM里的幾個例子都很好。ref其實(shí)就是當(dāng)出現(xiàn)了動態(tài)的東西，有需要取值，用值得時候，它幫著臨時存了下。