04-React脚手架

news2024/11/28 15:56:31

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 -------- 爬虫协议文件
①.index.html-------- 主页面
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <!-- %PUBLIC_URL% 代表public文件夹的路径 -->
    <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 App</title>
  </head>
  <body>
    <!-- 若浏览器不支持js则展示标签中的内容 -->
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>
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库的支持)
①.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(
  // <React.StrictMode> 用于监测规范APP组件及其子组件的代码书写格式
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

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>
        )
    }
}

    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')
)

    新版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/>)

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

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

    Hello.jsx 组件文件

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

export default class Hello extends Component {
  render() {
    return (
      <div>
        <h2 className='title'>Hello React</h2>
      </div>
    )
  }
}

    Hello.css 样式文件

    .title{
    background-color: orange;
}

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

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

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

    import Hello from './components/Hello'

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. 优点：配置简单，前端请求资源时可以不加任何前缀。
  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': '',
      },
    })
  )
}

//旧版规则（自行选择版本）
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': ''}
       })
     )
   }

//组件文件
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 (
      <div>
        <button onClick={this.getStudentData}>点我获取学生数据</button>
        <button onClick={this.getCarData}>点我获取汽车数据</button>
      </div>
    )
  }
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1096424.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

R/d2及S/C4估计总体标准差，比较其CPK及规格限概率的差异

R/d2及S/C4估计总体标准差，比较其CPK及规格限概率的差异

R/d2 和 S/C4 是用于估计总体标准差的无偏估计方法&#xff0c;通常用于控制图中。这些估计方法的主要目的是通过样本数据来估计总体标准差&#xff0c;以便监测过程的稳定性和变异性&#xff0c;而不需要收集整个总体的数据。 具体来说&#xff1a; R图中的 R/d2 和 S图中的…
阅读更多...
【JAVA】有关包的概念

【JAVA】有关包的概念

个人主页&#xff1a;【&#x1f60a;个人主页】 系列专栏&#xff1a;【❤️初识JAVA】 前言 Java包是用于组织和管理Java类的方式。它们提供了一种命名空间&#xff0c;以避免名称冲突&#xff0c;并使程序的组织更加有效和可维护。今天我们接着来学习有关包的概念。 包 …
阅读更多...
faster lio 回环 加入GTSAM优化的记录

faster lio 回环 加入GTSAM优化的记录

首先感谢这位博主的文章&#xff1a;https://blog.csdn.net/weixin_41281151/article/details/125371285&#xff0c;其中部分代码参考于改博主中的github&#xff1a; https://github.com/kahowang/FAST_LIO_SAM 不同的是&#xff0c;我使用的是faster lio进行更改&#xff0c…
阅读更多...
vscode键盘输入不进去

vscode键盘输入不进去

二话不说&#xff0c;直接把输入切换到终端输出即可&#xff01; 打开设置&#xff0c;搜索terminal&#xff0c;切换到run in terminal 即可&#xff01;
阅读更多...
C语言-指针相关使用

C语言-指针相关使用

指针是 C语言的重要组成部分&#xff0c;是 C语言的核心、精髓。 在 C语言中&#xff0c;指针使用得当&#xff0c;能显著提高某些程序的效率&#xff0c;使用不当&#xff0c;则很容易造成系统错误、 一、指针使用 编译系统为每个变量都分配了一个能满足其类型大小的内存单…
阅读更多...
vqvae简单实战，利用vqvae来提升模型向量表达

vqvae简单实战，利用vqvae来提升模型向量表达

最近CV领域各种大模型在图像生成领域大发异彩&#xff0c;比如这两年大火的dalle系列模型。在这些模型中用到一个基础模型vqvae&#xff0c;今天我们写个简单实现来了解一下vqvae的工作原理。vqvae原始论文连接https://arxiv.org/pdf/1711.00937.pdf 1&#xff0c;代码 首先我们…
阅读更多...
机器学习——奇异值分解二（特征分解+SVD纯理解）

机器学习——奇异值分解二（特征分解+SVD纯理解）

矩阵的特征分解 特征值和特征向量的定义 抄来的&#xff1a;奇异值分解 困惑1&#xff1a;特征值和特征向量&#xff0c;和原矩阵是怎样的关系&#xff0c;需要一个栗子进行更具象的认识 困惑2&#xff1a;为什么多个特征向量组合成的矩阵&#xff0c;可以构成矩阵A的特征分解…
阅读更多...
项目管理之实施关键步骤

项目管理之实施关键步骤

项目管理已成为当代企业运营和发展过程中不可或缺的重要环节。如何实现高效、有序和可控的项目管理&#xff0c;一直是企业领导和项目团队追求的目标。本文将结合项目管理七招制胜内容&#xff0c;详细阐述项目管理实战中的具体做法。 如何分析项目 了解项目的背景和目的&…
阅读更多...
网工记背配置命令(3)----POE配置示例

网工记背配置命令(3)----POE配置示例

POE 供电就是通过以太网供电&#xff0c;这种方式仅凭借那根连接通信终端的网线就可完成为它们供电。POE提供的是-53V~0v 的直流电&#xff0c;供电距离最长可达 100m。PoE 款型的交换机的软件大包天然支持 POE&#xff0c;无需 license&#xff0c;通过执行 poe-enable 命令使…
阅读更多...
【力扣1844】将所有数字用字符替换

【力扣1844】将所有数字用字符替换

&#x1f451;专栏内容&#xff1a;力扣刷题⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、题目描述二、题目分析 一、题目描述 给你一个下标从 0 开始的字符串 s &#xff0c;它的偶数下标处为小写英文字母&am…
阅读更多...
系列七、Redis持久化

系列七、Redis持久化

一、是什么 将内存中的数据写入到硬盘的过程。 二、持久化方式 RDB、AOF 2.1、RDB&#xff08;Redis Database&#xff09; 2.1.1、概述 在指定的时间间隔&#xff0c;执行数据集的时间点快照。实现类似照片记录效果的方式&#xff0c;就是把某一时刻的数据和状态以文件的形…
阅读更多...
vue3后台管理框架之收获

vue3后台管理框架之收获

前端⼯程化概念 在学VUE和webpack打包的时候&#xff0c;了解到前端⼯程的基本概念&#xff0c;如下&#xff1a; 实际的前端开发&#xff0c;遵循四个现代化&#xff1a; 1.模块化&#xff08;js的模块化、css的模块化、其他资源的模块化&#xff09; 2.组件化&#xff08;复⽤…
阅读更多...
05-React组件的组合使用

05-React组件的组合使用

05-React组件的组合使用 1.TodoList案例 需求&#xff1a;TodoList组件化实现此功能 显示所有todo列表输入文本, 点击按钮显示到列表的首位, 并清除输入的文本 1).实现&#xff1a; 完成TodoList组件的静态页面以及拆解组件 动态初始化列表 //App.jsx export default class …
阅读更多...
[初始java]——java为什么这么火，java如何实现跨平台、什么是JDK/JRE/JVM

[初始java]——java为什么这么火，java如何实现跨平台、什么是JDK/JRE/JVM

java的名言&#xff1a; ”一次编译、到处运行“ 一、编译语言与解释语言 编译&#xff1a; 是将整份源代码转换成机器码再进行下面的操作&#xff0c;最终形成可执行文件 解释&#xff1a; 是将源代码逐行转换成机器码并直接执行的过程&#xff0c;不需要生成目标文件 jav…
阅读更多...
10.14~10.15verilog操作流程与Block Design

10.14~10.15verilog操作流程与Block Design

后面的那个是延时精度 verilog文件结构 文件名称与写的模板没有关系&#xff0c;这个文件名为P1,但模板名为andgate 但是如果是仿真文件&#xff0c;就需要开头的模板名和仿真文件名相同 .v是源文件&#xff0c;设计文件 .v在设计与sim里都有&#xff0c;静态共享&#xff0…
阅读更多...
卡顿分析与布局优化

卡顿分析与布局优化

卡顿分析与布局优化 大多数用户感知到的卡顿等性能问题的最主要根源都是因为渲染性能。Android系统每隔大概16.6ms发出VSYNC信 号&#xff0c;触发对UI进行渲染&#xff0c;如果每次渲染都成功&#xff0c;这样就能够达到流畅的画面所需要的60fps&#xff0c;为了能够实现60fp…
阅读更多...
CISA 彻底改变了恶意软件信息共享：网络安全的突破

CISA 彻底改变了恶意软件信息共享：网络安全的突破

在现代网络安全中&#xff0c;战术技术和程序&#xff08;TTP&#xff09;的共享对于防范网络事件至关重要。 因此&#xff0c;了解攻击向量和攻击类型之间的关联如今是让其他公司从其他公司遭受的 IT 事件中受益&#xff08;吸取经验教训&#xff09;的重要一步。 美国主要网…
阅读更多...
多模态大模型升级：LLaVA→LLaVA-1.5，MiniGPT4→MiniGPT5

多模态大模型升级：LLaVA→LLaVA-1.5，MiniGPT4→MiniGPT5

Overview LLaVA-1.5总览摘要1.引言2.背景3.LLaVA的改进4.讨论附录 LLaVA-1.5 总览 题目: Improved Baselines with Visual Instruction Tuning 机构&#xff1a;威斯康星大学麦迪逊分校&#xff0c;微软 论文: https://arxiv.org/pdf/2310.03744.pdf 代码: https://llava-vl.…
阅读更多...
无法解析符号 ‘SpringBootApplication’

无法解析符号 ‘SpringBootApplication’

刚打开一个项目出现"SpringBootApplication"无法解析&#xff1a; 通过以下步骤&#xff0c;修改maven路径即可&#xff1a; 文件---->设置&#xff08;File--->Settings&#xff09; 构建、执行、部署--->构建工具--->Maven--->Maven主路经&#xf…
阅读更多...
07-ConfigurationClassPostProces的解析

07-ConfigurationClassPostProces的解析

文章目录 如何解析Component,Service,Configurationd,Bean,Import等注解1. 源码描述2. 类继承结构图3. 解析流程4. 具体的注解解析 如何解析Component,Service,Configurationd,Bean,Import等注解 1. 源码描述 BeanFactoryPostProcessor used for bootstrapping processing of…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023