十、react脚手架




一、使用步骤

安装脚手架



1 npm i -g create-react-app


创建项目



1 create-react-app 项目名称



1 #也可以不用安装create-react-app创建项目
2 npx create-react-app my-app


清理创建好的项目中不需要的文件及文件夹

  • 删除​​public​​目录下的全部内容
  • 删除​​src​​目录下的全部内容

在​​public​​目录下放置一个项目图标文件并创建一个html入口文件



1 <!DOCTYPE html>
 2 <html lang="en">
 3   <head>
 4     <meta charset="utf-8" />
 5     <!-- %PUBLIC_URL%代表public文件夹 -->
 6     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 7     <!-- 开启理想视口，用于移动端适配 -->
 8     <meta name="viewport" content="width=device-width, initial-scale=1" />
 9     <!-- 用于配置浏览器页签+地址栏颜色（仅支持安卓手机浏览器） -->
10     <!-- <meta name="theme-color" content="#000000" /> -->
11     <!-- 描述网站信息 -->
12     <meta
13       name="description"
14       content="Web site created using create-react-app"
15     />
16     <!-- 用于指定网页添加到手机主屏后的图标 -->
17     <!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
18     <!-- 应用夹壳配置文件manifest.json -->
19     <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
20     <title>React App</title>
21   </head>
22   <body>
23     <div id="root"></div>
24   </body>
25 </html>


在​​src​​目录下创建根组件​​App.jsx​​



1 import React, { Component } from 'react'
 2 
 3 export default class App extends Component {
 4   render() {
 5     return (
 6       <div>
 7         react
 8       </div>
 9     )
10   }
11 }


在​​src​​目录下创建项目入口文件​​index.js​​



1 import React from 'react';
 2 import ReactDOM from 'react-dom';
 3 // import './index.css';
 4 import App from './App';
 5 // reportWebVitals用于记录页面性能
 6 // import reportWebVitals from './reportWebVitals';
 7 
 8 ReactDOM.render(
 9   // React.StrictMode检查代码
10   // <React.StrictMode>
11     <App />,
12   // </React.StrictMode>,
13   document.getElementById('root')
14 );
15 
16 // reportWebVitals();


二、目录划分

​​src​​目录下文件划分：

  • assets：资源文件
  • css
  • img
  • components：组件
  • common：公共组件（其它项目也可用）
  • content：本项目和业务相关的公共组件
  • network：网络请求
  • router：路由
  • store：状态管理
  • pages：视图文件
三、代码片段创建组件

vs-code安装插件：ES7 React/Redux/GraphQL/React-Native snippets

根据组件文件名创建组件

  • 类组件


1 rcc


  • 函数组件


1 rfc


折叠注释的部分：regin



1 function demo(){
2   //#regin
3   //注释内容
4   //...
5   //#endregin
6 }


四、配置文件

1、webpack配置

react的webpack配置默认隐藏，修改配置需要使用第三方包

安装​​customize-cra​​和​​react-app-rewired​​开发依赖



1 npm i -D customize-cra react-app-rewired


修改​​package.json​​中的脚本命令



1 "scripts": {
2   "start": "react-app-rewired start",
3   "build": "react-app-rewired build",
4   "test": "react-app-rewired test",
5   "eject": "react-scripts eject"
6 }


根目录下新建文件​​config-overrides.js​​



1 const {
 2     override,
 3     addDecoratorsLegacy,
 4     disableEsLint,
 5     addBundleVisualizer,
 6     addWebpackAlias,
 7     adjustWorkbox,
 8 } = require("customize-cra");
 9 const path = require("path");
10 
11 module.exports = override(
12     // 在webpack中禁用eslint
13     disableEsLint(),
14 
15     // 添加webpack路径别名
16     addWebpackAlias({
17         ["@"]: path.resolve("./src"),
18     })
19 );


2、配置代理

接口设置反向代理

安装​​http-proxy-middleware​​



1 npm i -D http-proxy-middleware


根目录新建文件​​setupProxy.js​​



1 const proxy = require('http-proxy-middleware')
 2 
 3 module.exports = function(app){
 4   app.use(
 5       proxy('/api1', {//遇见/api1前缀的请求，就会触发该代理配置
 6       //请求转发给谁
 7       target: 'http://localhost:5000',
 8       //控制服务器收到的请求头中Host的值
 9       changeOrigin: true,
10       //去除请求前缀，重写请求路径
11       parthRewrite:{'^/api1':''}
12     }),
13     proxy('/api2', {
14       target: 'http://localhost:5001',
15       changeOrigin: true,
16       parthRewrite:{'^/api2':''}
17     })
18   )
19 }


使用时在端口后面加上对应代理前缀设置：​​http://localhost:3000/api1/students​​

五、生成唯一id

uuid：库比较大



1 npm i uuid


nanoid：库比较小



1 npm i nanoid


使用



1 import { nanoid } from 'nanoid'
2 // nanoid是个函数
3 console.log(nanoid())


 六、打包运行

模拟服务器运行，安装serve



1 npm i serve -g


运行（以build文件为根路径）



1 serve build