使用React和AntDesign构建初始前端项目及路由配置

PS：已安装好node.js，npm或yarn等

创建React项目

1.安装React脚手架

使用npm命令：npx create-react-app
这一步是临时安装react脚手架create-react-app

全局安装create-react-app脚手架
npm命令： npm install -g create-react-app
yarn命令：yarn global add create-react-app

npx和npm命令区别：
npx用于临时安装一个模块，使用过后会自动删除，避免了全局安装带来的污染。
npm主要用于管理和安装依赖包

2.利用React脚手架创建项目

使用create-react-app创建项目：
使用命令：create-react-app my-react-app
my-react-app是项目名称，可根据实际项目修改

出现以下提示说明项目初步创建成功：

3.安装AntDesign框架

安装前切记目录切入项目文件夹下！！！

3.1 使用 cd my-react-app 进入新项目

3.2 安装

第一种方法：使用npm命令安装：npm install antd

第二种方法：使用yarn命令安装: yarn add antd

npm和yarn安装方法二者选其一就行

3.3 页面中配置使用

找到antd的样式文件，路径为：D:*\my-react-app\node_modules\antd\dist
留意文件名称，现在样式文件名称为 reset.css

在src文件夹下面的index.js中引入antd的样式文件
import ‘antd/dist/reset.css’;

在项目文件夹src中新建文件夹命名为：pages
在pages中新建文件夹命名为：newtry
并在newtry文件夹中新建tsx文件命名为：try.tsx

import { Button, DatePicker } from 'antd';
import React from 'react';
// import React from 'react';export default function Newtry() {return (<><Button type="primary">PRESS ME</Button><DatePicker placeholder="select date" /></>)
};

在app.js文件中引入Newtry组件测试是否正常显示：

// import logo from './logo.svg';
import './App.css';
import Newtry from './pages/newtry/try.tsx'function App() {return (<div className="App">{/* <header className="App-header"><img src={logo} className="App-logo" alt="logo" /><p>Edit <code>src/App.js</code> and save to reload.</p><aclassName="App-link"href="https://reactjs.org"target="_blank"rel="noopener noreferrer">Learn React</a></header> */}<Newtry></Newtry></div>);
}export default App;

使用yarn install 安装依赖
启动项目： yarn start
项目页面可看到以下效果说明antd框架引入成功

4.集成router路由

4.1 安装 react-router-dom

第一种方法： 使用npm命令：
npm install react-router-dom

第二种方法：使用yarn命令
yarn add react-router-dom

4.2 全局创建路由文件及页面配置

(1)新建页面
在pages中新建两个文件夹分别命名为: welcome、login
并在每个文件夹中新建tsx文件：index.tsx

在 src/pages/welcome/index.tsx 文件中添加以下代码：

import React from "react";
export function Welcome() {return (<div>欢迎页</div>);
}

在 src/pages/login/index.tsx 文件中添加以下代码：

import React from "react";
export function Login() {return (<div>登录页，欢迎您！</div>);
}

（2）创建路由文件
在项目文件夹src中新建文件夹命名为：router
在router中新建txs文件命名为: index.tsx

在src/router/index.tsx文件中添加以下代码：

import React from "react";
import { Navigate, createHashRouter } from "react-router-dom";
import { Login } from '../pages/login/index.tsx';//导入页面文件
import { Welcome } from '../pages/welcome/index.tsx';
//注册全局路由
export const globalRouters= createHashRouter([{path:'/',element:<Navigate to='/welcome' />},{path:'/welcome',element:<Welcome/>},{path:'/login',element:<Login/>}
])

4.3 配置index.js文件

在src/index.js中加入以下代码

import { RouterProvider } from 'react-router-dom';
import { globalRouters } from './router/index';
<RouterProvider router ={globalRouters}></RouterProvider>

以下为完整的index.js文件

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import 'antd/dist/reset.css';
import { RouterProvider } from 'react-router-dom';
import { globalRouters } from './router/index';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<React.StrictMode><App /><RouterProvider router ={globalRouters}></RouterProvider></React.StrictMode>
);reportWebVitals();

启动项目测试：使用yarn start或者npm start启动，打开后页面显示为下图，路由部署成功。

目前可通过修改 #/ 后的内容切换页面，例如将上图中welcome更换为login，页面显示为：

（因为此时App.js中引入的组件没有删除，所有页面中间仍然能看到按钮和日历组件）