搭建React项目

2024年12月30日 · 阅读需 5 分钟

阅读量: 101 阅读人次: 102

amass

一个正在躺平的板砖人

在很久以前，无意中接触到了 React，一直很喜欢它。工作中应该是用不到它了，但是一直想怎么去了解它。Web 前端开发中各种脚手架方便了入门使用，也屏蔽了太多东西。

多亏了现在 GPT 的强大以及 Google 良好的搜索能力，让我得以记录如何从0搭建一个 React Demo。

搭建项目

首先，需要安装 Node.js。

然后，创建项目文件夹（这里我们以 ReactDemo 为例）。进入项目文件夹，然后执行 npm init，它会引导你输入一系列信息创建项目，并最终生成 package.json 文件：

{
  "name": "reactdemo",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "description": ""
}

安装 webpack 相关依赖：

npm install webpack webpack-cli webpack-dev-server

webpack：构建工具
webpack-cli：命令行运行 webpack 的工具
webpack-dev-server：开发服务器

安装 webpack 依赖完成之后，package.json 会新增 dependencies 字段，记录依赖库及对应版本号：

{
  // ......
  "dependencies": {
    "webpack": "^5.97.1",
    "webpack-cli": "^6.0.1",
    "webpack-dev-server": "^5.2.0"
  }
  // ......
}

安装 Babel 相关依赖：

npm install babel-loader @babel/preset-env @babel/core @babel/plugin-transform-runtime \
	@babel/preset-react @babel/runtime @babel/cli

babel-loader：webpack 的加载器（loader），用于将 JavaScript 代码通过 Babel 进行转换。
@babel/preset-env：让我们可以使用最新的 JavaScript，而不用当心老版本的浏览器不兼容新ES标准。
@babel/core：Babel 的核心模块，它是 babel 编译器的主要部分。
@babel/plugin-transform-runtime：支持重复使用 Babel 注入的辅助代码以节省代码大小。
@babel/preset-react：Babel 的一个预设（preset），用于转换 React 中的 JSX 语法。
@babel/runtime：包含 polyfill 和许多其他 Babel 可以引用的包。
@babel/cli：支持通过命令行运行 babel

安装 react 和 react-dom：

npm install react react-dom

在项目根目录下创建 public 文件夹，然后在该文件夹下创建 index.html 文件，在该文件添加如下内容：

<body>
    <div id="root"></div>
</body>
<script src="/main.js"></script>

在项目根目录下创建 src 文件夹，然后在该文件夹下创建 App.jsx 文件，在该文件添加如下内容：

import React from "react";

export default function App() {
    return (
        <h1>
            从 Webpack 和 Babel 开始搭建 React 项目
        </h1>
    )
}

在项目根目录下（或其他位置）创建 index.jsx，它将作为 webpack 的入口点（Entry Point）。在该文件添加如下内容：

import React from "react";
import { createRoot } from 'react-dom/client';
import App from "./src/App.jsx"

const root = createRoot(document.getElementById('root'));
root.render(<App />);

在项目根目录下创建一个名为 webpack.config.js 的文件并添加以下代码。此文件包含负责将代码文件打包为单个文件，以及设置开发服务器的配置。

const path = require("path");

module.exports = {
    mode: "development", // or "production",
    entry: "./index.jsx",
    output: {
        path: path.resolve(__dirname, "public"),
        filename: "main.js"
    },
    target: "web",
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'),
        },
        host: "127.0.0.1",
        port: "9000",
        open: true,
        hot: true,
        liveReload: true
    },
    resolve: {
        extensions: ['.js', '.jsx', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-react"]
                }
            }
        ]
    }
}

更新 package.json 文件：

{
  // ...
  "scripts": {
    "start": "webpack-dev-server .",
    "build": "webpack .",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  // ...
}

安装 React Router：

npm install react-router

安装 MUI：

npm install @mui/material @emotion/react @emotion/styled

减小打包体积

通过代码分割（Code Splitting）减小文件体积

React 项目通常会构建成一个庞大的 JavaScript 包，特别是当项目规模较大时。代码分割可以将你的应用拆分成更小的、按需加载的 chunk。

使用 React.lazy()、<Suspense/> 进行组件级代码分割：

import React, { lazy, Suspense } from "react";

const Demo = lazy(() => import("./Demo"))
export default function App() {
    return (
        <div>
            <h1>
                从 Webpack 和 Babel 开始搭建 React 项目
            </h1>
            <Suspense fallback="加载中...">
                <Demo />
            </Suspense>
        </div>
    )
}

上述方法，在页面路由下使用也非常有效，避免代码一次性加载的问题。

状态管理

将 useContext 与 useReducer 结合使用是一种强大的状态管理模式，类似于 React Redux，但更简单。

搭建项目​

减小打包体积​

状态管理​

搭建项目

减小打包体积

状态管理