❤ React18+Next.js 项目搭建（地址已经放Gitee开源--Next体系）

林太白
751 阅读6分钟

❤ ❤ React18+Next.js 项目搭建（地址已经放Gitee开源--Next体系）

源码地址

记得给个star呀伙伴

Github（github.com/NexusLin/Ne…）

Gitee（gitee.com/NexusLinNoa…）

环境介绍

node v20.11.0
react 18.2
react-dom  18.2.0

一、React环境项目搭建

第1种React 16 官网nextjs一把撸

(1) 最新官网nextjs一把撸

官网 react.nodejs.cn/learn/start…

创建项目，按照提示自己选择即可
npx create-next-app@latest 普通版本
npx create-next-app@latest --typescript lintaibai（TS版本）
yarn 
yarn dev

项目运行

image.png

第2种利用官网脚手架搭建（庞大）

(1) 官网脚手架安装

npm i -g create-react-app
create-react-app -V // 注意：V 是大写的 （检测 create-react-app 是否安装成功）
create-react-app nexusreact

yarn create react-app nexusreact (使用)

项目的整体技术架构为:  react + webpack + es6 + eslint

官网的脚手架create-react-app 脚手架中将 webpack + babel 封装成了一个叫做 react-scripts 的库，用来隐藏配置，开发人员可以快速上手。

但是如果要自定义 webpack 的配置，就必须使用 eject 将配置弹出，会导致我们关注到一些无关的配置，体验并不好，同时无法跟随 react-scripts 的官方更新，所以我们通常会借助 craco 来优化这个问题。

(2)启动

yarn start

image.png

(3)配置 webpack

默认，create react app 创建的项目是看不到 webpack 相关的配置的，如果想要配置 webpack，只能先 eject 一下，执行命令来释放 webpack 的配置文件：

npm run eject

之后，你可能会遇到一个问题：Using babel-preset-react-app requires that you specify NODE_ENV or BABEL_ENV environment variables. Valid values are "development", "test", and "production".

解决方式： 在 package.json 文件中的 eslintConfig 对象里新增 parserOptions 选项（仅供参考）

image.png image.png

第3种普通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 插件名称

第4种利用vite搭建（2024-03-01采取的方式）

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 插件名称

(5) 利用webpack搭建（放入webpack系列）

三、项目信息配置（基于vite的方式）

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形式 xxx.com/some/path

（2）HashRouter创建的URL形式 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）】

avatar
文章
阅读
粉丝