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'))

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 整合都整合在了一個大文件中
***/

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