React

https://reactjs.org/

http://www.ruanyifeng.com/blog/2015/03/react.html

https://www.imooc.com/article/16082

• React's official site
• React's official examples
• React (Virtual) DOM Terminology, by Sebastian Markbåge
• The React Quick Start Guide, by Jack Callister
• Learning React.js: Getting Started and Concepts, by Ken Wheeler
• Getting started with React, by Ryan Clark
• React JS Tutorial and Guide to the Gotchas, by Justin Deal
• React Primer, by Binary Muse
• jQuery versus React.js thinking, by zigomir

windows scripts

"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress".
"scripts": {
  "start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
  "mock": "node --harmony ./mock/server.js",
  "build": "rm -rf ./build && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors"
}

Create React App

Create React App  is the best way to start building a new React single page application. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 6 on your machine.

npm install -g create-react-appcreate-react-app my-appcd my-appnpm start

Create React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. It uses build tools like  Babel  and  webpack  under the hood, but works with zero configuration.

When you’re ready to deploy to production, running  npm run build  will create an optimized build of your app in the  build  folder. You can learn more about Create React App  from its README  and the  User Guide .

React JSX

var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(  
<div>  {    
names.map(function (name) {      
    return <div>Hello, {name}!</div>    
    }) } 
 </div>, 
 document.getElementById('example'));

JSX 的基本语法规则：遇到 HTML 标签（以  <  开头），就用 HTML 规则解析；遇到代码块（以  {  开头），就用 JavaScript 规则解析。上面代码的运行结果如下。

添加组件属性，有一个地方需要注意，就是  class  属性需要写成  className  ， for  属性需要写成  htmlFor  ，这是因为  class  和  for  是 JavaScript 的保留字。

组件的生命周期

组件的 生命周期 分成三个状态：

• Mounting：正在插入真实 DOM
• Updating：正在被重新渲染
• Unmounting：正在被移出真实 DOM

React 为每个状态都提供了两种处理函数， will  函数在进入状态之前调用， did  函数在进入状态之后调用，三种状态共计五种处理函数。

• componentWillMount()
• componentDidMount()
• componentWillUpdate(object nextProps, object nextState)
• componentDidUpdate(object prevProps, object prevState)
• componentWillUnmount()

此外，React 还提供两种特殊状态的处理函数。

• componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用
• shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用

这些方法的详细说明，可以参考 官方文档 。

Official Docs:

React is pretty flexible but it has a single strict rule:

All React components must act like pure functions with respect to their props.

Do Not Modify State Directly

For example, this will not re-render a component:

// Wrongthis.state.comment = 'Hello';

Instead, use  setState() :

// Correctthis.setState({comment: 'Hello'});

The only place where you can assign  this.state  is the constructor.

// Correctthis.setState((prevState, props) => ({ counter: prevState.counter + props.increment}));

this 指针

https://reactjs.org/docs/handling-events.html

方式一：bind(this)

     constructor(props) { super(props); this.state = {isToggleOn: true}; // This binding is necessary to make `this` work in the callback this.handleClick = this.handleClick.bind(this); }

handleClick() { this.setState(prevState => ({ isToggleOn: !prevState.isToggleOn })); }

方式二：改为 public class fields syntax

// This syntax ensures `this` is bound within handleClick. // Warning: this is *experimental* syntax. handleClick = () => { console.log('this is:', this); }

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

https://reactjs.org/docs/lists-and-keys.html

const listItems = numbers.map((number) => // Correct! Key should be specified inside the array. <ListItem key={number.toString()} value={number} /> );

react-devtools

https://github.com/facebook/react-devtools

Prop Types

https://labnotes.panderalabs.com/shaping-up-your-react-components-with-proptypes-shape-and-selectors-9d1111d0566f

//---Prop Types
const tweetPropType = PropTypes.shape({
  id: PropTypes.number.isRequired,
  text: PropTypes.string.isRequired,
  author: PropTypes.shape({
    id: PropTypes.number.isRequired,
    username: PropTypes.string.isRequired,
    firstName: PropTypes.string,
    lastName: PropTypes.string,
  }).isRequired
});
//---Components
const FullTweet = ({tweet}) => {...};
FullTweet.propTypes = {
  tweet: tweetPropType
};
const PreviewTweet = ({tweet}) => {...};
PreviewTweet.propTypes = {
  tweet: tweetPropType
};