相信很多React初学者第一次搭建自己的项目，搭建时会无从下手，本篇适合快速实现功能，熟悉React项目搭建流程。
目录
一、创建项目react-item
二、调整项目目录结构
三、使用scss预处理器
四、组件库Ant Design
五、配置基础路由
六、配置别名路径
一、创建项目react-item
npm create vite react-item二、调整项目目录结构
-src
-apis 项目接口函数
-assets 项目资源文件，比如，图片等
-components 通用组件
-pages 页面组件
-store 集中状态管理
-utils 工具，比如，token、axios 的封装等
-App.js 根组件
-index.css 全局样式
-index.js 项目入口三、使用scss预处理器
SASS是一种预编译的 CSS，支持一些比较高级的语法，可以提高编写样式的效率，CRA接入scss非常简单只需要我们装一个sass工具
1. 安装解析 sass 的包
npm i sass -D2. 创建全局样式文件：index.scss
四、组件库Ant Design
Ant Design（简称 Antd）是一个企业级的 UI 设计语言和 React 组件库，由 Ant Financial（蚂蚁金服）团队开发和维护。它旨在为开发者提供一套设计精美、功能完善的前端组件
官方网站：
Ant Design of React - Ant Design
1. 安装 antd 组件库
npm i antd2. 在App.jsx中导入 Button 组件测试
import { Button } from 'antd'
import './App.css'
function App() {
return (
<>
<Button type='primary'>按钮</Button>
</>
)
}
export default App
成功：
五、配置基础路由
1. 安装路由包
npm i react-router-dom2. 准备 Home和 About俩个基础组件
一级路由：
// src/pages/Home.jsx
import { Outlet, Link } from 'react-router-dom';
const Home = () => {
return (
<div>
<nav>
<ul>
<li><Link to="/home/section1">侧边栏1</Link></li>
<li><Link to="/home/section2">侧边栏2</Link></li>
</ul>
</nav>
{/* 渲染嵌套路由的内容 */}
<Outlet />
</div>
);
}
export default Home;
// src/pages/About.jsx
const About = () => {
return (
<div>
<h2>关于</h2>
</div>
);
}
export default About;
二级路由 Section1和Section2
// src/pages/Section1.jsx
const Section1 = () => {
return (
<div>
<h3>Section 1 Content</h3>
<p>This is the content of Section 1.</p>
</div>
);
}
export default Section1;// src/pages/Section2.jsx
const Section2 = () => {
return (
<div>
<h3>Section 2 Content</h3>
<p>This is the content of Section 2.</p>
</div>
);
}
export default Section2;
3. 配置路由
App.jsx
// src/App.jsx
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Section1 from './pages/Section1';
import Section2 from './pages/Section2';
const App = () => {
return (
<Router>
<div>
{/* 主导航栏 */}
<nav>
<ul className='tab'>
<li><Link to="/home">首页</Link></li>
<li><Link to="/about">关于</Link></li>
</ul>
</nav>
{/* 路由配置 */}
<Routes>
<Route path="home" element={<Home />}>
{/* 二级路由配置 */}
<Route path="section1" element={<Section1 />} />
<Route path="section2" element={<Section2 />} />
</Route>
<Route path="about" element={<About />} />
</Routes>
</div>
</Router>
);
}
export default App;
BrowserRouter：用于包裹整个应用程序，开启前端路由的功能。在这里使用了别名Router，目的是让路由能够通过 URL 来导航页面而不刷新整个页面。Route：定义路由规则，指定 URL 路径和对应的组件。Routes：包裹所有的Route，用于配置和管理路由规则。Link：用于创建应用程序内的导航链接，通过点击链接来进行页面导航。Router是 React Router 的核心组件，负责包裹整个应用程序，管理页面的路由逻辑。<Outlet />：用来渲染嵌套路由的内容。在Home组件中，当访问/home/section1或/home/section2时，这部分内容会被渲染到<Outlet />所在的位置。
六、配置别名路径
1. 安装craco工具包
Create React App 是一个非常流行的工具，用于快速构建 React 应用。它提供了一些开箱即用的配置，如 Webpack、Babel、ESLint、Prettier 等。然而，这些配置默认是隐藏的，用户无法直接修改它们。如果你需要自定义 Webpack 或其他工具的配置，就需要执行 eject 操作。
问题：eject 的缺点
- 执行
eject后，所有的配置文件都会暴露出来并且变得可以修改，但这也意味着你需要管理和维护这些文件，增加了复杂度。 - 一旦
eject，就无法恢复，也无法享受 Create React App 后续版本的自动更新和修复。
解决方案：CRACO
CRACO 提供了一种无需执行 eject 即可自定义配置的方法，它通过修改 CRA 的默认配置来满足你的需求，同时保持 CRA 的内部配置自动管理。
npm i @craco/craco -D2. 根目录增加 `craco.config.js` 配置文件
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定：使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
}
}
}3. 修改 `scripts 命令`
这个配置保留了 craco 作为主要的开发工具来启动、构建和测试项目，并且通过 eject 保留了传统的暴露配置的方式，允许开发者在需要时完全控制项目的配置。
在package.json中：
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}4. 测试是否生效
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
