从零构建React Todo项目(六)添加项目常用组件

项目地址：https://github.com/shengshunyan/react-scaffold

概述

一个基本react的项目需要一些额外的组件，比如React Router，公共状态管理组件，还有第三方的UI组件库等

React Router

安装 (官网：https://reactrouter.com/web/guides/quick-start)
bash
1
npm install --save react-router-dom

入口文件中引入资源，添加相关逻辑代码

/src/index.js

javascript

//...

// 引入router组件
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link,
} from 'react-router-dom';

// ... 

function App() {
    return (
        <div className="app">
            <Router>
                <div>
                    <nav>
                        <ul>
                            <li>
                                <Link to="/">Home</Link>
                            </li>
                            <li>
                                <Link to="/about">About</Link>
                            </li>
                            <li>
                                <Link to="/users">Users</Link>
                            </li>
                        </ul>
                    </nav>

                    <Switch>
                        <Route path="/about">
                            <About />
                        </Route>
                        <Route path="/users">
                            <Users />
                        </Route>
                        <Route path="/">
                            <Home />
                        </Route>
                    </Switch>
                </div>
            </Router>
        </div>
    );
}

function Home() {
    return <h2>Home</h2>;
}

function About() {
    return <h2>About</h2>;
}

function Users() {
    return <h2>Users</h2>;
}

// ...

查看效果

UI组件库：Ant Design of React

安装
bash
1
npm install --save antd
入口js文件头部引入antd css样式文件

/src/index.js
javascript
1
2
3
4
5
6
//...

// 引入antd组件库
import 'antd/dist/antd.css';

//...

使用组件

javascript

import { DatePicker } from 'antd';

export default function Home() {
    return (
        <h2>
            Home
            <DatePicker />
        </h2>
    );
}

查看效果

调整项目入口页面

在引入了 React Router 和 antd 之后，我们可以根据 antd 的 layout 组件来搭建页面的骨架，配合 React Router 来做系统的导航，具体项目的调整细节请参考commit：add the react router & antd design components

利用react原生支持的代码分割来做模块代码的分割和懒加载

javascript

const Index = lazy(() => import(/* webpackChunkName: "Index" */'../../modules/index'));

function App() {
    return (
        <Switch>
            <Route path={url.app.index.path}>
                <Suspense fallback={<div>loading</div>}>
                    <Index />
                </Suspense>
            </Route>
        </Switch>
    )
}