## 第三步：項目結構 在public目錄下創建四個目錄：?css，js，fonts，img。然后，下載這個[favicon.png](https://raw.githubusercontent.com/sahat/newedenfaces-react/master/public/favicon.png)，也把它放到這里。  在項目根目錄，創建新目錄app。 然后在app文件夾里新建四個目錄：actions，components，stores，stylesheets，以及三個空文件*alt.js*，*routes.js*和*main.js*。  在stylesheets目錄下新建文件*main.less*，我們將在里面填入樣式。 回到根目錄，創建新文件*bower.json*并粘貼下面的代碼： ~~~ { "name": "newedenfaces", "dependencies": { "jquery": "^2.1.4", "bootstrap": "^3.3.5", "magnific-popup": "^1.0.0", "toastr": "^2.1.1" } } ~~~ > 注意：Bower是一個讓你輕松下載JavaScript庫的前端包管理器，通過命令行即可下載上面的庫。 在終端運行`bower install`然后等待包下載并安裝到bower_components目錄。你能在[.bowerrc](http://bower.io/docs/config/#directory)文件改變該路徑，不過本教程我們使用默認設置。 和node_modules相似，你可能不想將bower_components提交到Git倉庫，但如果你不提交的話，當你部署應用的時候如何下載這些文件？我們將在教程的部署部分來解決這個問題。 復制bower_components/bootstrap/fonts下所有的字體圖標（glyphicons fonts）到public/fonts目錄。 下載并解壓下面的背景圖片到public/img目錄。 * [Background Images.zip](http://sahatyalkabov.com/assets/Background%20Images.zip) > 有趣事實：三年前我使用Adobe Photoshop來創建高斯模糊效果，但它們今天能輕松的使用[CSS濾鏡](http://codepen.io/aniketpant/pen/DsEve)實現。 打開*main.less*并粘貼下面的文件中的代碼。鑒于代碼的長度，我決定不將它放在文中。 * [main.less](https://github.com/sahat/newedenfaces-react/blob/master/app/stylesheets/main.less) 如果你以前用過[Bootstrap](http://getbootstrap.com/)?CSS框架，那么你應該對里面的大部分代碼都感到熟悉。 > 注意：我花了很長時間在這個UI上，調整fonts和顏色，添加精細的變換效果，如果你有時間的話，推薦在完成本教程之后繼續探索一下樣式的細節。 我不知道你是否知道最近的[趨勢](https://speakerdeck.com/vjeux/react-css-in-js)，是將樣式直接放入React組件當中，但我不太確定我是否喜歡這項實踐，也許當相關的工具完善之后我會喜歡吧，但在那之前我還是會使用附加的樣式表文件。不過，如果你對使用模塊化的CSS感興趣，可以看看這個[css-modulesify](https://github.com/css-modules/css-modulesify)項目。 在我們開始構建React?app之前，我決定先花三個章節的時間講講ES6、React、Flux基礎，否則要想一下子全部學會它們會讓人很崩潰。對我個人來說，我曾花了不少時間理解某些用ES6編寫的React + Flux示例代碼上，因為我相當于同時學習一個新語法、一個新框架，以及一個全新的應用架構。 由于三者的內容眾多，顯然我不能在一篇文章中全講清楚，我將會只講那些本教程中會用到的主題。