准备

在npx create-react-app project-name后，可以直接运行，但是是最基础的一个类似于Hello World的存在。还需要自己的润色，那么就从icon开始吧，直接进入iconfont找素材了。感恩~
修改项目文件，只留下对应的index.js和App.js，一个是作为项目入口，一个用于路由配置（React项目是单页面项目，所以需要配置路由处理多页面情况）

开发

项目准备好后就得进入正式的敲代码工作了。

UI框架

Antd
将index作为首页进行开发，通过导航+列表的方式进行展示。那么如何进行展示呢，首次单独开发一个前端项目，这时候就想到UI框架了——Antd。这是蚂蚁开源的一个快速UI开发框架，通过各种UI组件能够快速搭建一个丰富的前端页面。因此采用Antd作为UI进行开发。具体的可以自行查看一下。

路由

鉴于React是单页面开发框架，所以在实际开发过程中出现了多页面的存在，一开始我天真的以为创建一个文件夹，url指向对应的文件夹或者jsx文件就好了，但是发现不是那么回事。npm执行后打开localhost:3000主页—>index.js内容
在这里插入图片描述
当我访问localhost:3000/detail的时候提示not found。可是路径是有的啊，查询资料发现React只有一个页面。于是如何搞成多页面呢？路由。

通过路由代理可以将页面从单页面代理成多页面项目。React存在BrowerRouter和HashRouter。

BrowerRouter

BrowerRouter是将URL映射到不同页面，由React决定渲染哪一个页面。但是实际请求时会从服务器获取URL指向的内容，所以有时候需要配置不然请求会出现问题。新版使用方法

HashRouter

区别于BrowerRouter，HashRouter是通过URL的Hash值来跳转的，并且其URL里会存在#字符，这样在#字符后面的内容不会发送到服务器，譬如localhost:3000/#/detail中的detail不会发送到服务器，服务器只会返回localhost:3000的内容，最后还是由React路由进行具体的detail渲染。简单使用方法

入口

index.js
整个项目的入口

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
/**
 * 整个页面入口
 */
ReactDOM.render(
    <App />,
    document.getElementById('root')
);

App.js
index.js根据React规则渲染返回App组件，在App.js中做路由管理，管理路由的跳转。

import React from 'react';
import Home from './home/home';
import UplaodPage from './upload/upload';
import Login from './login/login';
import Register from './register/register';
import Detail from './detail/detail';

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

/**
 *  整个页面管理路由
 */
export default function App () {
    return (
        <Router>
            <Routes>
                <Route path="/" element={<Home />} />
                <Route path="upload" element={<UplaodPage />} />
                <Route path="login" element={<Login />} />
                <Route path="register" element={<Register />} />
                <Route path="detail/:id" element={<Detail />} />
                <Route
                    path="*"
                    element={
                        <main style={{ padding: "1rem" }}>
                            <p>There's nothing here!</p>
                        </main>
                    }
                />
            </Routes >
        </Router >

    );
}