react 基础工程构建

作为一个IOS工程师，最近在学习前端相关知识，在这里想做点流水笔记。
很多东西自己也不清楚，很多东西都是自己的猜测，现在的主要目的是看清楚整个前端的基本使用和react的基本使用。

记录的主要内容：
1、 yeoman 工程构建
2、react 的基本使用
3、react-router的基本使用
4、react-reflux的基本使用

作为IOS 工程师，习惯了Xcode IDE工具帮忙构建项目，编译，等相关的工作。现在的主要目的是快速进入前端学习，学习es5 es6 css css3 react 等相关知识，对于构建项目的相关工具就不做深究，只是有一个概念的理解。

这里主要使用yeoman做脚手架，自动构建工程。步骤如下：

一、安装<a href="https://github.com/react-webpack-generators/generator-react-webpack">react-webpack</a>

1、安装yeoman

  npm install -g yo
  npm install -g generator-react-webpack

2、创建工程目录

 mkdir yo_react_webpack && cd  yo_react_webpack 
 yo react-webpack

3、工程目录

安装完成后，目录结构如下：

目录结构.png

主要的目录结构解析：

<strong>webpack.config.js</strong> 是webpack的config文件
<strong>cfg</strong> 是webpack.config.js里面的关联文件
<strong>package.js</strong> 是本工程的依赖库和服务启动脚本（这里作为IOS程序员可以理解为类似于cocoapod的第三方依赖管理，但是比cocoapod要强大）

看一下package.js的主要内容

package.js.png

如果你需要自己增加第三方库，可以在这个文件里面添加，然后执行 npm install 就可以了

4、运行项目

运行项目的命令

# Start for development
npm start # or
npm run serve

# Start the dev-server with the dist version
npm run serve:dist

# Just build the dist version and copy static files
npm run dist

# Run unit tests
npm test

# Auto-run unit tests on file changes
npm run test:watch

# Lint all files in src (also automatically done AFTER tests are run)
npm run lint

# Clean up the dist directory
npm run clean

# Just copy the static assets
npm run copy

所以我们在cmd 里面执行 npm start 就可以运行这个项目了。

运行效果.png

到这里基本项目就构建成功了。