13518219792
这篇文章给大家分享的是有关如何使用create-react-app快速构建React开发环境的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。
成都创新互联公司公司2013年成立，是专业互联网技术服务公司，拥有项目网站制作、成都做网站网站策划，项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命，1280元横县做网站,已为上家服务,为横县各地企业和个人服务,联系电话:13518219792
常用的脚手架
react-boilerplate
react-redux-starter-kit
create-react-app（git上关注量最大）
使用 create-react-app 快速构建 React 开发环境
create-react-app 是来自于 Facebook，通过该命令我们无需配置就能快速构建 React 开发环境。
create-react-app 自动创建的项目是基于 Webpack + ES6 。
执行以下命令创建项目：
$ cnpm install -g create-react-app $ create-react-app my-app $ cd my-app/ $ npm start
tips：
如果使用 npm 速度很慢，你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org $ npm config set registry https://registry.npm.taobao.org
如何编译less
1.暴露出配置文件
npm run eject
2.安装less-loader 和less
npm install less-loader less --save-dev
3.修改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
}好了 重新运行项目 less已经编译了
项目结构
src目录
src目录用来存放我们自己的代码，可以在src下面创建子目录，只有src根目录下的文件会被webpack编译，所以必须把文件放在src根目录下，否则不会识别。
public目录
只有public目录下的文件才会被public/index.html引用
tip:public和src下的index.html文件必须存在不能改名
常用命令
1启动命令
npm start
2编译打包命令。在生产环境中编译代码，并放在build目录中能够正确的打包代码，并且优化，压缩，使用hash重命名文件
npm run build
3.文件修改后测试
npm test
4.结构命令。暴露出webpck的配置命令，原本在脚手架中，配置项是不可见的，需要修改才执行这个命令（这是一个单项命令，一旦结构，不可逆。）
npm run eject
5.https运行
set HTTPS=true&&npm start
6.线上编译
这个是create-react-app的一个大亮点，它能让你的应用骗译出在线上生产环境运行的代码，编译出来的文件很小，且文件名还带hash值，方便我们做cache，而且它还提供一个服务器，让我们在本地也能看到线上生产环境类似的效果，真的超级方便。
只需一行命令：
npm run build
7.api开发
只需要在package.json文件中，加一个配置项就可以了。
"proxy": http://localhost:3001/,
8.ajax？
替代用fetch
npm install whatwg-fetch
import 'whatwg-fetch'
fetch('/power-mnjy-mobile/intf/h6/user/login?mobile=13000000001&pwd=a111111&ignoreCsrfToken=true')
.then(res => res.json())
.then((data) => {
this.setState({ value:data });
});调试工具react developer tools（https://github.com/facebook/react-devtools）
在chrome中添加扩展程序react developer tools，记得重启浏览器（重启 重启 重启，重要的事情说三遍），在chrome的开发工具里面会出现react选项。
感谢各位的阅读！关于“如何使用create-react-app快速构建React开发环境”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，让大家可以学到更多知识，如果觉得文章不错，可以把它分享出去让更多的人看到吧！
