React 基础小知识：脚手架

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。

create-react-app

npm i -g create-react-app
create-react-app hello-react
cd hello-react
npm start

脚手架目录结构

my-project-name/
|- node_modules     // 下载的依赖包
|- public           // 静态资源文件夹
     |- favicon.icon       // 网站页签图标
     |- index.html         // 主页面
     |- logo192.png        // logo图
     |- logo512.png        // logo图
     |- manifest.json      // 应用加壳的配置文件
     |- robots.txt         // 爬虫协议文件
|- src              // 源码文件夹
     |- components  // 组件目录
     |- App.css            // App组件的样式
     |- App.js             // App组件
     |- App.test.js        // 用于给App做测试
     |- index.cs           // 样式
     |- index.js           // 入口文件
     |- logo.svg           //' logo图
     |- reportWebVitals.js // 页面性能分析文件(需要web-vitals库的支持)
     |- setupProxy.js      // 代理配置文件
     |- setupTests.js      // 组件单元测试的文件(需要jest-dom库的支持)
|- .gitignore        // git 忽略规则
|- package.json      // 依赖配置
|- README.md         // README
|- yarn.lock         // 依赖配置

vscode 插件

ES7 React/Redux/GraphQL/React-Native snippets

• rcc 快捷键生成模板代码

组件化编码流程

1. 拆分组件：拆分界面，抽取组件
2. 实现静态组件：使用组件实现静态页面效果
3. 实现动态组件：

• 动态显示初始化数据
  • 数据类型
  • 数据名称
  • 保存在哪个组件
• 交互（从绑定事件监听开始）

脚手架配置相关

在 src 目录下创建配置文件：src/setupProxy.js

const proxy = require('http-proxy-middleware')
   
module.exports = function(app) {
  app.use(
    proxy('/api1', {  //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
      target: 'http://localhost:5000', //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      /*
        changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
        changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000
        changeOrigin默认值为false，但我们一般将changeOrigin值设为true
      */
      pathRewrite: {'^/api1': ''} //去除请求前缀，保证交给后台服务器的是正常请求地址(必须配置)
    }),
    proxy('/api2', { 
      target: 'http://localhost:5001',
      changeOrigin: true,
      pathRewrite: {'^/api2': ''}
    })
  )
}

1. 优点：可以配置多个代理，可以灵活的控制请求是否走代理。
2. 缺点：配置繁琐，前端请求资源时必须加前缀。