react 基础工程构建

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

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

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

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

一、安装react-webpack

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、工程目录

安装完成后,目录结构如下:

react 基础工程构建_第1张图片
目录结构.png

主要的目录结构解析:

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

看一下package.js的主要内容

react 基础工程构建_第2张图片
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 就可以运行这个项目了。

react 基础工程构建_第3张图片
运行效果.png

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

你可能感兴趣的:(react 基础工程构建)