在java spring mvc中运行react js时出现问题_Java_Reactjs_Spring_Spring Mvc

在java spring mvc中运行react js时出现问题

java reactjs spring spring-mvc

在java spring mvc中运行react js时出现问题,java,reactjs,spring,spring-mvc,Java,Reactjs,Spring,Spring Mvc,我正在学习使用React，并希望在SpringBoot应用程序中使用它，但我似乎无法让它正常工作。我可以使用SpringMVC创建一个网站，也可以在上面执行JavaScript代码（没有React，JSX）。但我就是不知道如何使用使用React的JavaScript代码到目前为止，我的工作是…… 具有Spring MVC后端的网站在此网站上执行javascript代码使用maven构建应用程序的jar 使用CreateReact应用程序工具在我的spring项目中创建React项目使

我正在学习使用React，并希望在SpringBoot应用程序中使用它，但我似乎无法让它正常工作。
我可以使用SpringMVC创建一个网站，也可以在上面执行JavaScript代码（没有React，JSX）。但我就是不知道如何使用使用React的JavaScript代码

到目前为止，我的工作是……

具有Spring MVC后端的网站
在此网站上执行javascript代码
使用maven构建应用程序的jar
使用CreateReact应用程序工具在我的spring项目中创建React项目
使用maven插件编译React代码（如下）（或者至少我认为它正在工作，因为maven说构建成功了）
在浏览器中加载React js脚本

不起作用的是…

在浏览器中执行React js脚本或调试脚本

我想要执行的简单代码如下所示：test.js

从“React”导入React；
从“react dom”导入react dom；
导出默认函数TestComponent（）{
返回
你好
;
}
调试器；
ReactDOM.render（，document.getElementById（'hello_there'）；
警惕（“你好！”；

它应该只是在html文件中添加一些文本，以显示它正在工作，但它没有。html（thymeleaf）文件如下所示：home.html


Go服务器-JF游戏
JFG-Go服务器（WIP）

我的Spring项目如下所示：

并使用以下pom.xml进行构建：


4.0.0
org.springframework.boot


现在，当在浏览器（firefox 72.0.2（64位））中打开网站并使用开发人员工具时，我可以看到脚本已加载，甚至可以看到脚本代码：

但奇怪的是，我似乎无法调试该文件，甚至无法在调试器中找到该文件

。。。尽管它已加载，甚至似乎已被执行，因为开发人员工具在脚本的第一行（上图）中显示错误。

对我来说也有点奇怪的是，我在浏览器中看到的脚本（test.js）（从开发工具的“网络”选项卡打开它时）正好显示了test.js文件中的react代码。我希望它被编译成ES5，但我对反应非常陌生，所以我真的不知道这是一个问题还是一个预期的行为
因此，基本上问题在于我无法调试javascript/React代码，无论我加载的文件是否正确，甚至编译的文件是否正确，我都不是舒尔（因为我是React新手）。事实上，我不知道这里发生了什么，可能是什么问题。

因此，任何帮助都会很好。
这里的问题似乎是您希望通过在构建中创建react app来运行javascript输出，但实际上，您只是在运行src/main/app/public
目录中的静态文件test.js

createreact应用程序根本没有触及这个test.js
文件，所以您是对的，它没有被编译到ES5，只是按原样静态地提供服务。您在Firefox中看到的错误正是由于此-它无法处理import
语句（直接修复这一问题是一个单独的问题，我在这里不赘述，但基本上您不会在create-react-app编译代码中遇到此问题，因为它将被捆绑并传输到ES5）
只有入口点位于src/main/app/src/index.js
的代码才会由create-react-app编译，事实上是这样，然后根据pom.xml
配置复制到target/classes/static/static/{bundle files}.js

您要做的是链接到那些createreact应用程序生成的捆绑文件，而不是这个test.js
文件。这些构建包包含的任何代码都可以正常运行。现在还不清楚test.js的作用是什么，但总而言之，它根本没有被编译，这就是错误的原因，与React本身无关。您应该删除它并链接到您的create-react-app生成的捆绑包。
这里的问题似乎是您希望通过在构建中运行create-react-app来运行javascript输出，但实际上，您只是在运行一个静态文件test.js
，它位于src/main/app/public
目录中
createreact应用程序根本没有触及这个test.js
文件，所以您是对的，它没有被编译到ES5，只是按原样静态地提供服务。您在Firefox中看到的错误正是由于此-它无法处理import
语句（直接修复这一问题是一个单独的问题，我在这里不赘述，但基本上您不会在create-react-app编译代码中遇到此问题，因为它将被捆绑并传输到ES5）
只有入口点位于src/main/app/src/index.js
的代码才会由create-react-app编译，事实上是这样，然后根据pom.xml
配置复制到target/classes/static/static/{bundle files}.js

您要做的是链接到那些createreact应用程序生成的捆绑文件，而不是这个test.js
文件。这些构建包包含的任何代码都可以正常运行。现在还不清楚test.js的作用是什么，但总而言之，它根本没有被编译，这就是错误的原因，与React本身无关。你应该删除它并链接到创建react应用程序生成的捆绑包。
我已经克隆了你的项目，但是没有JSX，没有前端maven插件，没有react。也许你签出了错误的分支？在树枝上
import React from "react";
import ReactDOM from "react-dom";

export default function TestComponent() {
    return <div>
        <p>Hello There!</p>
    </div>;
}

debugger;

ReactDOM.render(<TestComponent />, document.getElementById('hello_there'));
alert("Hello There!");

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Go Server - JFabricationGames</title>
</head>
<body>
    <h1>JFG - Go Server (WIP)</h1>
    <img th:src="@{images/welcome.png}" width=500 />
    <br>
    <a th:href="@{/login}">Login</a>

    <div id="hello_there"></div>
    <div id="hello_there_2"></div>
    <script src="test.js"></script>
    <!-- <script src="test_no_react.js"></script> -->
</body>
</html>

<?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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.2.4.RELEASE</version>
        <relativePath /> <!-- lookup parent from repository -->
    </parent>
    <groupId>net.jfabricationgames</groupId>
    <artifactId>go_server_spring</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>go_server_spring</name>
    <description>A Go Server</description>

    <properties>
        <java.version>1.8</java.version>

        <frontend-src-dir>${project.basedir}/src/main/app</frontend-src-dir>
        <node.version>v12.3.1</node.version>
        <yarn.version>v1.16.0</yarn.version>
        <frontend-maven-plugin.version>1.7.6</frontend-maven-plugin.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
            <scope>runtime</scope>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
            <exclusions>
                <exclusion>
                    <groupId>org.junit.vintage</groupId>
                    <artifactId>junit-vintage-engine</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>

            <plugin>
                <groupId>com.github.eirslett</groupId>
                <artifactId>frontend-maven-plugin</artifactId>
                <version>${frontend-maven-plugin.version}</version>

                <configuration>
                    <nodeVersion>${node.version}</nodeVersion>
                    <yarnVersion>${yarn.version}</yarnVersion>
                    <workingDirectory>${frontend-src-dir}</workingDirectory>
                    <installDirectory>${project.build.directory}</installDirectory>
                </configuration>

                <executions>
                    <execution>
                        <id>install-frontend-tools</id>
                        <goals>
                            <goal>install-node-and-yarn</goal>
                        </goals>
                    </execution>

                    <execution>
                        <id>yarn-install</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <configuration>
                            <arguments>install</arguments>
                        </configuration>
                    </execution>

                    <execution>
                        <id>build-frontend</id>
                        <goals>
                            <goal>yarn</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <arguments>build</arguments>
                        </configuration>
                    </execution>
                </executions>
            </plugin>

            <plugin>
                <artifactId>maven-resources-plugin</artifactId>
                <executions>
                    <execution>
                        <id>position-react-build</id>
                        <goals>
                            <goal>copy-resources</goal>
                        </goals>
                        <phase>prepare-package</phase>
                        <configuration>
                            <outputDirectory>${project.build.outputDirectory}/static</outputDirectory>
                            <resources>
                                <resource>
                                    <directory>${frontend-src-dir}/build</directory>
                                    <filtering>false</filtering>
                                </resource>
                            </resources>
                        </configuration>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>
</project>