🚀 快速搭建 React 19 + TypeScript + React-Router v7 + MobX 项目教程

📦 环境准备

在开始之前，请确保你的开发环境中已经安装了以下工具：

Node.js（建议版本：20.x 或更高）
npm 或 yarn（Node.js 安装后会自动包含 npm）

你可以通过以下命令检查 Node.js 和 npm 的版本：

node -v
npm -v

🛠️ 创建 React + TypeScript 项目

首先，我们需要使用 Create React App 创建一个新的 React + TypeScript 项目。打开终端，运行以下命令：

npx create-react-app my-react-app --template typescript

这里 my-react-app 是你的项目名称，你可以根据需要进行更改。接下来，进入项目目录：

cd my-react-app

📥 安装依赖

在项目目录中，我们需要安装 React Router 和 MobX。运行以下命令：

npm install react-router-dom mobx mobx-react-lite

react-router-dom 用于路由管理
mobx 和 mobx-react-lite 用于状态管理

⚙️ 配置 React Router

接下来，我们需要设置 React Router。打开 src/index.tsx 文件，并进行如下修改：

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

然后，在 src 目录下修改 App.tsx文件：

import './App.css';
import { useRoutes } from 'react-router-dom';
import routes from './router';

function App() {
 
  const RouterPage = useRoutes(routes)
  return (
      <>
        {RouterPage}
      </>
  );
}

export default App;

🛠️ 创建页面组件

在 src/pages 目录下创建两个新的文件 Home.tsx 和 About.tsx，并添加以下代码：

Home.tsx

import React from 'react';

const Home: React.FC = () => {
  return <h1>欢迎来到首页！</h1>;
};

export default Home;

About.tsx

import React from 'react';

const About: React.FC = () => {
  return <h1>关于我们</h1>;
};

export default About;

🛠️ 创建路由配置

在 src/router 目录下创建一个新的文件 index.tsx，并添加以下代码：

router/index.tsx

import { RouteObject } from "react-router-dom";
import HomePage from "../pages/Home";
import AboutPage from "../pages/About";

# 如果做权限校验的话，可以写一个权限校验组件，然后将菜单页面组件作为参数传入进去，如果没有权限将直接调转404页面，例如：<ValidateComponent page={<HomePage />}>

const routes: RouteObject[] = [
  {
    path: "/",
    element: <HomePage />,
  },
  {
    path: "/about",
    element: <AboutPage />,
  },
];

export default routes;

📊 使用 MobX 管理状态

现在，我们来设置 MobX。首先，在 src 目录下创建一个新的文件 store/index.ts，并添加以下代码：

import { makeAutoObservable } from 'mobx';

class Store {
  count: number = 0;

  constructor() {
    makeAutoObservable(this);
  }

  increment() {
    this.count++;
  }

  decrement() {
    this.count--;
  }
}

const store = new Store();
export default store;

接下来，在 Home.tsx 中使用 MobX 状态：

import React from 'react';
import { observer } from 'mobx-react-lite';
import store from '../../store';

const Home: React.FC = observer(() => {
  return (
    <div>
      <h1>欢迎来到首页！</h1>
      <h2>计数器: {store.count}</h2>
      <button onClick={() => store.increment()}>增加</button>
      <button onClick={() => store.decrement()}>减少</button>
    </div>
  );
});

export default Home;

引入图片资源报错"...模块不存在"问题

在typings目录下创建一个images.d.ts文件:

declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
declare module '*.jpeg'
declare module '*.gif'
declare module '*.bmp'
declare module '*.tiff'

typescript配置文件

在根目录下创建一个typescript.config.ts文件:

{
  "compilerOptions": {
    "target": "ESNext",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "noFallthroughCasesInSwitch": true,

    "allowUmdGlobalAccess": true,
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"],
    },
  },
  "include": ["src","typings/*"],
}

配置别名

使用create-react-app创建的react项目默认是隐藏配置的，需要运行npm run eject才会显示隐藏的配置，然后再config/webpack.config.js文件中修改配置:

...
module.exports = function (webpackEnv) {
    ...
    return {
        ...
        resolve: {
            ...
            alias: {
                ...
                '@': paths.appSrc,
            }
    }

}
...

🚀 启动项目

一切准备就绪后，运行以下命令启动开发服务器：

npm start

打开浏览器，访问 http://localhost:3000，你将看到我们的 React 应用已经成功运行！🎉

📝 总结

在本教程中，我们详细介绍了如何搭建一个基于 React 19、TypeScript、React-Router v7 和 MobX 的基础项目。希望这个教程对你有所帮助，如果你有任何问题，请随时在评论区留言！💬

祝你编码愉快！🚀