1- 快速创建项目
npm install -g create-react-app //---全局安装react脚手架
create-react-app my-app //---通过react脚手架创建my-app项目
cd my-app/ //---打开my-app项目
npm start //---启动my-app项目
npm run build //---编译打包my-app项目
不需要 安装Webpack or Babel. 已经集成进去了(Node >= 6 and npm >= 3)
2- 创建好以后的项目样子
my-app/
README.md
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
manifest.json
src/
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
3-使用 npm 或者 yarn 来搭建项目
创建项目:
create-react-app my-app
cd my-app
启动项目:
npm start or yarn start
测试项目:
npm test 或 yarn test //可以执行测试动作
编译项目:
npm run build 或 yarn build
4-使用优点:
无需配置;
集成了对 React, JSX, ES6 和 Flow 的支持;
集成了开发服务器;
配置好了浏览器热加载的功能;
在 JavaScript 中可以直接 import CSS 和图片;
自动处理 CSS 的兼容问题,无需添加 -webkit 前缀;
扫描二维码关注公众号,回复: 2173936 查看本文章集成好了编译命令,编译后直接发布成产品,并且还包含了 sourcemaps。
5-骗译出在线上生产环境运行的代码
骗译出在线上生产环境运行的代码,编译出来的文件很小,且文件名还带hash值,方便我们做cache,而且它还提供一个服务器,让我们在本地也能看到线上生产环境类似的效果。
1- npm run build 或者 yarn build //(编译)
2- npm install -g pushstate-server //(查看编译后的线上代码的效果)
3- pushstate-server build
6-开发环境跟线上环境又不一样
react应用是跑在3000端口的,可是api服务可能跑在3001端口,这个时候,你跟api服务器交互的时候,可能会使用fetch或各种请求库,比如jquery的ajax。
这个时候可能会遇到CORS问题,毕竟端口不同,而线上环境却没有这个问题。因为你都控制线上环境的react应用和api应用,跑在同一个端口上。
在package.json 中修改,端口为线上端口 : "proxy": http://localhost:3001/
http的何种请求库,都是一样的,不用改任何代码。这个选项,只对开发环境有效,线上环境还是保持react应用和api应用同一个端口。