create-react-app脚手架工具使用

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.mdnode_modules/package.json.gitignorepublic/favicon.icoindex.htmlmanifest.jsonsrc/App.cssApp.jsApp.test.jsindex.cssindex.jslogo.svgregisterServiceWorker.js

3-使用 npm 或者 yarn 来搭建项目

创建项目：

create-react-app my-appcd 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 前缀；
集成好了编译命令，编译后直接发布成产品，并且还包含了 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应用同一个端口。

create-react-app脚手架工具使用相关推荐

react快速开始(二)-使用脚手架Create React App创建react应用
文章目录 react快速开始(二)-Create React App入门什么是Create React App 快速开始使用IDE webstrom创建react项目 create react a ...
在 .NET Core 5 中集成 Create React app
翻译自 Camilo Reyes 2021年2月22日的文章 <Integrate Create React app with .NET Core 5> [1] 本文演示了如何将 Crea ...
Create React App从使用到Docker部署
一.介绍 Create React App 是 React 脚手架,它帮我们可以快速生成项目的工程化结构,脚手架让项目从搭建到开发再到部署,整个流程变得快速和便捷. 二.安装 Create React ...
如何使用Create React App DevOps自动化工作中所有无聊的部分
by James Y Rauhut 詹姆士·鲁豪(James Y Rauhut) 如何使用Create React App DevOps自动化工作中所有无聊的部分 (How I automate al ...
Create React App 2.0 华丽登场
贺! Create React App 2.0 在 10/02 正式发布 ?????? Create React App 是由官方所维护的开发工具,主要提供了专属于 React 开发环境的前置工作.简 ...
Create React App 2.0 正式发布：Babel 7、webpack 4 等
英文原文:Create React App 2.0: Babel 7, Sass, and More – React Blog 以下是简要翻译 React 本身是没有附带任何编译工具的,如果没有测试运 ...
深入浅出 Create React App
本文差点难产而死.因为总结的过程中,多次怀疑本文是对官方文档的直接翻译和简单诺列:同时官方文档很全面,全范围的介绍无疑加深了写作的心智负担.但在最终的梳理中,发现走出了一条与众不同的路,于是坚持分享出 ...
Vite 3.0 vs. Create React App：比较和迁移指南
Create React App (CRA) 在 React 社区及其整个生态系统的发展中发挥了关键作用. 在突发奇想构建本地 React 开发环境时,它是不同技能的开发人员的首选工具. CRA 拥有 ...
【翻译】基于 Create React App路由4.0的异步组件加载（Code Splitting）
基于 Create React App路由4.0的异步组件加载本文章是一个额外的篇章,它可以在你的React app中,帮助加快初始的加载组件时间.当然这个操作不是完全必要的,但如果你好奇的话,请随 ...
Create React App proxy配置
最近又吃了没文化的亏(哭晕在洗手间≧ ﹏ ≦) 做后台管理系统的时候,需要调一个易连云打印小票的接口, 项目框架是 Create React App+typescript,后端是node.js 本媛负 ...