搭建react项目实战

1. 创建个react项目

$ yarn create react-app react-demo 
# or
$ npx create-react-app react-demo

2. 引入antd

cd react-demo
yarn add antd

3. 修改 src/App.js，引入 antd 的按钮组件。

import React from 'react';
import { Button } from 'antd';
import './App.css';

const App = () => (
  <div className="App">
    <Button type="primary">Button</Button>
  </div>
);

export default App;

修改 src/App.css，在文件顶部引入 antd/dist/antd.css。

@import '~antd/dist/antd.css';

运行看效果

4. 安装 craco 并修改 package.json 里的 scripts 属性

$ yarn add @craco/craco

/* package.json */
"scripts": {
-   "start": "react-scripts start",
-   "build": "react-scripts build",
-   "test": "react-scripts test",
+   "start": "craco start",
+   "build": "craco build",
+   "test": "craco test",
}

然后在项目根目录创建一个 craco.config.js 用于修改默认配置。

/* craco.config.js */
module.exports = {
  // ...
};

6. 自定义主题

首先把 src/App.css 文件修改为 src/App.less，然后修改样式引用为 less 文件。

/* src/App.js */
- import './App.css';
+ import './App.less';

/* src/App.less */
- @import '~antd/dist/antd.css';
+ @import '~antd/dist/antd.less';

然后安装 craco-less 并修改 craco.config.js 文件如下。

$ yarn add craco-less

const CracoLessPlugin = require('craco-less');

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
};

运行看效果

8. 引入路由

yarn add react-router-dom

安装的是V6版本的 V6和V5改动挺大

配置的文档

10. 修改 src/index.js，引入路由。

import ReactDOM from "react-dom/client";
import { BrowserRouter } from "react-router-dom";
import App from "./App";

const root = ReactDOM.createRoot(
  document.getElementById("root")
);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

修改 src/App.js，引入配置路由。

function App() {
  return (
    <div className="App">
      <Routes>
        <Route exact path="/" element={<Login />}></Route>
        // 嵌套路由
        <Route path="/home" element={<Home />}>
          <Route path="class" element={<Class />}></Route>
          <Route path="lesson" element={<Lesson />}></Route>
        </Route>
        <Route exact path="/about" element={<About />}></Route>
        <Route exact path="/my" element={<My />}></Route>
        // 404 没有找到的路由设置
        <Route path="*" element={<NotFound />} />
      </Routes>
    </div>
  );
}

常用的方法：

• 跳转：

import { useNavigate } from "react-router-dom";
navigate("/home");

• 动态渲染：Outlet

import { Outlet, Link } from "react-router-dom";

function Home(props) {
  console.log(props);
  return (
    <div className="Home">
      <header>
        <Link to="/home/class">班级管理</Link>
        <Link to="/home/lesson">课程管理</Link>
      </header>
      <section>
        <Outlet />
      </section>
    </div>
  );
}

export default Home;

12. 引入redux react-redux

npm install @reduxjs/toolkit react-redux

用法链接