• 创建react脚手架项目——demo（react18 + react-router 6）

    创建react脚手架项目——demo（react18 + react-router 6 + react项目打包部署）

    1. 安装 create-react-app

    1.1 执行安装命令

    1.2 安装遇到的问题

    1.2.1 问题1——npm ERR! code ENOTFOUND（网络问题clashx）

    • 问题描述，如下：
      npm ERR! code ENOTFOUND
npm ERR! syscall getaddrinfo
npm ERR! errno ENOTFOUND
npm ERR! network request to https://registry.npmmirror.com/create-react-app failed, reason: getaddrinfo ENOTFOUND registry.npmmirror.com
npm ERR! network This is a problem related to network connectivity.
npm ERR! network In most cases you are behind a proxy or have bad network settings.
npm ERR! network 
npm ERR! network If you are behind a proxy, please make sure that the
npm ERR! network 'proxy' config is set properly.  See: 'npm help config'

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      在这里插入图片描述
    • 解决问题——方式1
      • 如果使用了clashx，可能是它问题，解决如下：
        • 取消代理即可
        • 如果取消代理、退出clashx之后，电脑死活还是不能上网，解决方式如下：
          • 1⃣️：更新clashx；
          • 2⃣️：如果已经是最新版本了，那就处理一下dns，处理方式如下（Mac）：
            mac电脑点wifi图标–点网络偏好设置–高级–dns，点加号，新增114.114.114.114保存后就可以上网了。
            在这里插入图片描述
    • 解决问题——方式2
      • 首先，还是clash X的问题，这里还有个前提，其他应用都能上网，只有浏览器不能上网的问题！
      • 解决问题如下：
        • 页面上清理浏览器历史记录；
        • 如果还不可以：去下面目录下进行清理：
          /Users/xxx/Library/Application Support/Google/Chrome

          • 1
          我就随便清理了几个，然后可行了
          rm -rf component_crx_cache
rm -rf extensions_crx_cache
rm -rf first_party_sets.db
rm -rf first_party_sets.db-journal
rm -rf SingletonCookie -> 6759188605641184688
rm -rf SingletonLock -> MacBook-Pro.local-1291
rm -rf ShaderCache
rm -rf GrShaderCache

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

    1.2.2 问题2——其他问题

    2. 创建项目

    2.1 创建项目命令

    • 命令如下：
      create-react-app react-demo1

      • 1
      在这里插入图片描述

    2.2 查看项目结构

    • 如下：
      在这里插入图片描述

    2.2.1 目录结构

    2.2.2 注意点

    • 注意新版和老板的不一样，这里自动生成的是react18，需要注意的点是，如下：
      在这里插入图片描述
    • 详细可参考官网
      如何升级到 React 18.
      在这里插入图片描述

    3. 启动项目

    • 启动命令：
      npm start

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

    4. react-demo

    • 创建一个reacr-demo2写自己的小demo，主要是3个文件，如下：
      在这里插入图片描述
      在这里插入图片描述

    • 启动看效果：
      在这里插入图片描述

    • 是能启动，但是好无聊，所以还是简单写点东西吧，继续……

    5. react-demo优化

    5.1 安装路由

    • 项目中会用到，所以先安装了
      npm i react-router-dom

      • 1
    • 引入：
      import {
    BrowserRouter as Router,
    Route,
    Link
  } from 'react-router-dom'

      • 1
      • 2
      • 3
      • 4
      • 5
    • 需要注意的问题是，版本不同可能语法不同，我这里安装的是最新版本6，5的话可能语法不同，需要注意：
      在这里插入图片描述
    • 更多详细介绍，可参考官网：

    5.2 遇到的问题

    5.2.1 No routes matched location “/dog”

    5.2.2

    5.3 项目简单设计

    5.3.1 项目效果

    • 如下：
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述
      在这里插入图片描述

    5.3.2 项目目录结构

    • 如下：
      在这里插入图片描述

    5.3.3 核心代码

    • App.js 如下：

      import PetHeader from './PetHeader/index'
import PetBottom from './PetBottom/index'
import PetLeft from './PetLeft';

function App() {
  return (
    <div>
      <PetHeader></PetHeader>
      <PetLeft></PetLeft>
      <PetBottom/>
    </div>
  );
}

export default App;

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

    • PetLef 组件
      在这里插入图片描述

      import React from "react"
import {BrowserRouter,Route,Routes,Link} from 'react-router-dom'
import Home from "../Home"
import Dog from "../Dog"
import Cats from "../Cat/Cats"
import './index.css'

class PetLef extends React.Component{
    render(){
        return(
            <BrowserRouter>
                <div className="myMainData left" >
                    {/* 编写路由链接  靠路由链接实现切换组件 */}
                    <ul>
                        <li><Link to="/">Home</Link></li>
                        <li><Link to="/dog">狗狗信息</Link></li>
                        <li><Link to="/cats">猫咪信息</Link></li>
                    </ul>
                </div>

                <div className="myMainData right" >
                        {/* 注册路由 */}
                    <Routes>
                        <Route exact path="/" element={<Home/>} />
                        <Route path="/dog" element={<Dog/>} />
                        <Route path="/cats/*" element={<Cats/>} />
                    </Routes>                       
                </div>
            </BrowserRouter>
        )
    }
}

export default PetLef;


      • 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
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35

    • Cats 和 Cat组件
      在这里插入图片描述

      import React from "react";
import CatInfo from "./Info/CatInfo";
import {Route,Routes,Link} from 'react-router-dom'

class Cats extends React.Component{
    state = {
        cats:[
            {catId:'A1001',catName:'点点',catAge:5,catKind:'德文'},
            {catId:'A1002',catName:'阿苔',catAge:6,catKind:'德文'},
            {catId:'A1003',catName:'花花',catAge:2,catKind:'布偶'}
        ]
    };
    render(){
        const {cats} = this.state;
        return(
            <div>
                <h2>猫咪信息</h2>
                <ul>
                    {
                        cats.map((cat)=>{
                            return(
                                <li key={cat.catId}>
                                    {/*  */}
                                    <Link to={`/cats/info/${cat.catId}/${cat.catName}`}>
                                        {cat.catId}--{cat.catName}--{cat.catAge}--{cat.catKind}
                                    </Link>
                                </li>
                            )
                        })
                    }
                </ul>
                <br /><br />
                <Routes>
                     {/* } /> */}
                     <Route path='info/:catId/:catName' element={<CatInfo/>} />
                </Routes>
            </div>
        )
    }
}
export default Cats;

      • 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
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      import React from "react";

//这个注意：router6新特性，新增的hooks  必须函数式组件
import { useParams } from "react-router-dom";

function Cat(){
    // console.log(useParams());
    let {catId,catName} = useParams();
    return(
        <div>
            <h3>
                {catId}--{catName}
            </h3>
        </div>
    )
}

export default Cat;

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18

    5.4 项目下载

    6. 项目打包

    6.1 打包

    • 命令：
      npm run build

      • 1
      在这里插入图片描述

    6.2 提供服务器的方式

    6.2.1 部署到tomcat或nginx服务器上

    6.2.2 使用serve库开启服务器

    • 全局安装 serve 库
      npm i serve -g

      • 1
    • 开启一台服务
      serve build

cd build
serve

      • 1
      • 2
      • 3
      • 4
      在这里插入图片描述
    • 查看效果
      在这里插入图片描述
  • 相关阅读:
    人工智能必考简答题
    【云原生】这么火，你不来了解下？
    【LeetCode】zj面试-把字符串转换成整数
    前端性能优化指标
    【2023秋招】乐狗开发岗笔试AK代码分享
    mvvm讲解
    Nginx 面试 40 问
    【elementui】处理多个按钮的 loading 状态
    SOCKS5代理与网络安全：如何安全地进行爬虫操作
    深入剖析Spring框架：循环依赖的解决机制
  • 原文地址：https://blog.csdn.net/suixinfeixiangfei/article/details/132851563