react+ts項目搭建

全局下載yarn

cnpm i -g yarn

通過yarn創建項目

yarn create react-app react-demos --template typescript

下載antd

cnpm i antd --save
import 'antd/dist/antd.css'; //全局引入antd樣式

安裝sass

cnpm i node-sass -D

安裝路由

cnpm i react-router@6.2.0
cnpm i react-router-dom@6.2.0 -S

路由簡單使用v6版本

import { HashRouter, Routes, Route } from "react-router-dom";
ReactDOM.render(
  <HashRouter>
	<Routes>
	  <Route path="/home" element={<Home />}></Route>
	  <Route path="/" element={<Login />}></Route>
	</Routes>
  </HashRouter>,
  document.getElementById("root")
);

Hook的簡單使用

//hook只能在函數組件中使用
// 聲明一個叫 “count” 的 state 變量
const [count, setCount] = useState(0);
setCount(count++) // 通過setCount改變count值

mobx的簡單使用

下載mobx

cnpm i mobx
cnpm i mobx-react 

創建store文件夾，創建示例文件menu.ts

import { configure, makeAutoObservable, runInAction } from "mobx";
configure({
  useProxies: "never", // 使用該配置，可以將 Proxy 降級為 Object.defineProperty
  isolateGlobalState: true, // 鎖版本
});
class SetMenu {
	constructor() {
		makeAutoObservable(this);
	}
	
	//定義彈窗變量
	showCheck: boolean = false;
	//設置彈窗變量方法
	setShowCheck = (val: boolean) => {
		this.showCheck = val;
	};
}
//導出類
export const setMenu = new SetMenu();

主文件引入setment並導出

import { setMenu } from './menu/index';
export const stores = {
	setMenu
};

入口文件中全局覆蓋

import { Provider } from "mobx-react";
import { stores } from "./store";
ReactDOM.render(
  <Provider {...stores}>
	<HashRouter>
	  <Routes>
		<Route path="/home" element={<Home />}></Route>
		<Route path="/" element={<Login />}></Route>
	  </Routes>
	</HashRouter>
  </Provider>,
  document.getElementById("root")
);

在需要用的地方引入

import { Provider, observer, inject } from "mobx-react";
export const Nav = inject("setMenu")(
  observer((props: any) => {
	//  從store中獲取setMenu
	let { setMenu } = props;

	const handleClick = (e: any) => {
	  console.log("click ", e);
	};

	return (
	  <Menu
		onClick={handleClick}
		style={{ width: 256 }}
		defaultSelectedKeys={["1"]}
		defaultOpenKeys={["sub1"]}
		mode="inline"
	  >
		<SubMenu key="sub1" icon={<MailOutlined />} title="菜單一">
		  <Menu.ItemGroup key="g1">
			<Menu.Item key="1" onClick={()=>{setMenu.setMenuInput(1)}}>Option 1</Menu.Item>
			<Menu.Item key="2" onClick={()=>{setMenu.setMenuInput(2)}}>Option 2</Menu.Item>
		  </Menu.ItemGroup>
		</SubMenu>
		<SubMenu key="sub2" icon={<AppstoreOutlined />} title="菜單二">
		  <Menu.Item key="5">Option 5</Menu.Item>
		  <Menu.Item key="6">Option 6</Menu.Item>
		  <SubMenu key="sub3" title="Submenu">
			<Menu.Item key="7">Option 7</Menu.Item>
			<Menu.Item key="8">Option 8</Menu.Item>
		  </SubMenu>
		</SubMenu>
		<SubMenu key="sub4" icon={<SettingOutlined />} title="菜單三">
		  <Menu.Item key="9">Option 9</Menu.Item>
		  <Menu.Item key="10">Option 10</Menu.Item>
		  <Menu.Item key="11">Option 11</Menu.Item>
		  <Menu.Item key="12">Option 12</Menu.Item>
		</SubMenu>
	  </Menu>
	);
  })
);