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

源码地址

记得给个star呀伙伴

环境介绍

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 -v

2、安装yarn

js 复制代码

npm install -g yarn
yarn --version //1.22.21

3、使用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.js

2、配置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

bash 复制代码

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

export default Login;

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

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

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

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

源码地址

一、React环境项目搭建

第1种React 16 官网nextjs一把撸

(1) 最新官网nextjs一把撸

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

(1) 官网脚手架安装

(2)启动

(3)配置 webpack

第3种普通cra搭建

1、检查本地环境

2、安装yarn

3、创建一个新的React项目

4、进入并运行项目

5、尝试打包

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

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

1、检查本地环境

2、安装yarn

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

4、进入并运行项目

5、尝试打包

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

第5种利用Webpack 5 + React搭建（2024-03-12 放弃）

1、检查本地环境

2、安装yarn

3、使用yarn搭建一个新的React项目

（1） 快速搭建

添加依赖包

配置 react & TypeScript

（3）配置

4、进入并运行项目

5、尝试打包

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

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

1、项目目录

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

配置 tsconfig.json

3、添加请求方式axios

（1）安装axios并封装请求

（2）写接口文件

（3）配置接口统一代理地址和相关信息

4、集成 react-router 路由

安装

使用React Router

5、搭建主页面home

6、搭建登录页面Login

（1）快速搭建