如何将ReactJS与spring Boot集成

时间:2017-07-27 10:25:19

标签: java spring maven reactjs spring-boot

他在那里, 我想将 ReactJS Spring-boot maven 集成,但我不知道如何! 我可以使用npm来安装它,但我不知道我会做什么

npm init

npm install --save react react-dom

2 个答案:

答案 0 :(得分:5)

请参阅development version

您应该将这样的内容添加到您的pom.xml文件

var path = require('path');
var webpack = require('webpack');
var packageJSON = require('./package.json');

module.exports = {
    entry: [
              'webpack/hot/only-dev-server',
              './src/main/resources/static/App.js'],
    devtool: 'sourcemaps',
    cache: true,
//    debug: true,
    output: {
        path: __dirname,
        filename: './src/main/resources/static/built/bundle.js',
        publicPath: 'http://localhost:8080/yourServletContextHere'
    },
    resolve: {extensions: ['.js', '.jsx']},
    plugins: [
               new webpack.HotModuleReplacementPlugin()
               ,new webpack.LoaderOptionsPlugin({
                     debug: true
                   })
        ],
    module: {
        loaders: [
            {
                test: path.join(__dirname, '.'),
                exclude: /(node_modules)/,
                loader: 'babel-loader',
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            },

        ]
    },
    devServer: {
            noInfo: false,
            quiet: false,
            lazy: false,
            watchOptions: {
                poll: true
           }
        }
};

应该有webpack.config.js和package.json以及pom.xml 而webpack就是这样的

$('#msform').bootstrapValidator({
        // To use feedback icons, ensure that you use Bootstrap v3.1.0 or later
        feedbackIcons: {
            valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
        DocumentType: {
            validators: {
                        notEmpty: {
                            message: 'Select an option !!'
                        }
                    }
        }
    }
});

答案 1 :(得分:1)

从春天开始浏览这个存储库。这里的项目使用React + SpringBoot + WebpackV1

https://github.com/spring-guides/tut-react-and-spring-data-rest

以下是上述存储库的实际教程,请仔细阅读其中的解释。 https://spring.io/guides/tutorials/react-and-spring-data-rest/