从事件驱动转向数据驱动,记录一次旧系统改造UI过程【补充】

概要

避免篇幅过大，作为【从事件驱动转向数据驱动,记录一次旧系统改造UI过程】文中提到的基础内容补充；

搭建react项目

步骤 1: 搭建 React 开发环境
在本地环境中创建一个新的 React 应用。你可以使用 create-react-app 来快速开始：

npx create-react-app my-react-app
cd my-react-app
npm start

步骤 2: 开发 React 组件
开发你的 React 组件，确保它们可以独立工作，并且与旧的JSP页面逻辑分离。

步骤 3: 构建 React 应用
当你的 React 应用开发完成后，你可以构建生产版本的文件：
npm run build
这将在 build 文件夹中生成静态文件，包括 HTML、CSS 和 JavaScript 文件。

搭建Maven Spring MVC Demo项目

步骤 1: 打开 IntelliJ IDEA 并创建新项目

打开 IntelliJ IDEA。
选择 “File” > “New” > “Project…”。
步骤 2: 选择项目类型
在弹出的 “New Project” 窗口中，选择 “Maven” 作为项目类型。
确保 “Create from archetype” 选项未被选中（除非你想使用特定的 Maven 架构原型）。
点击 “Next”。
步骤 3: 设置项目信息
输入 “GroupId”（通常是你的组织或公司的域名反转，例如 com.example）。
输入 “ArtifactId”（你的项目名称，例如 my-springmvc-app）。
选择项目版本（如果不确定，可以保留默认值）。
点击 “Next”。
步骤 4: 选择项目位置
选择项目存储的位置。
点击 “Finish”。
步骤 5: 添加 Spring MVC 依赖
IntelliJ IDEA 将创建项目并打开 pom.xml 文件。
在 pom.xml 文件中，添加 Spring MVC 的依赖项

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>org.example</groupId>
    <artifactId>springmvc-demo</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <properties>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    </properties>
    <dependencies>
        <!-- Spring MVC -->
        <dependency>
            <groupId>org.springframework</groupId>
            <artifactId>spring-webmvc</artifactId>
            <version>5.3.25</version>
        </dependency>

        <!-- Servlet API -->
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>4.0.1</version>
            <