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 -------- 爬虫协议文件
①.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" /><!-- 描述网站信息 --><metaname="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:5000changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:3000changeOrigin默认值为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.mzph.cn/news/106846.shtml

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

相关文章

PAM从入门到精通（一）

PAM从入门到精通（一）

本文参考以下博文&#xff1a; PAM模块详解及sudo命令 PAM 的应用开发和内部实现源码分析 PAM详解&#xff08;一&#xff09;PAM介绍 百度百科 —— PAM Oracle Solaris 10 开发者安全性指南 —— PAM 框架介绍 特此致谢&#xff01; 零、引言 身份认证是操作系统安全的…
阅读更多...
gitee page中HTML显示乱码

gitee page中HTML显示乱码

参考的&#xff1a;静态HTML网页部署到gitee后中文乱码-CSDN博客 根据上述引用的博客做完后要记得在gitee page中更新(我就是没点更新以为用不了)
阅读更多...
Java GC 算法

Java GC 算法

一、概述 理解Java虚拟机垃圾回收机制的底层原理&#xff0c;是成为一个高级Java开发者的基本功。本文从底层的垃圾回收算法开始&#xff0c;着重去阐释不同垃圾回收器在算法设计和实现时的一些技术细节&#xff0c;去探索「why」这一部分&#xff0c;通过对比不同的垃圾回收算…
阅读更多...
LabVIEW在安装了其它的NI软件之后崩溃了

LabVIEW在安装了其它的NI软件之后崩溃了

LabVIEW在安装了其它的NI软件之后崩溃了 在安装了其它的NI软件之后&#xff0c;一些原本安装好的或者新安装的软件由于缺少必要的DLL而崩溃掉了。例如&#xff0c;在这种情况下&#xff0c;Teststand可能会报下面的错误&#xff1a; RetrievingCOM class factory for compone…
阅读更多...
1.1 Windows驱动开发：配置驱动开发环境

1.1 Windows驱动开发：配置驱动开发环境

在进行驱动开发之前&#xff0c;您需要先安装适当的开发环境和工具。首先&#xff0c;您需要安装Windows驱动开发工具包&#xff08;WDK&#xff09;&#xff0c;这是一组驱动开发所需的工具、库、示例和文档。然后&#xff0c;您需要安装Visual Studio开发环境&#xff0c;以便…
阅读更多...
实践笔记-docker安装及配置镜像源

实践笔记-docker安装及配置镜像源

docker安装及配置镜像源 1.卸载旧版本docker2. 安装yum工具3. 设置镜像仓库4.安装docker5. 启动docker服务6.docker镜像源配置 当前环境linux为centos7 1.卸载旧版本docker 如果以前安装过旧版本可以先执行卸载&#xff0c;下面的截图是没有安装过。 yum remove docker \ do…
阅读更多...
机器学习笔记 - 使用3D卷积神经网络进行视频分类

机器学习笔记 - 使用3D卷积神经网络进行视频分类

1、导入相应的库 3D CNN 使用三维滤波器来执行卷积。内核能够在三个方向上滑动，而在 2D CNN 中它可以在二维上滑动。 首先安装并导入必要的库，用于处理ZIP文件内容的Remotezip 、用于使用进度条的tqdm 、用于处理视频文件的OpenCV 、用于执行更复杂的张量操作的einop…
阅读更多...
Python批量测试IP端口GUI程序(Tkinter)

Python批量测试IP端口GUI程序(Tkinter)

一、实现样式 批量IP与端口中间用“,”分割&#xff0c;点击Telnet进行测试&#xff0c;前提是你电脑安装了telnet客户端&#xff0c;Clear按钮用来清空文本框。 二、核心点 1、使用Tkinter来制作桌面GUI页面 2、使用telnetlib模块测试telnet端口 三、困难点 1、测试结果…
阅读更多...
“氛围感 真环绕”可拆卸自由观影新物种 ——索尼发布“积木音响”HT-AX7

“氛围感 真环绕”可拆卸自由观影新物种 ——索尼发布“积木音响”HT-AX7

2023年10月16日&#xff0c;索尼(中国)有限公司发布新款蓝牙音响——“积木音响”HT-AX7。该音响采用索尼360SSM技术(360空间声场映射技术&#xff0c;简称360SSM)和独特的可拆卸结构设计&#xff0c;在实现传统音响的功能基础上&#xff0c;进一步为用户提供了创新式可移动多场…
阅读更多...
智慧饭堂报餐系统源码 智慧食堂源码

智慧饭堂报餐系统源码 智慧食堂源码

智慧饭堂报餐系统源码 智慧食堂源码 技术栈 1、前端技术栈&#xff1a;ES6、vue、vuex、vue-router、vue-cli、axios、element-ui 2、后端技术栈&#xff1a;SpringBoot、MyBatis、Spring Security、Jwt 介绍 一款java开发的智慧饭堂报餐系统&#xff0c;支持连接人脸识别…
阅读更多...
爬虫 | 正则、Xpath、BeautifulSoup示例学习

爬虫 | 正则、Xpath、BeautifulSoup示例学习

文章目录 &#x1f4da;import requests&#x1f4da;import re&#x1f4da;from lxml import etree&#x1f4da;from bs4 import BeautifulSoup&#x1f4da;小结 契机是课程项目需要爬取一份数据&#xff0c;于是在CSDN搜了搜相关的教程。在博主【朦胧的雨梦】主页学到很多…
阅读更多...
企业订货系统常见问题与解决方案|网站定制搭建|小程序APP开发

企业订货系统常见问题与解决方案|网站定制搭建|小程序APP开发

企业订货系统常见问题与解决方案|网站定制搭建|小程序APP开发 在企业经营中&#xff0c;订货系统是一个非常重要的工具&#xff0c;它可以帮助企业快速地获取客户需求&#xff0c;制定生产计划&#xff0c;提高供应链效率&#xff0c;帮助企业快速、准确地计算出所需物资的数量…
阅读更多...
基于R和gephi做宏基因组与代谢组等多组学联合network相关性网络图

基于R和gephi做宏基因组与代谢组等多组学联合network相关性网络图

写在前面 拿到多组学的数据后一直在找合适的方法将二者进行关联&#xff0c;比如我这里是三种体液的代谢组与一种体液的宏基因组。需求是对多组学进行关联分析&#xff0c;直到最近看到不少文章里利用Gephi将相关性表格进行可视化的图&#xff0c;效果还不错&#xff0c;于是写…
阅读更多...
Vue3集成高德地图：快速上手，实现你的业务需求

Vue3集成高德地图：快速上手，实现你的业务需求

Vue3集成高德地图 前言一、准备工作1.开发文档2.添加应用 二、使用步骤命令安装2.地图容器创建3.组件引入4.js api 安全密钥5.初始化地图6. 图层6.1 添加 / 设置 / 获取 / 移除图层6.1.1 添加图层6.1.2 设置图层6.1.3 获取图层6.1.4 移除图层 7. 点标记8. 信息窗体8.1 默认信息…
阅读更多...
【微服务】微服务初步认识 - 微服务技术如何学习 · 认识微服务架构

【微服务】微服务初步认识 - 微服务技术如何学习 · 认识微服务架构

微服务&#xff08;1&#xff09; 文章目录 【微服务】&#xff08;1&#xff09;1. 微服务相关技术栈2. 微服务学习路线3. 认识微服务架构3.1 单体架构3.2 分布式架构3.3 微服务(架构)3.4 微服务(架构)治理落实相关的SpringCloud、SpringCloudAlibaba和阿里巴巴的Dubbo提供的服…
阅读更多...
226、翻转二叉树

226、翻转二叉树

题目链接&#xff1a; \sf 题目链接&#xff1a; 题目链接&#xff1a; 图解&#xff1a; 方法一、 D F S \sf 方法一、DFS 方法一、DFS 递归&#xff1a; 让左子树是翻转后的右子树&#xff0c; 右子树是翻转后的左子树。 ∴从叶结点开始&#xff0c;自底向上逐步翻转。递归出…
阅读更多...
Elucidating the Design Space of Diffusion-Based Generative Models 阅读笔记

Elucidating the Design Space of Diffusion-Based Generative Models 阅读笔记

文章使用模块化&#xff08;modular&#xff09;的思想&#xff0c;分别从采样、训练、score network设计三个方面分析和改进diffusion-based models。 之前的工作1已经把diffusion-based models统一到SDE或者ODE框架下了&#xff0c;这篇文章的作者同样也从SDE和ODE的角度出发…
阅读更多...
文件路径操作

文件路径操作

避开-转义字符 python文件路径导致的错误常常与“\”有关&#xff0c;因为在路径中的“\”常会被误认为转义字符。 所以在上述路径中&#xff0c;\table\name\rain中的\t,\n,\r都易被识别为转义字符。 解决的办法主要由以下三种&#xff1a; #1 前面加r表示不转义 pathr&quo…
阅读更多...
html资源提示符

html资源提示符

前言&#xff1a;正常dom解析 中遇到script标签 &#xff0c;会暂停主线程 去下载js&#xff0c;拿到资源后&#xff0c;主线程再执行js。 那么主线程在等待网络线程下载这个空闲很浪费 解决方案&#xff1a; script标签增加属性 async defer 1.async <script src"./i…
阅读更多...
[C++]:1.初识C++和C语言缺陷补充。

[C++]:1.初识C++和C语言缺陷补充。

初识C和C语言缺陷补充 一.主要内容&#xff1a;二.具体内容&#xff1a;一&#xff1a; 作用域1.命名空间&#xff1a;2.函数声明和定义&#xff1a;3.不存在命名冲突的情况&#xff1a; 二.输入输出&#xff1a;1.基本输入输出&#xff1a;2.关于std的展开&#xff1a; 三.函数…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023