这是我参与「第四届青训营」笔记创作活动的第15天

React项目随手记

准备工作

本文将记录如何利用 create react-app 搭建一个react的开发环境

1. 项目文件初始化

npx create react-app 项目名字

/assets 项目资源文件，比如图片等
/components 通用组件
/pages 页面
/utils 工具，比如 token axious 的封装等
/store 存放状态（mobx）
App.js 根组件
index.css 全局样式
index.js 项目入口

这一步可能会比较慢，耐心等待

2. 使用scss预处理器

安装解析 sass 的包：yarn add sass -D

由于在生产环境不依赖，只在开发环境依赖，所以加上-D。安装完成后可以在package.json中查看

创建全局样式文件：index.scss

3. 路由配置

yarn add react-router-dom

在App.js中进行简单配置

import { BrowserRouter, Routes, Route } from 'react-router-dom'
import Layout from './pages/Layout'
import Login from './pages/Login'

function App () {
  return (
    //路由配置
    <BrowserRouter>
      <div className="App">
        <Routes>
          {/* 创建路由 path 和对应组件的关系 */}
          <Route path='/' element={<Layout />}></Route>
          <Route path='/login' element={<Login />}></Route>
        </Routes>
      </div>
    </BrowserRouter>

  )
}

export default App

4. 组件库antd的使用和配置别名

yard add antd

Ant Design - 一套企业级 UI 设计语言和 React 组件库

在index.js中导入样式,注意顺序

import 'antd/dist/antd.css'
import './index.scss'

注意当前引入可能会产生URL的报错，如果产生了修改为 import 'antd/dist/antd.min.css'

配置好了即可进行按需引入

5. 配置别名路径@

默认情况下CRA（create react-app）将所有工程化配置，都隐藏在了 react-scripts包中，所有项目中看不到任何配置信息，如果要修改CRA的默认配置，有以下几种方案：

通过第三方库来修改，比如 @craco/craco (推荐)
通过执行 yarn eject 命令，释放 react-scripts 中的所有配置到项目中（注意，此操作不可逆，释放后无法收回，进行修改需要对webpack的配置十分熟悉）

这里用第一步方式来配置：

yarn add -D @craco/craco 安装修改CRA配置的包 craco.config.js 在项目根目录创建配置文件，并在配置文件中配置路径别名

修改 package.json 中的脚本命令

从而使得@相当于把当前的根目录拼接上src

然后还要在 package.json 中配置，将 scripts 中的 test，start，build 改为完全由 craco 接管

好了，配置完成后就可以在路径中使用@了

import Layout from '@/pages/Layout'
import Login from '@/pages/Login'

但是配置好了，虽然路径生效，但我们输入@时候并没有提示对应的路径提示，这里我们需要最后一步配置

在根目录下创建 jsconfig.json 文件并配置如下（这个配置文件主要是针对 vscode 的，与 react 无关）

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "@/*": [
                "src/*"
            ]
        }
    }
}

大功告成！

补充 React 调试工具安装（已安装可以略过）

浏览器插件找到调试工具进行安装

安装好了后打开 react 的项目，在网页上调试有如下页面

小结

不管是Vue还是react都要把工具装好和开发环境搭建好，这里做了一个简单的react项目环境搭建和调试工具安装，记录了一些常见的配置，方便以后自己使用。

react项目环境搭建 | 青训营笔记