輕松入門React和Webpack
最近在學習React.js，之前都是直接用最原生的方式去寫React代碼，發現組織起來特別麻煩，之前聽人說用Webpack組織React組件得心應手，就花了點時間學習了一下，收獲頗豐。
說說React
一個組件，有自己的結構，有自己的邏輯，有自己的樣式，會依賴一些資源，會依賴某些其他組件。比如日常寫一個組件，比較常規的方式：
－ 通過前端模板引擎定義結構
－ JS文件中寫自己的邏輯
－ CSS中寫組件的樣式
－ 通過RequireJS、SeaJS這樣的庫來解決模塊之間的相互依賴，
那么在React中是什么樣子呢？
結構和邏輯
在React的世界里，結構和邏輯交由JSX文件組織，React將模板內嵌到邏輯內部，實現了一個JS代碼和HTML混合的JSX。
結構
在JSX文件中，可以直接通過React.createClass來定義組件：
var CustomComponent = React.creatClass({
render: function(){
return ();
}
}); 通過這種方式可以很方便的定義一個組件，組件的結構定義在render函數中，但這并不是簡單的模板引擎，我們可以通過js方便、直觀的操控組件結構，比如我想給組件增加幾個節點：
通過這種方式，React使得組件擁有靈活的結構。那么React又是如何處理邏輯的呢？
邏輯
寫過前端組件的人都知道，組件通常首先需要相應自身DOM事件，做一些處理。必要時候還需要暴露一些外部接口，那么React組件要怎么做到這兩點呢？
事件響應
比如我有個按鈕組件，點擊之后需要做一些處理邏輯，那么React組件大致上長這樣：
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
}); 點擊按鈕應當觸發相應地邏輯，一種比較直觀的方式就是給button綁定一個onclick事件，里面就是需要執行的邏輯了：
function getDragonKillingSword() {
//送寶刀
}
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
}); 但事實上getDragonKillingSword()的邏輯屬于組件內部行為，顯然應當包裝在組件內部，于是在React中就可以這么寫：
var ButtonComponent = React.createClass({
getDragonKillingSword: function(){
//送寶刀
},
render: function(){
return (屠龍寶刀，點擊就送);
}
}); 這樣就實現內部事件的響應了，那如果需要暴露接口怎么辦呢？
暴露接口
事實上現在getDragonKilling
Sword已經是一個接口了，如果有一個父組件，想要調用這個接口怎么辦呢？
父組件大概長這樣：
var ImDaddyComponent = React.createClass({
render: function(){
return (
//其他組件
//其他組件
);
}
}); 那么如果想手動調用組件的方法，首先在ButtonComponent上設置一個ref=""屬性來標記一下，比如這里把子組件設置成，那么在父組件的邏輯里，就可以在父組件自己的方法中通過這種方式來調用接口方法：
this.refs.getSwordButton.getDragonKillingSword();
看起來屌屌噠~那么問題又來了，父組件希望自己能夠按鈕點擊時調用的方法，那該怎么辦呢？
配置參數
父組件可以直接將需要執行的函數傳遞給子組件：
然后在子組件中調用父組件方法：
var ButtonComponent = React.createClass({
render: function(){
return (屠龍寶刀，點擊就送);
}
}); 子組件通過this.props能夠獲取在父組件創建子組件時傳入的任何參數，因此this.props也常被當做配置參數來使用。
屠龍寶刀每個人只能領取一把，按鈕點擊一下就應該灰掉，應當在子組件中增加一個是否點擊過的狀態，這又應當處理呢？
組件狀態
在React中，每個組件都有自己的狀態，可以在自身的方法中通過this.state取到，而初始狀態則通過getInitialState()方法來定義，比如這個屠龍寶刀按鈕組件，它的初始狀態應該是沒有點擊過，所以getInitialState方法里面應當定義初始狀態clicked: false。而在點擊執行的方法中，應當修改這個狀態值為click: true：
var ButtonComponent = React.createClass({
getInitialState: function(){
//確定初始狀態
return {
clicked: false
};
},
getDragonKillingSword: function(){
//送寶刀
//修改點擊狀態
this.setState({
clicked: true
});
},
render: function(){
return (屠龍寶刀，點擊就送);
}
}); 這樣點擊狀態的維護就完成了，那么render函數中也應當根據狀態來維護節點的樣式，比如這里將按鈕設置為disabled，那么render函數就要添加相應的判斷邏輯：
render: function(){
var clicked = this.state.clicked;
if(clicked)
return (屠龍寶刀，點擊就送);
else
return (屠龍寶刀，點擊就送);
} 小節
這里簡單介紹了通過JSX來管理組件的結構和邏輯，事實上React給組件還定義了很多方法，以及組件自身的生命周期，這些都使得組件的邏輯處理更加強大
資源加載
CSS文件定義了組件的樣式，現在的模塊加載器通常都能夠加載CSS文件，如果不能一般也提供了相應的插件。事實上CSS、圖片可以看做是一種資源，因為加載過來后一般不需要做什么處理。
React對這一方面并沒有做特別的處理，雖然它提供了Inline Style的方式把CSS寫在JSX里面，但估計沒有多少人會去嘗試，畢竟現在CSS樣式已經不再只是簡單的CSS文件了，通常都會去用Less、Sass等預處理，然后再用像postcss、myth、autoprefixer、cssmin等等后處理。資源加載一般也就簡單粗暴地使用模塊加載器完成了
組件依賴
組件依賴的處理一般分為兩個部分：組件加載和組件使用。
組件加載
React沒有提供相關的組件加載方法，依舊需要通過
來源：Github