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>
);
})
);
标签:Option,cnpm,setMenu,ts,react,mobx,import,搭建 来源: https://www.cnblogs.com/lvlv11/p/15847600.html