先看阮一峰的教程,相当易懂:React 入门实例教程
然后配合官网文档 看慕课网视频 React入门
使用 Facebook 的 create-react-app 快速构建 React 开发环境
实战教程(2)React 基础
【React 模仿大众点评 webapp】实战教程
react资源汇总(react-tutorial)
常见问题
webpack-dev-server 打不开问题
node_modules/.bin/webpack-dev-server
这样开启是因为webpack-dev-server没有全局安装 而是装在了项目下
可以看这里原因
Link标签废弃
这是因为我在写的时候 react-router已经更新到了router4 所以要对react-router进行升级
import {Router,Route,Link,browserHistory} from 'react-router'
ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /home/wuyeyun-18/资料/IMOOC-React-master/13-04
实例1
<!DOCTYPE html> <html lang="en"> <head> <Meta charset="UTF-8"> <title>Document</title> <script src="../build/react.js"></script> <script src="../build/react-dom.js"></script> <script src="../build/browser.min.js"></script> <script src="../build/jquery.min.js"></script> </head> <body> <div id="container"></div> <script type="text/babel"> var TestClickComponent = React.createClass({ handleClick: function (event) { var tip = this.refs.tip; if (tip.style.display === 'none') { tip.style.display = 'inline'; }else { tip.style.display = 'none'; } event.stopPropagation(); event.preventDefault(); },render: function () { return ( <div> <button onClick={this.handleClick}>显示 | 隐藏</button><span ref="tip">测试点击</span> </div> ); } }); var TestInputComponent = React.createClass({ getInitialState: function () { return { inputContent: '' }; },changeHandler: function (event) { this.setState({inputContent: event.target.value}); event.stopPropagation(); event.preventDefault(); },render: function () { return ( <div> <input type="text" onChange={this.changeHandler}/> <span>{this.state.inputContent}</span> </div> ) } }); ReactDOM.render( <div> <TestClickComponent/> <TestInputComponent/> </div>,document.getElementById('container') ); </script> </body> </html>