• 04-React脚手架

    04-React脚手架

    1. react脚手架入门

    1).脚手架的介绍

    1. xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目
      1. 包含了所有需要的配置（语法检查、jsx编译、devServer…）
      2. 下载好了所有相关的依赖
      3. 可以直接运行一个简单效果
    2. react提供了一个用于创建react项目的脚手架库:create-react-app
    3. 项目的整体技术架构为: react + webpack + es6 + eslint
    4. 使用脚手架开发的项目的特点: 模块化, 组件化, 工程化

    2).创建项目并启动

    第一步，全局安装：npm i -g create-react-app

    第二步，切换到想创项目的目录，使用命令：create-react-app hello-react

    第三步，进入项目文件夹：cd hello-react

    第四步，启动项目：npm start

    3).react脚手架项目结构

    a.public静态资源文件夹
    public ---- 静态资源文件夹
	favicon.icon ------ 网站页签图标
	index.html -------- 主页面
	logo192.png ------- logo图
	logo512.png ------- logo图
	manifest.json ----- 应用加壳的配置文件
	robots.txt -------- 爬虫协议文件

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    ①.index.html-------- 主页面
    <html lang="en">
  <head>
    <meta charset="utf-8" />
    
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    
    <meta name="theme-color" content="#000000" />
    
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>React Apptitle>
  head>
  <body>
    
    <noscript>You need to enable JavaScript to run this app.noscript>
    <div id="root">div>
  body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    b.src源码文件夹
    src ---- 源码文件夹
		App.css -------- App组件的样式
		App.js --------- App组件
		App.test.js ---- 用于给App做测试
		index.css ------ 样式
		index.js ------- 入口文件
		logo.svg ------- logo图
		reportWebVitals.js --- 页面性能分析文件(需要web-vitals库的支持)
		setupTests.js ---- 组件单元测试的文件(需要jest-dom库的支持)

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    ①.index.js ------- 入口文件
    import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  //  用于监测规范APP组件及其子组件的代码书写格式
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    3). 功能界面的组件化编码流程

    1. 拆分组件: 拆分界面,抽取组件
    2. 实现静态组件: 使用组件实现静态页面效果
    3. 实现动态组件
      1. 动态显示初始化数据
        1. 数据类型
        2. 数据名称
        3. 保存在哪个组件
      2. 交互(从绑定事件监听开始)

    2.脚手架基础使用

    1).实现简单脚手架效果

    1. 编写App.js父组件文件和index.js入口文件

      App.js

      // 创建“外壳”组件App
// {Component}不是解构赋值，是一个分别暴露的方法
import React, { Component } from 'react'
// 创建并暴露App组件
export default class App extends Component {
    render() {
        return (
            <div></div>
        )
    }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11

      index.js

      // 引入React核心库
import React from "react";
/* 创建虚拟DOM节点 */
// 引入ReactDOM
import ReactDOM from 'react-dom'
// 引入APP组件
import App from './App'

// 渲染App到页面
ReactDOM.render(
    <App/>,
    document.getElementsByName('root')
)

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

      新版React18的写法：

      // 引入React核心库
import React from "react";
/* 创建虚拟DOM节点 */
import { createRoot } from 'react-dom/client'; //React 18
// 引入APP组件
import App from './App'

// 渲染App到页面
createRoot(document.getElementById('root')).render(<App/>)

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9

    2. 创建一个components文件，并在此文件中创建一个子组件的文件夹，然后在子组件的文件夹里编写js或者jsx组件文件和css样式文件

    3. 编写子组件的组件文件和样式文件

      Hello.jsx 组件文件

      import React, { Component } from 'react'
// 引入样式文件
import './Hello.css'

export default class Hello extends Component {
  render() {
    return (
      
      
        
      Hello React
      
      
      
    )
  }
}

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13

      Hello.css 样式文件

      .title{
    background-color: orange;
}

      • 1
      • 2
      • 3

    4. 将子组件引入到父组件App中

      // 引入Hello组件
import Hello from './components/Hello/Hello'
export default class App extends Component {
  render() {
    return (
      
      
        
      
      
    )
  }

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10

      可以将Hello.jsx和Hello.css文件重命名为index.jsx和index.css，这样引入组件文件或者时，就可以省略路径

      import Hello from './components/Hello'

      • 1

    3.脚手架配置代理——React ajax

    1).前置说明

    1. React本身只关注于界面, 并不包含发送ajax请求的代码
    2. 前端应用需要通过ajax请求与后台进行交互(json数据)
    3. react应用中需要集成第三方ajax库(或自己封装)

    2).跨域问题

    当运行React脚手架时，webpack打包管理工具会创建一个本地的虚拟服务器来运行项目以此来模拟现实的开发环境。当在React应用中向某个服务器接口发送请求后，服务器接口返回的数据会被浏览器会抵挡，使我们不能读取到服务器接口返回的数据，具体原因是跨域原则。为了避免跨域问题，需要在React脚手架应用中配置一个代理服务器来解决网络请求跨域的问题

    a.方式一：（简单版本）

    在package.json中追加如下配置

    "proxy":"http://localhost:5000"

    • 1

    说明：

    1. 优点：配置简单，前端请求资源时可以不加任何前缀。
    2. 缺点：不能配置多个代理。
    3. 工作方式：上述方式配置代理，当请求了3000不存在的资源时，那么该请求会转发给5000 （优先匹配前端资源）
    b.方式二：（配置文件）

    在src文件夹中创建一个setupProxy.js文件（文件名不可自定义）

    //新版规则
const { createProxyMiddleware } = require('http-proxy-middleware')
 
module.exports = function (app) {
  app.use(
    createProxyMiddleware('/api1', {
      target: 'http://localhost:5000',
      secure: false,
      changeOrigin: true,
      pathRewrite: {
        '^/api1': '',
      },
    }),
    createProxyMiddleware('/api2', {
      target: 'http://localhost:5001',
      secure: false,
      changeOrigin: true,
      pathRewrite: {
        '^/api2': '',
      },
    })
  )
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    //旧版规则（自行选择版本）
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
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    //组件文件
import React, { Component } from 'react'
import axios from 'axios'

export default class App extends Component {
  getStudentData = () => {
    axios.get('http://localhost:3000/api1/students').then(
      response => { console.log('成功了', response.data); },
      error => { console.log('失败了', error); }
    )
  }
  getCarData = () => {
    axios.get('http://localhost:3000/api2/cars').then(
      response => { console.log('成功了', response.data); },
      error => { console.log('失败了', error); }
    )
  }
  render() {
    return (
      
    
        
        
      
    
    )
  }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
  • 相关阅读:
    关于效能分析的pwr 方差分析
    代码随想录算法训练营Day49|贪心算法8
    《LC刷题总结》—— 二叉树
    golang 的 net/http 和 net/rpc 的区别, rpc 效率比 http 高?
    K8S集群中Pod资源处于Error状态排查思路
    单目结构光三维重建平面不平整
    sqlserver无法根据中文条件查询
    操作系统知识点
    使用VSCODE 调试ros2具体设置
    R语言详解二
  • 原文地址：https://blog.csdn.net/m0_57262196/article/details/133843715