react

https://www.imooc.com/video/9820　　慕课网入门教程

http://www.runoob.com/react/react-tutorial.html　　菜鸟教程

http://www.ruanyifeng.com/blog/2015/03/react.html　　阮一峰react教程

https://github.com/ruanyf/react-demos　　阮一峰demo

http://www.bootcdn.cn/react/　　cdn

http://facebook.github.io/react/　　官网

chrome.google.com/webstore/search/React Developer Tools　　　　　　React Developer Tools ，chrome中使用。由Facebook提供

https://hulufei.gitbooks.io/react-tutorial/content/　　React 入门教程　　2018-2-10

组件的生命周期：

https://www.jianshu.com/p/4784216b8194

  • Mounted                                       安装
    • getDefaultProps()
    • getInitialState()
    • componentWillMount()       在组件挂载之前调用一次。如果在这个函数里面调用setState，本次的render函数可以看到更新后的state，并且只渲染一次。
    • render()                              render是一个React组件所必不可少的核心函数（上面的其它函数都不是必须的）。记住，不要在render里面修改state。
    • componentDidMount()       在组件挂载之后调用一次。这个时候，子主键也都挂载好了，可以在这里使用refs。
  • Update                                                   更新
    • componentWillReceiveProps()    props是父组件传递给子组件的。父组件发生render的时候子组件就会调用componentWillReceiveProps（不管props有没有更新，也不管父子组件之间有没有数据交换）
    • shouldComponentUpdate()      组件挂载之后，每次调用setState后都会调用shouldComponentUpdate判断是否需要重新渲染组件。默认返回true，需要重新render。在比较复杂的应用里，有一些数据的改变并不影响界面展示，可以在这里做判断，优化渲染效率。
    • componentWillUpdate()          shouldComponentUpdate返回true或者调用forceUpdate之后，componentWillUpdate会被调用。
    • render()
    • componentDidUpdate()        除了首次render之后调用componentDidMount，其它render结束之后都是调用componentDidUpdate。
  • Unmounted                                     卸载
    • componentWillUnmount       组件被卸载的时候调用。一般在componentDidMount里面注册的事件需要在这里删除。

 示例：

class Component0 extends React.Component {
    constructor(props) {
        //super(props);
    }
    componentDidMount() {
        $(this.refs.stayInfo).css('color', 'red');
    }
    render() {
        return (
            <ComponentWithToolbar componentName="component0">
                <h1 ref="stayInfo">停留时间：{this.props.stay}</h1>
            </ComponentWithToolbar>
        );
    }
}

配置环境：（2018-2-9）

先要安装nodejs，用npm安装（npm依赖node，create-react-app依赖npm，所以…）

https://reactjs.org/tutorial/tutorial.html　　参考这里

http://www.cnblogs.com/qq21270/p/7729824.html　　npm看这里

创建项目：

  • cd c:/nodejs/
  • npm install -g create-react-app
  • create-react-app my-app　　　　这句执行后，会自动创建一个my-app的目录，126M
/*
Success! Created my-app at C:
odejsmy-app
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd my-app
  npm start

Happy hacking!
*/
安装后显示的

项目的目录结构：

  • c: odejsmy-app
  • ├ src            开发的原始文件放在这里
  • └ build　　（使用命令：  npm run build ）生成后的文件

入口文件：　　c: odejsmy-appsrcindex.js

  • import React from 'react';
  • import ReactDOM from 'react-dom';
  • import './index.css';

编译：

  • npm run build　　编译
  • npm run start　　启动http服务　　http://localhost:3000

另一种方法，用python启动http服务

  • cd  c: odejsmy-appuild
  • python -m http.server                   http://localhost:8000/ 　　这里为了省事，用python启动个server

2018-1-29学习笔记：

https://www.youtube.com/watch?v=LUXqcN8Hgc0　　react系列直播教程1　　2018-1-29　　（暂时看到1小时13分，下次看！）

代码在这：

  • https://github.com/owenliang/react-webpack2.git　　git从这里下载
  • https://github.com/owenliang/react-webpack2/blob/master/webpack.config.js　　webpack配置
  • https://github.com/owenliang/react-webpack2/blob/master/src/index.js　　           webpack编译入口文件
  • https://github.com/owenliang/react-webpack2/blob/master/package.json　　       （这里有很多依赖的库，用npm命令，把他们下载下来）
  • npm run bulid　　运行
  • npm run start　　（配置webpack.config.js的 开发服务器，可以边写代码边看效果）　　浏览器里面看 http://localhost:8080

react  单向数据流    data -> ui

vue   双向数据流     data <=>ui

...

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/qq21270/p/8259568.html