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
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
/* Success! Created my-app at C:\nodejs\my-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:\nodejs\my-app\
- ├ src 开发的原始文件放在这里
- └ build (使用命令: npm run build )生成后的文件
入口文件: c:\nodejs\my-app\src\index.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:\nodejs\my-app\build
- 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
...