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(
  
	
	  }>
	  }>
	
  ,
  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(
  
	
	  
		}>
		}>
	  
	
  ,
  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 (
	  
		} title="菜单一">
		  
			{setMenu.setMenuInput(1)}}>Option 1
			{setMenu.setMenuInput(2)}}>Option 2
		  
		
		} title="菜单二">
		  Option 5
		  Option 6
		  
			Option 7
			Option 8
		  
		
		} title="菜单三">
		  Option 9
		  Option 10
		  Option 11
		  Option 12
		
	  
	);
  })
);