Step1. 使用react 18创建一个Blog系统的前台，并引入React-Router v6和Antd，创建起始页。

UniqueStone
127 阅读4分钟

创建项目

先附上作者的文件结构（src）目录：

│  index.less 
│  index.tsx // 入口文件
│
├─components // 公共组件
│  │  header.less
│  │  header.tsx
│  │  myFooter.tsx
│  │
│  └─assents
│          rice.png
│
├─pages // 页面文件
│  │  index.tsx
│  │  NotFound.tsx
│  │
│  ├─home
│  │      index.less
│  │      index.tsx
│  │
│  └─start
│      │  index.less
│      │  index.tsx
│      │
│      └─assents
│              back.jpg
│
└─router // 路由配置
        router.tsx

1. 安装create-react-app,并检查是否安装成功。

作者使用的是React脚手架进行创建项目的，所以首先就是创建脚手架啦。注意-V的V是大写的。

npm install -g create-react-app
create-react-app -V

2. 创建并启动react项目。

create-react-app <项目名称>
cd <项目名称>
npm start

安装react-router v6

react-router官网：Docs Home v6.3.0 | React Router

npm i react-router react-router-dom

安装之后在src文件夹下创建router文件夹，创建router.tsx文件，以下是我的react-router配置：

import React, {useEffect} from 'react';
import {useRoutes, useNavigate} from "react-router-dom";
import {HashRouter as Router} from "react-router-dom";

// v6 版本自定义懒加载
const LazyLoad = (path: any) => {
    const Comp = React.lazy(() => import(`../pages/${path}`))
    return (
        <React.Suspense fallback={<></>}>
            <Comp/>
        </React.Suspense>
    )
}

// v6版本自定义重定向
// @ts-ignore
function Redirect({to}) {
    const navigate = useNavigate()
    useEffect(() => {
        navigate(to, {replace: true})
    })
    return null
}

// 路由表
const RouterTable = () => {
    const element = useRoutes([
        {
            path: '/',
            element: <Redirect to='/home'></Redirect>
        },
        {
            path: "/home", element: LazyLoad("home")
        },
        {
            path: "/start", element: LazyLoad("start")
        },
        {
            path: '*',
            element: LazyLoad("NotFound")
        }
    ])
    return element
}

const RouterConfig = () => {
    return (
        <Router>
            <RouterTable></RouterTable>
        </Router>
    )
}

export default RouterConfig;

之后在项目的入口文件引入该配置:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.less';
import RouterConfig from "./router/router";
const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
    <RouterConfig />
);

之后就是根据路由表创建对应的组件测试router是否配置成功。

安装Antd

写文章的时候antd已经更新到5.x的版本了，项目已经创建好了，就不再更新到5的版本继续使用4的版本。

npm i antd@4.24.2

在入口文件对应的样式表index.css中加上（作者已经配好less了所以使用的是index.less），关于如何导入less相关配置，将在后边的文章中提到。

@import url('~antd/dist/antd.css');

这样我们的antd就算安装好了，过程还是简单的，大家可以在一个组件中随便引入一个组件库中的组件测试一下。

创建起始页

有了router和antd组件库我们已经可以去写页面了，来大家搞起来。 先上效果图：

image.png

好嘞，我们开始了。

  1. 在router -> router.tsx文件中的路由表中添加如下配置（其实上边的配置文件中已经有了）：
const RouterTable = () => {
    const element = useRoutes([
        {
            path: "/home", element: LazyLoad("home")
        },
    ])
    return element
}
  1. 创建对应的组件（页面）。

新建pages文件夹，在pages文件夹下创建home文件夹，在home文件夹下创建index.tsx和index.less文件：

//index.tsx
import React from 'react';
import './index.less'
import {NavLink} from "react-router-dom";

function Index() {
    return (
        <div className='container'>
            <header>
                <title>Create Next App</title>
                <meta name="description" content="Generated by create next app"/>
                <link rel="icon" href="/favicon.ico"/>
            </header>

            <main className='main'>
                <h1 className='title'>
                    Welcome to <NavLink to='/start'>Unique</NavLink>
                </h1>

                <div className='grid'>
                    <NavLink to='/start' className='card'>
                        <h2>Start &rarr;</h2>
                        <p>Let's start to explore Unique in an excited mood.
                            <p>(building...)</p>
                        </p>
                    </NavLink>
                    <NavLink to='/about' className='card'>
                        <h2>Learn &rarr;</h2>
                        <p>Learn about Next.js in an interactive course with quizzes!</p>
                    </NavLink>
                    <NavLink to='/about' className='card'>
                        <h2>Examples &rarr;</h2>
                        <p>Discover and deploy boilerplate example Next.js projects.</p>
                    </NavLink>
                    <NavLink to='/about' className='card'>
                        <h2>Deploy &rarr;</h2>
                        <p>Instantly deploy your Next.js site to a public URL with Ver.</p>
                    </NavLink>
                </div>
            </main>
            <footer className='footer'>
                Made with &nbsp;
                <span style={{color: 'red'}}>❤</span>
                &nbsp; by &nbsp;
                {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
                <a href='#'>MaPX</a>
            </footer>
        </div>
    );
}

export default Index;

.container {
  padding: 0 2rem;
}

.main {
  min-height: 100vh;
  padding: 4rem 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.footer {
  color: gray;
  display: flex;
  flex: 1;
  padding: 2rem 0;
  border-top: 1px solid #eaeaea;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1.5;
  font-family: BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, apple color emoji, segoe ui emoji, Segoe UI Symbol, noto color emoji;
}

.title a {
  color: #0070f3;
  text-decoration: none;
}

.title a:hover,
.title a:focus,
.title a:active {
  text-decoration: underline;
}

.title {
  margin: 0;
  line-height: 1.15;
  font-size: 4rem;
  padding-bottom: 1rem;
}

.title,
.description {
  text-align: center;
}

.description {
  margin: 4rem 0;
  line-height: 1.5;
  font-size: 1.5rem;
}

.code {
  background: #fafafa;
  border-radius: 5px;
  padding: 0.75rem;
  font-size: 1.1rem;
  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
  Bitstream Vera Sans Mono, Courier New, monospace;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 800px;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  text-align: left;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  max-width: 300px;
}

.card:hover,
.card:focus,
.card:active {
  color: #0070f3;
  border-color: #0070f3;
}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.logo {
  height: 1em;
  margin-left: 0.5rem;
}

@media (max-width: 600px) {
  .grid {
    width: 100%;
    flex-direction: column;
  }
}

@media (prefers-color-scheme: dark) {
  .card,
  .footer {
    border-color: #222;
  }

  .code {
    background: #111;
  }

  .logo img {
    filter: invert(1);
  }
}

ok,我们初始页创建完毕，但是我们已经使用less文件了，但是没有less相关的配置，呢当然是不行了，配置less的相关问题我放在了另外一篇文章（现在还没写，大家稍安勿躁）：

第一步大家都应该是没有问题的吧，让我们准备好，后边就要开始发车了，开始设计我们的页面了。

起始页灵感来自Next.js Next.js - React 应用开发框架 | Next.js中文网 (nextjs.cn)

用next.js创建好项目之后起始页的效果跟我们的是一样的（当然是我们跟他的一样）。

avatar
文章
阅读
粉丝