第三步：项目结构
最后更新于：2022-04-01 03:19:07
## 第三步：项目结构
在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示例代码上，因为我相当于同时学习一个新语法、一个新框架，以及一个全新的应用架构。
由于三者的内容众多，显然我不能在一篇文章中全讲清楚，我将会只讲那些本教程中会用到的主题。