❤ ❤ React18+Next.js 项目搭建（地址已经放Gitee开源--Next体系）
源码地址
记得给个star呀伙伴
Github（github.com/NexusLin/Ne...）
Gitee（gitee.com/NexusLinNoa...）
环境介绍
bash
node v20.11.0
react 18.2
react-dom 18.2.0一、React环境项目搭建
第1种React 16 官网nextjs一把撸
(1) 最新官网nextjs一把撸
官网 react.nodejs.cn/learn/start...
js
创建项目，按照提示自己选择即可
npx create-next-app@latest 普通版本
npx create-next-app@latest --typescript lintaibai（TS版本）
yarn
yarn dev项目运行
第2种利用官网脚手架搭建（庞大）
(1) 官网脚手架安装
js
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)启动
js
yarn start
(3)配置 webpack
默认，create react app 创建的项目是看不到 webpack 相关的配置的，如果想要配置 webpack，只能先 eject 一下，执行命令来释放 webpack 的配置文件：
js
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 选项（仅供参考）
第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项目
bash
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 5 + React搭建（2024-03-12 放弃）
1、检查本地环境
node版本 20.10.0 检查node和npm环境
js
node -v
npm -v2、安装yarn
js
npm install -g yarn
yarn --version //1.22.213、使用yarn搭建一个新的React项目
（1） 快速搭建
bash
mkdir NexusReact //创建空文件夹
cd NexusReact //进入
yarn init //yarn 初始化
yarn add webpack //使用Yarn安装webpack
touch webpack.config.js //新建一个webpack的配置文件：webpack.config.js添加依赖包
配置 react & TypeScript
js
（react核心）
yarn add react
yarn add react-dom
yarn add react-router-dom
yarn add react react-dom react-router-dom （合并以后）
yarn add add -D @types/react @types/react-dom
yarn add typescript -D // 配置 `TypeScript`
tsc --init //直接通过 tsc 命令生成一个 `tsconfig.json` 的配置文件配置webpack
（3）配置
在src目录新建index.js文件
js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<React.StrictMode>
<div>你好，React-webpack5-template</div>
</React.StrictMode>,
document.getElementById('root')
);在src目录新建index.html文件
js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>react-app</title>
</head>
<body>
<div id="app"></div>
</body>
</html>webpack.config.js内容
js
"use strict";
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
// 入口起点
entry: {
app: "./src/index.js",
},
// 输出
output: {
path: path.resolve(__dirname, "../dist"),
filename: "[name].js",
},
// 解析
resolve: {
extensions: [".ts", ".tsx", ".js", ".json"],
alias: {
"@components": path.join(__dirname, "../src/components"),
"@utils": path.join(__dirname, "../src/utils"),
"@pages": path.join(__dirname, "../src/pages"),
},
},
// loader
module: {
rules: [
{
test: /\.js|jsx$/,
exclude: /(node_modules|bower_components)/, // 屏蔽不需要处理的文件（文件夹）（可选）
loader: "babel-loader",
},
{
//支持less
// npm install style-loader css-loader less-loader less --save-dev
test: /\.(le|c)ss$/, // .less and .css
use: ["style-loader", "css-loader", "less-loader"], // 创建的css文件存在html的头部
},
],
},
// 插件
plugins: [
new HtmlWebpackPlugin({
filename: "index.html",
template: "src/index.html",
inject: "body",
hash: false,
minify: {
collapseWhitespace: true, //把生成文件的内容的没用空格去掉，减少空间
},
}),
],
};4、进入并运行项目
// 进入项目 cd my_react
//安装依赖 yarn
// 启动项目 yarn start (之前的) yarn dev项目启动成功，在浏览器 输入 http://localhost:5173/ 即可访问react
5、尝试打包
yarn build打包完成以后能在我们项目里面看到一个包
6、下载插件(安装xxx 插件 )
yarn add 插件名称
三、项目信息配置（基于vite的方式）
1、项目目录
打开Vite构建的项目，项目的目录结构如下：
bash
.
├── 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.js2、配置resolve.alias 文件导入路径别名
简单介绍一下： resolve.alias 配置项通过别名来把原导入路径映射成一个新的导入路径。例如使用以下配置：
在项目的 vite.config.ts 之中配置：
默认跟文件为显示src的目录 默认跟组件目录为
bash
// 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
bash
// tsconfig.json
{
"compilerOptions": {
"paths": {
"@/*": ["./src/*"],
}
}
}
配置 extensions ，省略文件路径的后缀名
3、添加请求方式axios
（1）安装axios并封装请求
bash
安装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 里面
bash
import request from '@/utils/request.js'
// 获取网站信息
export function getqueryWebInfo(params) {
return request({
url: '/你的接口地址',
method: 'get',
params
})
}（3）配置接口统一代理地址和相关信息
在vite.config.ts 里面封装接口同意请求的前缀并且配置接口代理
bash
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 路由
安装
bash
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
bash
// 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替代
bash
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) 嵌套路由变得更简单
bash
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
bash
（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里面
bash
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里面
bash
console.log('我是登录界面');
import React from 'react';
const Login = () => {
return <h2>登录页面</h2>;
};
export default Login;搭建效果 
到此，我们第一阶段项目的运行和基础搭建完成，路由也能正常访问和请求接口了
第二篇章【❤ React18 环境搭建项目与运行 （2）】