React项目搭建及环境配置

React 脚手架 create-react-app

为了快速地进行构建使用 React 的项目，FaceBook 官方发布了一个无需配置的、用于快速构建开发环境的脚手架工具 create-react-app。
如果你需要 React Native 的脚手架项目，可以查看这里：create-react-native-app

create-react-native-app 特性

• 无需配置；
• 集成了对 React, JSX, ES6 和 Flow 的支持；
• 集成了开发服务器；
• 配置好了浏览器热加载的功能；
• 在 JavaScript 中可以直接 import CSS 和图片；
• 自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
• 集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。

create-react-app 自动创建的项目是基于 Webpack + ES6

create-react-app 安装

sudo npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

编译less

creata-react-app 脚手架构建react项目，默认配置不支持sass和less预编译, 解决方法:

1. 执行

npm run eject   //暴露出配置文件
npm install less-loader less --save-dev    //.安装less-loader 和less
npm install

npm run eject结构命令。暴露出webpck的配置命令，原本在脚手架中，配置项是不可见的，需要修改才执行这个命令（这是一个单项命令，一旦结构，不可逆。）

npm run eject 运行后npm start 启动报错，解决办法

npm install    //再npm start 

2. 修改webpack 配置
   修改 webpack.config.dev.js 和 webpack.config-prod.js 配置文件

test: /\.css$/ 改为 /\.(css|less)$/

再在 test 的下面找到use，添加 loader

{ loader: require.resolve('less-loader') }     // compiles Less to CSS  

ok 重新运行项目 less已经编译了

项目结构

• src目录
  src目录用来存放我们自己的代码，可以在src下面创建子目录，只有src根目录下的文件会被webpack编译，所以必须把文件放在src根目录下，否则不会识别。
• public目录
  只有public目录下的文件才会被public/index.html引用

public和src下的 index.html 文件必须存在不能改名

常用命令

启动

npm start  

编译打包

npm run build   //放在build目录中，并且优化，压缩，使用hash重命名文件

文件修改后测试

npm test

https运行

set HTTPS=true&&npm start

线上编译
这个是create-react-app的一个大亮点，它能让你的应用骗译出在线上生产环境运行的代码，编译出来的文件很小，且文件名还带hash值，方便我们做cache，而且它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，真的超级方便。

npm run build

api 开发
只需要在package.json文件中，加一个配置项就可以

"proxy": "http://localhost:3001/",

ajax 替代用fetch

npm install whatwg-fetch

import 'whatwg-fetch'fetch('/power-mnjy-mobile/intf/h5/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')     .then(res => res.json())     .then((data) => {      this.setState({ value:data });     });

调试工具

react developer tools
在chrome中添加扩展程序react developer tools，记得重启浏览器，在chrome的开发工具里面会出现react选项。