❤ React18 环境搭建项目与运行（地址已经放Gitee开源）

❤ React项目搭建与运行

环境介绍

node v20.11.0
react 18.2
react-dom  18.2.0

一、React环境搭建

第一种普通cra搭建

1、检查本地环境

node版本 18.17.0
在这里插入图片描述

检查node和npm环境
node -v
npm -v

2、安装yarn

npm install -g yarn
yarn --version

在这里插入图片描述

3、创建一个新的React项目

npx create-react-app ltbreact

4、进入并运行项目

// 进入项目
cd my_react
// 启动项目
yarn start项目启动成功，在浏览器 输入 http://localhost:3000/ 即可访问react

5、尝试打包

yarn build打包完成以后能在我们项目里面看到一个包

6、下载插件(安装xxx 插件 )

yarn add 插件名称

二、第二种方式vite搭建

1、检查本地环境

node版本 18.17.0
检查node和npm环境
node -v
npm -v

2、安装yarn

npm install -g yarn
yarn --version

3、使用vite创建一个新的React项目

npm create vite@latest 第一种版本

yarn create vite ltbreact --template react-ts  //node大于20.0.0 才可以使用

yarn create vite ltbreact --template react-js

4、进入并运行项目

// 进入项目
cd my_react

//安装依赖
yarn

// 启动项目
yarn start (之前的)
yarn dev项目启动成功，在浏览器 输入 ​​ http://localhost:​​5173/​ 即可访问react
在这里插入图片描述

5、尝试打包

yarn build打包完成以后能在我们项目里面看到一个包
在这里插入图片描述

6、下载插件(安装xxx 插件 )

yarn add 插件名称

三、项目信息配置

1、项目目录

打开Vite构建的项目，项目的目录结构如下：

.
├── index.html
├── package.json
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── favicon.svg
│   ├── index.css
│   ├── logo.svg
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.json
└── vite.config.js

2、配置resolve.alias 文件导入路径别名

简单介绍一下：
resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：

在项目的 vite.config.ts 之中配置：

默认跟文件为显示src的目录
默认跟组件目录为

// vite.config.ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

虽然配置好了@但是输入@没有提示，找到tsconfig.json

配置 tsconfig.json
// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "@/*": ["./src/*"],
    }
  }
}

在这里插入图片描述
配置 extensions ，省略文件路径的后缀名

3、添加请求方式axios

（1）安装axios并封装请求
安装axios并封装请求
yarn add axios


在src下的utils工具类里面新建request.js文件封装axios请求

```bash
import axios from 'axios'
const service = axios.create({
    baseURL: '/接口前缀', //import.meta.env.VITE_BASE_URL
    headers: { 'Content-Type': 'application/json;charset=utf-8', },
    timeout: 5000,
})
export default service;
（2）写接口文件

在src下的api接口类里面新建common.js文件放接口请求
common.js 里面

import request from '@/utils/request.js'

// 获取网站信息
export function getqueryWebInfo(params) {
    return request({
        url: '/你的接口地址',
        method: 'get',
        params
    })
}
（3）配置接口统一代理地址和相关信息

在vite.config.ts 里面封装接口同意请求的前缀并且配置接口代理

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import path from 'path';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
        host: true, //host设置为true才可以使用network的形式，以ip访问项目
        port: 8808, // 端口号
        https: false,
        open: false, //  true 自动打开浏览器自动打开浏览器
        cors: true, // 跨域设置允许
        // strictPort: true,  // 如果端口已占用直接退出
        proxy: {
            '/你的接口前缀': {
                target: '你的接口地址/', //线上版本
                changeOrigin: true,
                rewrite: (path) => path.replace(/^\/edu-admin/, '/edu-admin')
            },
        },
    }, 
  resolve: {
    alias: {
      '@components': '/src/components',
      '@': path.resolve(__dirname, './src')
    }
  }
})

请求接口成功
在这里插入图片描述

4、集成 react-router 路由

安装

yarn add react-router-dom

这里使用的版本是 "react-router-dom": "^6.21.2"

react router dom v6 支持配置路由 useRoutes（hook）实现

main.ts

在这里插入图片描述
在这里插入图片描述

使用React Router

需要注意的

react-router-dom从V5升级到V6后，有些使用做了一些改变；
(1) Switch 重命名为 Routes

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

(2) Route 的新特性变更 ,component/render被element替代

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

(3) 嵌套路由变得更简单

Route children 已更改为接受子路由。
比Route exact 和 Route strict更简单的匹配规则。
Route path 路径层次更清晰。

更多在后续文章React Router v5和React Router v6文章中

Router可以理解为路由器，分为BrowserRouter或HashRouter两个组件

（1）BrowserRouter创建的URL形式
http://xxx.com/some/path

（2）HashRouter创建的URL形式
http://xxx.com/#/some/path

React Router路由配置

配置App.js

（1）导入路由
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

(2) 导入登录组件和主页组件
import Login from './Login'; // 导入登录组件
import Home from './Home'; // 导入主页组件

（3）借助Routes 配置路由 (已更改为Routes ：具体原因可以看主页react错误分析篇章)
 <Router>
      <Switch>
        <Route exact path="/" component={Home} /> {/* 主页路径 */}
        <Route path="/login" component={Login} /> {/* 登录页路径 */}
    </Switch>
</Router>


//更改后
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Login from '@/views/main/Login'; // 导入登录组件
import Home from '@/views/main/Home'; // 导入主页组件
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} /> {/* 主页路径 */}
        <Route path="/login" element={<Login />} /> {/* 登录页路径 */}
      </Routes>
    </Router>
  );
}

export default App;

5、搭建主页面home

Home.jsx里面

import React from 'react';
import { Link } from 'react-router-dom';
const Home = () => {
  return (
    <div>
      <h1>主页</h1>
      <Link to="/login">
      <button>点击登录</button>
    </Link>
    </div>
  );
};

export default Home;

搭建效果
在这里插入图片描述

6、搭建登录页面Login

Login.jsx里面

console.log('我是登录界面');
import React from 'react';
const Login = () => {
  return <h2>登录页面</h2>;
};

export default Login;

搭建效果
在这里插入图片描述
到此，我们第一阶段项目的运行和基础搭建完成，路由也能正常访问和请求接口了

第二篇章【❤ React18 环境搭建项目与运行 （2）】

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

OpenCV 图像处理六（傅里叶变换、模板匹配与霍夫变换）

OpenCV 图像处理六（傅里叶变换、模板匹配与霍夫变换）

文章目录 一、傅里叶变换1.1 NumPy实现和逆实现1.1.1 NumPy实现傅里叶变换Demo 1.1.2 NumPy实现逆傅里叶变换Demo 1.2 OpenCV实现和逆实现1.2.1 OpenCV实现傅里叶变换Demo 1.2.2 OpenCV实现逆傅里叶变换Demo 1.3 频域滤波1.3.1低频、高频1.3.2 高通滤波器构造高通滤波器Demo 1.…
阅读更多...
jquery写表格，通过后端传值，并合并单元格

jquery写表格，通过后端传值，并合并单元格

<!DOCTYPE html> <html> <head><title>Table Using jQuery</title><style>#tableWrapper {width: 100%;height: 200px; /* 设置表格容器的高度 */overflow: auto; /* 添加滚动条 */margin-top: -10px; /* 负的外边距值&#xff0c;根据实际…
阅读更多...
Mac OS中创建适合网络备份的加密镜像文件：详细步骤与参数选择

Mac OS中创建适合网络备份的加密镜像文件：详细步骤与参数选择

这篇文章提供了在Mac OS中创建适合网络备份的加密镜像文件的详细步骤&#xff0c;同时探讨了在选择相关参数时的关键考虑因素&#xff0c;以确保用户能够安全、高效地存储和保护重要数据。 创建步骤 在Mac OS Monterey中&#xff0c;你可以使用“磁盘工具”&#xff08;Disk …
阅读更多...
【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏12（附项目源码）

【制作100个unity游戏之23】实现类似七日杀、森林一样的生存游戏12（附项目源码）

本节最终效果演示 文章目录 本节最终效果演示系列目录前言斧头动画控制配置拿出 待机和攻击动画代码控制攻击动画 源码完结 系列目录 前言 欢迎来到【制作100个Unity游戏】系列&#xff01;本系列将引导您一步步学习如何使用Unity开发各种类型的游戏。在这第23篇中&#xff0…
阅读更多...
LRU缓存

LRU缓存

有人从网络读数据&#xff0c;有人从磁盘读数据&#xff0c;机智的人懂得合理利用缓存加速数据的读取效率&#xff0c;提升程序的性能&#xff0c;搏得上司的赏识&#xff0c;赢得白富美的青睐&#xff0c;进一步走向人生巅峰~ LRU假说 LRU缓存&#xff08;Least Recently Used…
阅读更多...
SQL--函数

SQL--函数

概念 函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着&#xff0c;这一段程序或代码在MySQL中 已经给我们提供了&#xff0c;我们要做的就是在合适的业务场景调用对应的函数完成对应的业务需求即可。 那 么&#xff0c;函数到底在哪儿使用呢&#xff1f; 我…
阅读更多...
【Python 实战】---- 实现向指定PDF指定页面指定位置插入图片

【Python 实战】---- 实现向指定PDF指定页面指定位置插入图片

1. 需求 想要能否实现批量自动为多个pdf加盖不同六格虚拟章（不改变pdf原有分辨率和文字可识别性）；改在pdf首页上方空白位置，一般居中即可；如可由使用者自主选择靠页边距更好，以便部分首页上方有字的文件时人工可微调位置。2. 需求分析 直接将 pdf 文件转换为图片，在将图…
阅读更多...
飞天使-k8s知识点12-kubernetes散装知识点1-架构有状态资源对象分类

飞天使-k8s知识点12-kubernetes散装知识点1-架构有状态资源对象分类

文章目录 k8s架构图有状态和无状态服务 资源和对象对象规约和状态 资源的对象-资源的分类元数据型与集群型资源命名空间 k8s架构图 有状态和无状态服务 区分有状态和无状态服务有利于维护yaml文件 因为配置不同资源和对象 命令行yaml来定义对象对象规约和状态 规约 spec 描述…
阅读更多...
Unity_修改天空球

Unity_修改天空球

Unity_修改天空球 Unity循序渐进的深入会发现可以改变的其实很多&#xff0c;剖开代码逻辑&#xff0c;可视化的表现对于吸引客户的眼球是很重要的。尤其对于知之甚少的客户&#xff0c;代码一般很难说服客户&#xff0c;然表现确很容易。 非代码色彩通才&#xff0c;持续学习…
阅读更多...
洞悉未来，解锁因果：2023年DataFunSummit因果推断在线峰会全景解读

洞悉未来，解锁因果：2023年DataFunSummit因果推断在线峰会全景解读

随着大数据和人工智能的飞速发展&#xff0c;因果推断作为连接数据与决策的桥梁&#xff0c;正日益受到各行业的广泛关注。 在这样的背景下&#xff0c;2023年DataFunSummit因果推断在线峰会如期而至&#xff0c;汇聚了众多业界领袖和专家学者&#xff0c;共同探讨因果推断的最…
阅读更多...
【Java从入门到精通】Java注释

【Java从入门到精通】Java注释

Java 注释 在计算机语言中&#xff0c;注释是计算机语言的一个重要组成部分&#xff0c;用于在源代码中解释代码的作用&#xff0c;可以增强程序的可读性&#xff0c;可维护性。 Java 注释是一种在 Java 程序中用于提供代码功能说明的文本。 注释不会被编译器包含在最终的可…
阅读更多...
FANUC机器人如何清除示教器右上角的白色感叹号？

FANUC机器人如何清除示教器右上角的白色感叹号？

FANUC机器人如何清除示教器右上角的白色感叹号&#xff1f; 如下图所示&#xff0c;示教器上显示白色的感叹号&#xff0c;如何清除呢&#xff1f; 具体可参考以下步骤&#xff1a; 按下示教器上白色的“i”键&#xff0c;如下图所示&#xff0c; 如下图所示&#xff0c;按…
阅读更多...
Linux截图快捷键以及修改快捷键方式

Linux截图快捷键以及修改快捷键方式

1. 截图快捷键 初始快捷键如下 全屏截图并保存&#xff1a;AltPrint 选区截图并保存&#xff1a;ShiftPrint 全屏截图并复制到剪贴板&#xff1a;AltCtrlPrint 选区截图并复制到剪贴板&#xff1a;ShiftCtrlPrint 会保存到Pictures文件夹下面 2. 修改快捷键 打开Settings界面…
阅读更多...
一文了解 ArrayList 的扩容机制

一文了解 ArrayList 的扩容机制

了解 ArrayList 在 Java 中常用集合类之间的关系如下图所示&#xff1a; 从图中可以看出 ArrayList 是实现了 List 接口&#xff0c;并是一个可扩容数组&#xff08;动态数组&#xff09;&#xff0c;它的内部是基于数组实现的。它的源码定义如下&#xff1a; public class A…
阅读更多...
BEV感知算法学习

BEV感知算法学习

BEV感知算法学习 3D目标检测系列 Mono3D(Monocular 3D Object Detection for Autonomous Driving) 流程&#xff1a; 通过在地平面上假设先验&#xff0c;在3D空间中对具有典型物理尺寸的候选边界框进行采样&#xff1b;然后我们将这些方框投影到图像平面上&#xff0c;从而避…
阅读更多...
Android平台GB28181设备接入模块实现后台service按需回传摄像头数据到国标平台侧

Android平台GB28181设备接入模块实现后台service按需回传摄像头数据到国标平台侧

技术背景 我们在做Android平台GB28181设备对接模块的时候&#xff0c;遇到这样的技术需求&#xff0c;开发者希望能以后台服务的形式运行程序&#xff0c;国标平台侧没有视频回传请求的时候&#xff0c;仅保持信令链接&#xff0c;有发起视频回传请求或语音广播时&#xff0c;…
阅读更多...
安卓动态链接库文件体积优化探索实践

安卓动态链接库文件体积优化探索实践

背景介绍 应用安装包的体积影响着用户下载量、安装时长、用户磁盘占用量等多个方面&#xff0c;据Google Play统计&#xff0c;应用体积每增加6MB&#xff0c;安装的转化率将下降1%。 安装包的体积受诸多方面影响&#xff0c;针对dex、资源文件、so文件都有不同的优化策略&…
阅读更多...
TOP100-二叉数

TOP100-二叉数

1.94. 二叉树的中序遍历 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 。 示例 1&#xff1a; 输入&#xff1a;root [1,null,2,3] 输出&#xff1a;[1,3,2]示例 2&#xff1a; 输入&#xff1a;root [] 输出&#xff1a;[]示例 3&#xff1a; 输入&#xf…
阅读更多...
计算机网络_1.5 计算机网络的性能指标

计算机网络_1.5 计算机网络的性能指标

1.5 计算机网络的性能指标 一、总览二、常用的八个计算机网络性能指标1、速率&#xff08;1&#xff09;数据量&#xff08;2&#xff09;速率&#xff08;3&#xff09;数据量与速率中K、M、G、T的数值辨析&#xff08;4&#xff09;【练习1】计算发送数据块的所需时间 2、带宽…
阅读更多...
活锁方案与自旋锁

活锁方案与自旋锁

问题 如何设置获取互斥量时的等待时间&#xff1f; 如果等待超时&#xff0c;如何避免死锁&#xff1f; 避免死锁 -- 设置等待超时 解决方案&#xff1a; 1、尝试获取第 1 个互斥量&#xff1a; 若成功&#xff0c;则转 2 执行&#xff1b;若失败&#xff0c;则等待&#x…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站