Springboot + WebJars + React : HelloWorld 项目

SpringBoot整合WebJars与React

最新推荐文章于 2023-12-31 12:34:24 发布

原创最新推荐文章于 2023-12-31 12:34:24 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

Spring Boot 同时被 3 个专栏收录

103 篇文章

订阅专栏

Spring Web

65 篇文章

订阅专栏

React

25 篇文章

订阅专栏

本文介绍如何使用SpringBoot、WebJars和React构建高效Web应用，通过Maven项目示例，展示了如何配置pom.xml引入所需依赖，如React、React-DOM等，并在静态HTML中使用JSX语法和Babel实现React组件的直接渲染。

作为Java程序员，某些情况下，我们需要React和ES6严谨并且快速地表达一些原型思想。这种情况下，全套的类似npm+webpack这种工具栈略显厚重，完全使用原生Javascript或者jQuery表达逻辑又显得过于底层和零碎。这个时候，我们可以考虑使用Springboot + WebJars + React。该组合有如下好处 :

目标web应用可以以jar包方式独立部署和运行；
使用WebJars方式管理三方JavaScript包，避免琐碎易错的手工管理;
前后端开发在同一个开发项目内完成;
ES6模块化使JavaScript跟Java语言有更多相似，对Java开发者更友好；
React组件能力+JSX让你从琐碎底层的Javascript+DOM操作细节上解脱出来，专注于业务要素；

现在，我们分享一下源代码。需要先说明的一点是，这是一个maven项目。

`pom.xml`

<?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>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.1.4.RELEASE</version>
    </parent>
    <groupId>com.andy</groupId>
    <artifactId>springboot-webjar-react-demo</artifactId>
    <version>0.0.1</version>

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

    <dependencies>
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>react</artifactId>
            <version>16.8.5</version>
        </dependency>
        <dependency>
            <groupId>org.webjars.npm</groupId>
            <artifactId>react-dom</artifactId>
            <version>16.8.5</version>
        </dependency>
        <dependency>
            <groupId>org.webjars.bower</groupId>
            <artifactId>babel</artifactId>
            <version>5.8.38</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>jquery</artifactId>
            <version>3.4.0</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>bootstrap</artifactId>
            <version>4.3.1</version>
        </dependency>
        <dependency>
            <groupId>org.webjars</groupId>
            <artifactId>webjars-locator</artifactId>
            <version>0.30</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
    </dependencies>

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

</project>

对该项目的一些解释 :

使用 spring-boot 2.1.4;
使用spring-boot-starter-web声明这是一个web项目，缺省使用内置tomcat在8080端口提供服务;
引入react/react-dom webjars，这是ReactJS web开发必须可少的本尊；
引入bootstrap webjar用于css效果演示；
因为bootstrap潜在依赖于jquery,所以也引入了jquery webjar；
因为浏览器并不能理解JSX语法，所以需要引入babel webjar;
引入webjars-locator，这样HTML文件中三方库引入时可以省略版本信息；

`SpringBoot Java`入口程序

package com.andy.webJarWebDemo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoWebApplication {

    public static void main(String[] args) {
        SpringApplication.run(DemoWebApplication.class, args);
    }

}

前端 `React` 应用

入口页面 `resources/static/index.html`

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="/webjars/jquery/jquery.min.js"></script>
    <script src="/webjars/bootstrap/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/webjars/bootstrap/css/bootstrap.min.css"/>
    <script src="/webjars/react/umd/react.production.min.js"></script>
    <script src="/webjars/react-dom/umd/react-dom.production.min.js"></script>
    <script src="/webjars/babel/browser.min.js"></script>
    <script type="text/babel" src="./app.jsx"></script>
    <title>Springboot WebJars ReactJS -- Hello World</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

对本入口文件的一些说明 :

使用 resources/static/index.html是因为Spring MVC会自动将其映射到/;
注意上面./app.jsx的脚本内容语法实际上是JSX,所以type必须为text/babel以确保浏览器可以理解；
注意上面./app.jsx中的前缀./不能省略；
注意id为root的HTML元素div,这是跟下面React应用组件代码的连接点；

`React`应用组件 `resources/static/app.jsx`

class App extends React.Component {
    render() {
        return (<div className="jumbotron jumbotron-fluid">
            <div className="container">
                <h1 className="display-4">Hello World</h1>
                <p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its
                    parent.</p>
                <a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
            </div>
        </div>);
    }
}

// ========================================

ReactDOM.render(<App/>, document.getElementById('root'));