--引言
很多人初次上手,或许不知道react到底该怎么学习,使用react你需要掌握几十个知识点。开发环境对新手来说都是一个不小的挑战,我们需要nodejs,然后还要嘎嘣脆的python做webpack打包,还需要ruby的一些组件,然后还有es6,promise,router,express,koa;是不是很眼花缭乱,也很头大。所以对你们来说,你们需要一个简单、通俗、易懂(明明是一个意思)的框架来帮助你们,成功的一小步就是能做点东西出来,不是么。
</br>
React Starter Kit — "isomorphic" web app boilerplate
</br>
React-starter-kit是一个快速搭建webapp的框架,他集成了诸如Node.js,React.js,Express, Flux,ES6+, JSX,Babel, PostCSS,Webpack, BrowserSync... ,目的就是给大家一个思路,什么功能用什么工具。
需求
- Mac OS X, Windows, or Linux
- Node.js v5.0 or newer
- npm
v3.3 或者更新的版本 (new to npm?) - node-gyp
prerequisites mentioned here - 一款支持React/JSX/Flow/ESlint 等的IDE工具(learn more)
项目结构
在开始之前我们先看看他的目录结构
<pre>提示:该版本内并没有包含一款flux流控制器,你可以选择当前一些主流的组件
例如Flux, Redux, 和Relay等..
这些组件都可以很好的帮助你处理业务间的扭转</pre>
开始
- 下载最新的版本
你可以通过git命令去clone最新的React Starter Kit(RSK)版本
<pre>
$ git clone -o react-starter-kit -b master --single-branch \
https://github.com/kriasoft/react-starter-kit.git MyApp
$ cd MyApp
</pre> - 安装npm组件
项目所依赖的组件在package.json中可以查看,他包含运行依赖和调试依赖,可以通过如下命令安装(在package.json所在目录执行)
<pre>
$ npm install
</pre> - 运行
<pre>
$ npm start
</pre>
这个命令会编译源码(/src)到生成目录(/build),在编译完成后,会启动一个node服务器 (node build/server.js),在这之上,会运行Browsersync
http://localhost:3000/ — Node.js server (build/server.js)
http://localhost:3000/graphql — GraphQL server and IDE
http://localhost:3001/ — BrowserSync proxy with HMR, React Hot Transform
http://localhost:3002/ — BrowserSync control panel (UI)
现在你可以在浏览器或者移动端上打开你的网页,修改代码后,代码会自动编译,并提交到浏览器当中,自动刷新。这一切都是自动的,也就是说我们只需要启动一次服务,就可以一直调试下去,这一切都是HMR 带来的特性。
前面提到的npm start
是在开发的时候用的,他会编译出没有经过压缩、优化的文件,供我们开发调试使用。
如果要编译系统上线的版本,我们需要添加release命令
,通过npm start -- --release
<pre>
$ npm start -- --release
</pre>
编译、调试、部署
如果你只想编译你的代码 (不想启动一个开发服务器), 只需要执行:
<pre>$ npm run build</pre>
如果要编译一个运行版本:
<pre>$ npm run build -- --release</pre>
在运行了这个命令之后, 这个文件夹下 /build
就会包含编译的运行版本.
.
检查错误的源代码和运行的潜在问题:
<pre>$ npm run lint`</pre>
执行单元测试:
<pre>$ npm test # Run unit tests with Mocha
$ npm run test:watch # Launch unit test runner and start watching for changes</pre>
默认情况, Mocha 会去查找这个文件 src/**/*.test.js
. 参考这个例子 atsrc/components/App/App.test.js
.
测试框架可以自行更换为更优秀的AVA,这个具备比Mocha更高的效率,并且支持ASYNC等异步语法
发布你的应用, 执行:
<pre>$ npm run deploy</pre>