首先配置下webpack.config.js
module.exports={ entry:{ demo:'./app/app.js' }, output:{ path:__dirname+'/build', filename:'[name].js', library:'game', libraryTarget:'umd' }, module:{ loaders:[ { test:/.js$/, loader:'jsx-loader' } ] } }
入口文件entry，整合js后输出output，loaders:需要jsx-loader将jsx转换成js
创建html
<!doctype html> <html> <head> <meta charset="utf-8"> <title>标题</title> <meta name="keywords" content=""> <meta name="description" content=""> </head> <body> <div id="out"></div> </body> <script type="text/javascript" src="build/demo.js"></script> </html>
上面配置文件中的入口文件./app/app.js
先来创建此文件
var Head=require('./app1.js'); var Con=require('./app2.js'); var Footer=require('./app3.js'); var React=require('react'); var ReactDOM=require('react-dom'); var Demo=React.createClass({ render:function(){ return (<div> <header><Head/></header> <section><Con/></section> <footer><Footer/></footer> </div>) } }) ReactDOM.render(<Demo/>,document.getElementById('out'));
用require先将依赖导入进来,然后就是用react创建组件
再来创建依赖的app1,app2,app3这3个js
var React=require('react'); var Head=React.createClass({ render:function(){ return (<div> head </div>) } }) module.exports=Head;
简单例子创建完成，需要的react,react-dom,jsx-loader,我们可以使用npm install来创建依赖到项目中。
组件的生命周期
1.
getDefaultProps------>getInitialState------>componentWillMount------>render------>componentDidMount------>组件运行
2.运行过程中
分为两种state状态改变和外部props改变
state:
shouldComponentUpdate------>如果为true------>componentWillUpdate------>render------>componentDidUpdate
props:
componentWillReceiveProps------>shouldComponentUpdate.....
3.卸载组件
componentWillUnmount