react系列文章建立在你已經熟悉javascript、html、css、less、webpack、react語法等的基礎上，這個熟悉是單個的教程都看過，但是沒有系統的把它們串聯起來。

下面開始我的嘗試之旅（注：此篇與下一篇為盲目探索篇，從（三）開始正式實踐）。

首先，假設你沒有啟動過專案，那麼該怎麼啟動呢（盲人摸象，從文件入手）：先看react文件，開啟文件入門教程下有幾個大字JSFiddle，甭管他是什麼，下面還有兩行紅字呢，點幾下看看是什麼。發現是兩個供我們寫程式碼實戰工具，開啟第一個，預設輸出的是“hello world”，那就自己隨便修改下吧，先加一行<p>你好啊</p>

var Hello = React.createClass({
  render: function() {
    return <div>Hello {this.props.name}
    <p>你好啊</p>
    </div>;
  }
});

點選左上角的執行，發現右邊輸出了“你好啊”，如下圖。

很好，接著嘗試,修改reactDOM.render()

ReactDOM.render(
  <Hello name="World" />,
  var change = document.getElementById('container');
  cahnge.style.backgroundColor="red";
);
 

再執行，發現不但沒有顯示，原來顯示的內用也全沒了！好奇怪！其實也不奇怪，react中的資料驅動有點特別，注重純函式，在render中是不允許這種有修改值的操作的，以上是個人不全面的理解，以後對react理解更透徹了在來更新吧，反正記住這裡不能亂來就是。

接下來，繼續探索！還是規規矩矩用自己的編輯器吧，我依然用的webstorm。那麼看文件吧，先看react官方文件  ，main.js寫好後（甭管在哪寫，自己建個檔案做主目錄，在裡面加一個檔案命名main.js就是），建好後要從終端進這個目錄，用browserify或webpack執行npm install那行命令（進自己的目錄後直接輸這行就行，如果不會就自行學習終端命令的一些基礎知識吧），發現報錯提示找不到package.json檔案

 找原因，發現我們的目錄裡真的沒這個檔案，那就往回看，這段程式碼上面文字寫的是用webpack安裝react dom和構建你的包，在向上也有在“通過npm使用react”幾個大黑子下面有出現了一個詞“webpack”，感覺挺厲害的樣子，百度下看看是什麼！找到它的官方文件WebPack中文指南。按照教程一步一步的來，發現裡面有建立package.json檔案的地方（配置檔案那一小節），很好，這個檔案算是解決了，既然來了索性就把webpack看完吧，反正也不多，發現內容不多，需要在實踐中加深理解。

注意：後面輸入的命令都是webpack  而不是webpack entry.js bundle.js。各種效果大家可自己執行對比。

按照webpack教程我們已經可以在頁面顯示內容， 下面我們還想加入react，這才是最終目的。先把webpack的程式碼提交在進行下一步。此節完！