ReactJS在使用angularJS客户端之前,我是的新手。但现在我想将其与上的当前应用程序集成SpringMVC。现在,我想集成ReactJS为客户端,而不是angularJS,请帮助我。如果有任何示例,请帮助。我正在使用eclipse ide。
ReactJS
angularJS
SpringMVC
eclipse ide
尝试创建一个视图(jsp / html / xhtml)并将UI构建输出链接到该视图。您可以将 webpack 用作UI(React)的构建工具,该工具将返回捆绑文件。
然后可以将其包含在内以使用脚本标签进行查看。请注意,您可以使用webpack-dev-server进行UI开发,并尝试使用Proxy来使用spring- mvc服务。它是推荐的方式。如果您使用 Maven 作为Java的构建工具,则可以使用包含webapp下所有JS的文件夹。
webpack参考:https ://webpack.js.org/
示例 Webpack.config.js 供参考。
const ExtractTextPlugin = require('extract-text-webpack-plugin'); const path = require('path'); const webpack = require('webpack'); module.exports = { entry: { main: './src/scripts/main.js', engine: './src/scripts/engine/Engine.js', debugger: './src/scripts/debug/Debugmain.js', client: './src/scripts/clientcode/Client.js' }, output: { path: path.resolve('./dist/client'), filename: '[name].js', publicPath: '/dist/client/', chunkFilename: '[name].js' }, devtool: 'inline-sourcemap', cache: true, resolve: { alias: { ByteBuffer: 'bytebuffer' } }, module: { rules: [ { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'react-hot-loader' }, { test: /\.js$/, exclude: /(node_modules|bower_components)/, loader: 'babel-loader', query: { cacheDirectory: true, presets: ['react', 'es2015'], compact: false } }, { enforce: 'pre', test: /\.(js|jsx)$/, exclude: /node_modules/, include: [path.join(__dirname, './src', 'scripts')], loader: 'eslint-loader' }, { test: /\.less$/, loader: ExtractTextPlugin.extract({ fallback: 'style-loader', loader: 'css-loader?sourceMap!less-loader?sourceMap' }) }, { test: /\.(eot|woff|woff2|ttf|otf|png|jpg)$/, loader: 'file-loader?name=images/[name].[ext]' } ] }, devServer: { port: 8080, stats: 'errors-only', proxy: { '/api': { target: 'http://localhost:20404', //http://localhost:20403/', secure: false } }, historyApiFallback: { index: 'debug.html' } }, plugins: [ new ExtractTextPlugin({ filename: './styles/main.css', allChunks: true }) ], resolve: { modules: ['src/scripts', 'node_modules'], extensions: ['.jsx', '.js'], unsafeCache: true, alias: { components: path.resolve(__dirname, 'src', 'scripts', 'components'), routes: path.resolve(__dirname, '.', 'routes'), draggable_tab: path.resolve(__dirname, 'src', 'scripts', 'lib'), utils: path.resolve(__dirname, 'src', 'scripts', 'utils'), engine: path.resolve(__dirname, 'src', 'scripts', 'engine') } } };