一：创建项目
超全面详细一条龙教程！从零搭建React项目全家桶（上篇） - 知乎
1.创建一个文件夹，shift+鼠标右键选择在此处打开powershell
2.为了加速npm下载速度，先把npm设置为淘宝镜像地址。
npm config set registry http://registry.npm.taobao.org/
3.执行下面的npm安装react，那么基础的项目就搭建好了
npx create-react-app react-app
4.使用下列npm运行项目
npm start
二：精简项目
删除例如App.css、App.test.js、index.css、logo.svg、reportWebvitals.js、setupTests.js等文件，
保留核心index.js、App.js；优化成下图
三.创建文件并安装路由
1.基本文件格式
2.安装路由 npm install react-router-dom
3. router文件夹下index.js的模板
// 引入组件
import Login from "../views/login";
// 注册路由数组
const routes = [
{
// 首页默认是/
path: "/",
element: <Login></Login>,
}
];
// 导出
export default routes;4. views文件夹下面的页面的基本模板结构
import React from "react";
export default function login() {
return <div>这是子页面</div>;
} 5.配置 App.js 使用路由： 在 App.js 中使用 useRoutes 来注册路由：
import { useRoutes } from 'react-router-dom';
import routes from './router';
function App() {
return (
<div>
{/* 注册路由 */}
{useRoutes(routes)}
</div>
);
}
export default App;6.配置 index.js 引入 HashRouter： 在 index.js 中，使用 HashRouter 包裹 App 组件，配置路由：
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import { HashRouter } from 'react-router-dom'; // 导入 HashRouter
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<HashRouter>
<App />
</HashRouter>
);7.index.html替换为
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1"
/>
<meta name="theme-color" content="#000000" />
<meta name="description" content="Web site created using createreact-app" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>