React18+Redux+antd 項目實戰 js

Ant Design插件官網
Axios官網 (可配置請求攔截器和響應攔截器)
JavaScript官網
Echarts官網

一、項目前期準備

1.創建新項目 hotel-manager

npx create-react-app hotel-manager

2.安裝依賴

//安裝路由
npm i react-router-domnpm i aixos
//安裝組件庫
npm i antdnpm i sass

3.刪除沒必要的文件，最后新建文件夾成這樣

4.修改里面的文件代碼
（1）修改index.css

* {margin: 0;padding: 0;list-style: none;text-decoration: none;outline: none;
}body {margin: 0;font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen','Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

（2）修改App.js

import { BrowserRouter, Route, Routes } from 'react-router-dom';
// 導入頁面組件
import Layout from './views/Layout/Layout';
import Login from './views/Login/Login';function App() {return (<BrowserRouter><Routes><Route path='/' element={<Login />} /><Route path='/Layout' element={<Layout />} /></Routes></BrowserRouter>);
}export default App;

（3）清空App.css
（4）修改index.js

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

二、開始項目編寫
(1)新建Layout.js

import React, { useState } from 'react';
import {MenuFoldOutlined,MenuUnfoldOutlined,UploadOutlined,UserOutlined,VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import './Layout.scss'const { Header, Sider, Content } = Layout;
export default function () {const [collapsed, setCollapsed] = useState(false);const {token: { colorBgContainer, borderRadiusLG },} = theme.useToken();return (<Layout className='layout'><Sider trigger={null} collapsible collapsed={collapsed}><div className="demo-logo-vertical" /><Menutheme="dark"mode="inline"defaultSelectedKeys={['1']}items={[{key: '1',icon: <UserOutlined />,label: 'nav 1',},{key: '2',icon: <VideoCameraOutlined />,label: 'nav 2',},{key: '3',icon: <UploadOutlined />,label: 'nav 3',},]}/></Sider><Layout><Headerstyle={{padding: 0,background: colorBgContainer,}}><Buttontype="text"icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}onClick={() => setCollapsed(!collapsed)}style={{fontSize: '16px',width: 64,height: 64,}}/></Header><Contentstyle={{margin: '24px 16px',padding: 24,minHeight: 240,background: colorBgContainer,borderRadius: borderRadiusLG,}}>Content</Content></Layout></Layout>)
}

(2)新建Layout.scss

.layout {width: 100vw;height: 100vh;
}

(3)新建Login.js

import React, { useState } from "react";
import './Login.scss'
import { Button, Form, Input, message } from 'antd';
import MyNotification from "../../components/MyNotification/MyNotification";
import { useNavigate } from "react-router-dom";export default function Login() {//導航let navigate = useNavigate()// 通知框狀態消息提示let [notiMsg, setNotiMsg] = useState({ type: '', description: '' })// 表單成功提交方法const onFinish = (values) => {console.log('Success:', values);setNotiMsg({ type: 'success', description: message })//跳轉到首頁navigate('/layout')};let [form] = Form.useForm()const onReset = () => {form.resetFields();};return (<div className="login"><div className="content"><h2>后臺管理系統</h2><Formname="basic"form={form}labelCol={{span: 4,}}wrapperCol={{span: 18,}}style={{maxWidth: 600,}}initialValues={{remember: true,}}onFinish={onFinish}autoComplete="off"><Form.Itemlabel="賬號"name="username"rules={[{required: true,message: '請輸入賬號!',},]}><Input /></Form.Item><Form.Itemlabel="密碼"name="password"rules={[{required: true,message: '請輸入密碼!',},]}><Input.Password /></Form.Item><Form.ItemwrapperCol={{offset: 4,span: 16,}}><Button type="primary" htmlType="submit">登錄</Button><Button style={{ marginLeft: '10px' }} onClick={onReset}>取消</Button></Form.Item></Form><MyNotification notiMsg={notiMsg} /></div></div>)
}

(4)新建Login.scss

.login {width: 100vw;height: 100vh;background-color: rgb(141, 160, 202);display: flex;justify-content: center;align-items: center;.content {width: 500px;height: 230px;border: 1px solid white;padding-top: 20px;h2 {text-align: center;}}
}

三、運行項目

npm run start

學習react，需要對js特別會，聽說js會的人就不會覺得react難。繼續學習js。。。vue框架對js的要求不是很高，因為里面有一些自定義的語法，怪不得我學的還算順暢，嗚嗚。