react
"start": "webpack-dev-server --hot"
现在我们可以使用 npm start 命令来启动服务。--hot 命令会在文件变化后重新载入,这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。
经验之谈
{
- ./根目录(当前文件夹)
- ../上一级目录(上一文件夹)
- document操作在render里面,千万不要出现分号
- browser.min.js拼写不要错误,不是broswer
- 可以不加分号,但是不要写错
- 单独元素是</>,写<>就报错
- render:function()不要漏了小括号
- PropTypes大小写
- React.createClass({})不是()
- onClick不是onclick,注意大小写
- js(){} ({})区别是什么
}
下载包中也提供了很多学习的实例。
这个问题没有解决
react官网 http://reactjs.cn/react/docs/tutorial.html
React 入门实例教程 http://www.ruanyifeng.com/blog/2015/03/react.html
ReactJS分析之入口函数render http://www.cnblogs.com/accordion/p/4501118.html
demo2
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- return <div>{Hello, this.name}</div> {}用错了 {return <div>Hello, {name}</div>}); 最后多了一个分号--> <!DOCTYPE html> <html lang="en"> <head> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script> <script src="./build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var names = ['tab', 'ctrl', 'shift']; ReactDOM.render( <div> { names.map(function (name) { return <div>Hello, {name}</div> }) } </div>, document.getElementById('example') ); </script> </body> </html>
demo3
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- <div>hi tab</div>, 后面不要忘了逗号--> <!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> </head> <body> <div id="example"></div> <script type="text/babel"> var arr = [ <div>hi tab</div>, <div>hi shift</div> ]; ReactDOM.render( <div>{arr}</div>, document.getElementById('example') ); </script> </body> </html>
demo4
View Code
demo5
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- 大括号里面套着return React.Children.map (this.props.children), function(child) { return <li>hello, {child}</li> }圆括号本该写在外头 React.Children.map Children首字母大写--> <!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> </head> <body> <div id="example"></div> <script type="text/babel"> var NodeListPakistan = React.createClass({ render: function() { return ( <ol>{ React.Children.map(this.props.children, function(child){ return <li>hello,{child}</li> }) }</ol> ); } }); ReactDOM.render( <NodePakistan> <span>tab</span> <span>shift</span> </NodePakistan>, document.getElementById('example') ); </script> </body> </html>
demo6
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- render:function()括号不能送去了 MyTitle大小写,PropTypes大小写 --> <!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> </head> <body> <div id="example"></div> <script type="text/babel"> var data = 'Chief'; var Mytitle = React.createClass({ propTypes : { title : React.PropTypes.string.isRequired }, render : function() { return <h1>{this.props.title}</h1>; } }); ReactDOM.render( <Mytitle title={data}/>, document.getElementById('example') ); </script> </body> </html>
demo7
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- ref="myTextInput缺了半边”不知道是什么造成的 onclick={this.handleClick}/> 不是onclick={this.handleClick}> 两个input外面要用div包起来,否则重叠在一起或者报错 --> <!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> </head> <body> <div id="example"></div> <script type="text/babel"> var MyComponent = React.createClass({ handleClick: function() { this.refs.myTextInput.focus(); }, render: function() { return ( <div> <input type="text" ref="myTextInput"/> <input type="button" value="this i don't know" onclick={this.handleClick}/> </div> ); } }); ReactDOM.render( <MyComponent />, document.getElementById('example')); </script> </body> </html>
demo8
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- onClick不是onclick,注意大小写 return liked: false 初始化要return setState({})里面加大括号 getInitialState 不是 setInitialState <p onClick="this.handleClick"> != <p onClick={this.handleClick}>--> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script> <script src="./build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var LikeButton = React.createClass({ getInitialState: function () { return {liked: false} }, handleClick: function (event) { this.setState({ liked: !this.state.liked }); }, render: function () { var text = this.state.liked? 'liked' : 'haven\'t liked'; return <p onClick={this.handleClick}>You {text} this.Click to toggle.</p> } }); ReactDOM.render( <LikeButton/>, document.getElementById('example') ); </script> </body> </html>
demo9
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- onChange={handleChange} --== onChange={this.handleChange} return {nancy: 'Hello';} 返回一个json值,不能包含分号 this.setState({nancy: this.state.nancy}); this.setState({nancy: event.target.nancy}); var nancy = this.state.value; 这一句为什么要这样写 var nancy = this.state.value; var nancy = this.state.nancy; 这里写错了 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> <script src="./build/react.js"></script> <script src="./build/react-dom.js"></script> <script src="./build/browser.min.js"></script> </head> <body> <div id="example"></div> <script type="text/babel"> var Input = React.createClass({ getInitialState: function () { return { nancy: 'Hello! ' }; }, handleChange: function (event) { this.setState({ nancy: event.target.value }); }, render: function () { var nancy = this.state.nancy; return (<div> <input type="text" value={nancy} onChange={this.handleChange}/> <p>{nancy}</p> </div>); } }); ReactDOM.render(<Input/>, document.getElementById('example')); </script> </body> </html>
demo10
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- componentDidMount 不是 componentDidCount --> <!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> </head> <body> <div id="example"></div> <script type="text/babel"> var Hello = React.createClass({ getInitialState: function () { return {opacity: 1.0}; }, componentDidMount: function () { setInterval(function(){ var _opacity = this.state.opacity; _opacity -= .05; if(_opacity < 0.1) { _opacity = 1.0; } this.setState({opacity:_opacity}); }.bind(this), 100); }, render: function () { return <p style={{opacity: this.state.opacity}}>Hello {this.props.name}</p> } }); ReactDOM.render(<Hello name='world'/>, document.getElementById('example')); </script> </body> </html>
demo11
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<!-- $.get(this.state.lastGistUrl, function(){});改为this.props.lastGistUrl .get(this.state.lastGistUrl改为$.get(this.props.source }.bind(this)不能遗漏了 ,由于ES6不支持自动绑定,所以需要使用.bind(this) username = lastGist.owner.login写错了,应该是username : lastGist.owner.login handleHide() { this.setState({ show: false }); } componentDidMount() { window.addEventListener( "click", this.handleHide.bind(this), false ); } componentWillUnmount() { window.removeEventListener( "click", this.handleHide.bind(this), false ); } http://react-china.org/t/es6bu-zhi-chi-ismounted-da-jia-shi-ru-he-pan-duan-dang-qian-zu-jian-shi-fou-cun-zai-de/968 --> <!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="example"></div> <script type="text/babel"> var GistUrl = React.createClass({ getInitialState: function () { return {username: '', lastGistUrl: ''}; }, componentDidMount: function () { $.get(this.props.src, function(result) { var lastGist = result[0]; if (this.isMounted()) { this.setState({ username : lastGist.owner.login, lastGistUrl : lastGist.html_url }); } }.bind(this)); }, render: function () { return (<div>{this.state.username}'s last gist is <a href={this.state.lastGistUrl}>here</a></div>) } }); ReactDOM.render(<GistUrl src='https://api.github.com/users/octocat/gists'/>,document.getElementById('example')); </script> </body> </html>
demo12
demo13