让React, Mobx, React Router协同作战, 从零搭建项目脚手架

2023-12-09 19:16:07

搭建 React + Mobx + React Router 脚手架：终极指南

作为开发者，我们经常面临着反复创建项目并设置相同配置的困境。为了提高效率并减少重复劳动，React 脚手架应运而生，它可以一键初始化项目，大幅简化开发流程。本文将深入探究如何从头搭建一个包含 React、Mobx 和 React Router 的脚手架。

前期准备

在开始搭建脚手架之前，我们需要进行一些前期准备：

安装 Node.js：作为 JavaScript 运行时环境，Node.js 是脚手架构建的基础。前往 Node.js 官网下载并安装。
安装 create-react-app：这是一个脚手架构建工具，可以快速生成 React 项目。在终端中输入以下命令：

npm install -g create-react-app

创建 React 项目

使用 create-react-app 创建 React 项目：

create-react-app react-mobx-starter
cd react-mobx-starter

安装所需模块

引入 Mobx 和 React Router，它们将分别用于状态管理和路由功能：

npm install mobx react-router-dom

配置构建工具

使用 Babel 和 webpack 将 ES6 代码编译成浏览器可识别的代码。在 package.json 文件中添加以下内容：

"babel": {
  "presets": ["@babel/preset-env", "@babel/preset-react"]
},
"scripts": {
  "start": "webpack-dev-server --open",
  "build": "webpack --mode production"
}

配置 Mobx

在项目根目录创建 store.js 文件，并添加以下内容：

import { observable, action } from "mobx";

class Store {
  @observable count = 0;

  @action
  increment() {
    this.count++;
  }
}

export default new Store();

配置 React Router

在 App.js 文件中添加以下内容：

import React, { useState } from "react";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

import store from "./store";

const App = () => {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Switch>
          <Route path="/about">
            <h1>About</h1>
          </Route>
          <Route path="/">
            <h1>Home</h1>
            <p>Count: {store.count}</p>
            <button onClick={store.increment}>+</button>
          </Route>
        </Switch>
      </div>
    </Router>
  );
};

export default App;