React模块化开发

借助前端构建工具webpack

1、webpack是facebook为react量身打造的构建工具

2、主要作用是实现模块化，代码整合，代码分割的作用

3、使用webpack整合以后 也不需要使用browser进行将jsx转成js了

webpack实现模块化---什么是模块化

1、模块指的是一组具有同等属性和功能的集合叫做模块和类的概念相似

2、react模块化指的是一个js中存放一个或多个组件，这些组件通过commonjs规范对外提供接口

3、在其他组件当中可以调用这些对外提供成接口的组件

-----------------------------------------------------------------------------------------------------

commonjs规范

1、一个js内部的函数或者变量想要被外部调用

2、想在另一个函数中调用这些接口 需要通过require（js路径）引入组件，这样实现了一个js调用另外一个js里面的内容

-----------------------------------------------------------------------------------------------------

npm init

npm install webpack --save-dev

npm install jsx-loader --save-dev

npm install react --save-dev

npm install react-dom --save-dev

var React=require('react')
var ReactDOM=require('react-dom')
var Head=require('./a.js')
var Nav=require('./b.js')
var Con=require('./c.js')
var Demo=React.createClass({
    render:function(){
        return(
            <div>
                <Head/>
                <Nav/>
                <Con/>
            </div>
        )
    }
})
ReactDOM.render(<Demo/>,document.getElementById('out'))

entry.js

module.exports={
    entry:'./js/entry.js',/**入口文件**/
    output:{/**输出目录**/
        path:'./js',/**输出路径**/
        filename:'output.js'/**输出文件名称**/
    },
    module:{
        loaders:[
            {
                test: /\.js$/, /**通过入口处理匹配js文件**/
                loader: "jsx-loader", /**使用哪个加载器 css－loader,coffee-loader,babel-loader**/
            }
        ]
    }
}
/****
1.通过入口 寻找入口里面调用的组件 文件  自动处理有依赖

2.代码整合 之所以实现a.js调用b.JS 整合都整合在了一个大文件中
***/

webpack.config.js

生成output.js 然后在index.html中引入输出文件。