项目搭建
基于CRA创建项目
CRA是一个底层基于webpack快速创建React项目的脚手架工具
bash
# 使用npx创建项目
npx create-react-app react-jike
# 进入到项
cd react-jike
# 启动项目
npm start
调整项目目录结构
bash
-src
-apis 项目接口函数
-assets 项目资源文件,比如,图片等
-components 通用组件
-pages 页面组件
-store 集中状态管理
-utils 工具,比如,token、axios 的封装等
-App.js 根组件
-index.css 全局样式
-index.js 项目入口
src/index.js
jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import './App.js'
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
<App/>
</React.StrictMode>
)
src/App.js
jsx
const App = () => {
return <div>this is app</div>
}
export default App
使用scss预处理器
SASS
是一种预编译的 CSS,支持一些比较高级的语法,可以提高编写样式的效率,CRA接入scss非常简单只需要我们装一个sass工具
实现步骤
- 安装解析 sass 的包:
npm i sass -D
- 创建全局样式文件:
index.scss
css
body {
margin: 0;
div {
color: blue;
}
}
组件库antd使用
我们的项目是一个传统的PC管理后台,有现成的组件库可以使用,帮助我们提升开发效率,其中使用最广的就是antD
Ant Design of React - Ant Design
实现步骤
- 安装 antd 组件库:
npm i antd
- 导入 Button 组件
- 在 Login 页面渲染 Button 组件进行测试
测试Button
pages/Login/index.jsx
jsx
import { Button } from 'antd'
const Login = () => {
return <div>this is login<Button type='primary'>test</Button></div>
}
export default Login
配置基础路由
单页应用需要对应的路由支持,我们使用
react-router-dom
最新版本
实现步骤
- 安装路由包
npm i react-router-dom
- 准备
Layout
和Login
俩个基础组件 - 配置路由
代码实现
pages/Layout/index.js
jsx
const Layout = () => {
return <div>this is layout</div>
}
export default Layout
pages/Login/index.js
jsx
const Login = () => {
return <div>this is login</div>
}
export default Login
router/index.js
jsx
import { createBrowserRouter } from 'react-router-dom'
import Login from '../pages/Login'
import Layout from '../pages/Layout'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
},
{
path: '/login',
element: <Login />,
},
])
export default router
index.js
jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.scss'
import router from './router'
import { RouterProvider } from 'react-router-dom'
ReactDOM.createRoot(document.getElementById('root')).render(
<RouterProvider router={router} />
)
配置别名路径
项目背景:在业务开发过程中文件夹的嵌套层级可能会比较深,通过传统的路径选择会比较麻烦也容易出错,设置路径别名可以简化这个过程
路径编译配置
- 安装
craco
工具包 - 增加
craco.config.js
配置文件 - 修改
scripts 命令
- 测试是否生效
bash
npm i @craco/craco -D
javascript
const path = require('path')
module.exports = {
// webpack 配置
webpack: {
// 配置别名
alias: {
// 约定:使用 @ 表示 src 文件所在路径
'@': path.resolve(__dirname, 'src')
}
}
}
json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
javascript
import { createBrowserRouter } from 'react-router-dom'
import Login from '@/pages/Login'
import Layout from '@/pages/Layout'
const router = createBrowserRouter([
{
path: '/',
element: <Layout />,
},
{
path: '/login',
element: <Login />,
},
])
export default router
VsCode提示配置
实现步骤
- 在项目根目录创建
jsconfig.json
配置文件 - 在配置文件中添加以下配置
代码实现
json
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
}
}
}
:::warning
说明:VSCode会自动读取jsconfig.json
中的配置,让vscode知道@就是src目录
:::