脚手架
facebook的官方脚手架
1、安装 create-react-app （CRA）
npm install create-react-app -g
yarn global add create-react-app
安装yarn
方法一：使用安装包安装
[官方下载安装包](https://yarnpkg.com/zh-Hans/docs/install)
安装完毕后，一定要配置环境变量。
方法二：使用npm安装
npm i yarn -g
-i：install
-g：全局安装（global）,使用 -g 或 --global
输入yarn -version 可以看到版本号，说明安装成功了。我们就可以在项目中像使用npm一样使用yarn了。
2、用脚手架创建 react项目
create-react-app 项目名称
如：create-react-app reactapp01
注意：项目名称不能有大写字母。
3、 启动项目：
npm start | yarn start
4、目录解析：
4.1）第一级目录
node_modules:是项目依赖的模块
src：是程序员写代码的地方，src是source的缩写，表示源代码
public: 静态资源。
4.2）展开目录：
- Public：
index.html：是html网页，是个容器。这个文件千万不敢删除，也不能改名。
只有Public目录下的文件才会被index.html文件引用，这是静态资源，index.html不会引用
src目录下的文件
manifest.json：生成一个网页的桌面快捷方式时，会以这个文件中的内容作为图标和文字
的显示内容
- src：
src目录是源代码，webpack只会打包这个目录下的文件，所以，把需要打包的文件
都放在这个目录下。
Index.js：是主js文件，千万不能删除，也不能改名
Index.css：是index.js引入的css文件（也是模块，webpack会把css也打包成模块） 千万不敢删除，也不能改名
App.js：是一个组件示例（模块），在 index.js里会引入这个组件。我们自己需要写组件时，只需要复制App.js文件即可。
App.css：是App.js文件引入的css文件（也是模块，webpack会打包）。
Logo.svg：是图片
? registerServiceWorker.js：支持离线访问，所以用起来和原生app的体验很接近,只有打包生成线上版本的react项目时，registerServiceWorker.js才会有效。服务器必须采用https协议
5、打包
npm run build | yarn build
6）、如果要解构出配置文件：
npm run eject | yarn eject 解构出所有的配置文件 可选
7、如果需要调试，安装react-dev-tools工具
-
通过git clone https://github.com/facebook/react-devtools.git下载到本地（或者直接点击下载）
-
下载之后进入到react-devtools目录下，用npm安装依赖
npm --registry https://registry.npm.taobao.org install -
然后在npm run build:extension:chrome
环境配置
1、把配置解构
npm run eject | yarn eject
2、修改端口
//修改script/start.js
const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3001;
3、去除eslint 警告
//config/webpack.config.js
//注释关于eslint的导入和rules规则(编辑器内部得报错、波浪线)
资源限制
-
本地资源导入(import) 不可以导入src之外的包
-
图片声音等静态资源的路径，和vue脚手架是同样的（图片路径是静态的，文件放在src/assets下，图片路径是动态的，放在public下）。
在脚手架里做项目的步骤
1、创建目录
? 在src目录下创建以下文件夹：
-
assets ：静态资源文件夹
-
components：组件文件夹
? /components/a组件/ a.js 和 a.css
-
pages：页面文件夹
-
styles：样式文件夹
2、图片文件夹
1)．在public里放图片。
? 把图片放到public文件夹中 直接使用图片名使用(使用绝对路径（img src="/img/image.jpg" />）)，这样的图片不会打包
2)．使用require引用，require(‘图片的相对路径’)，Require中只能使用字符串不能使用变量，这样的图片会打包。如：
<img src={require("…/…/assets/img/banner04.jpg").default} />
反向代理：
https://create-react-app.dev/docs/proxying-api-requests-in-development/
1、安装模块（http-proxy-middleware）：
npm install http-proxy-middleware --save-dev
yarn add http-proxy-middleware -D
2、在项目源代码的根目录创建文件： src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
console.log("proxy");
app.use(
'/api',
createProxyMiddleware({
target: 'http://xmb8nf.natappfree.cc',
changeOrigin: true,
// 重写接口路由
pathRewrite: {
'^/api': ''
}
})
);
};
3、重启服务器
yarn start
第三方脚手架
yeomen/dva/umi