ReactJをEclipse MVCと統合する方法

Question

ReactJSの新機能です。私はクライアント側にangularJSを使用しています。しかし、今私はそれをSpringMVCの現在のアプリケーションと統合したいと思います。今私はクライアント側としてReactJSをangularJSの代わりに統合したいと考えています。例があれば助けてください。私はeclipse ideを使用しています。

Answer 1

ビュー（jsp/html/xhtml）を作成して、UIビルドの出力をそのビューにリンクしてみてください。バンドルファイルを返すUI（React）のビルドツールとしてwebpackを使用することができます。

スクリプトタグを使用して表示することができます。 UIの開発にwebpack-dev-serverを使用し、Proxyを使用してspring-mvcサービスを使用しようとすることに注意してください。それはお勧めの方法です。 Webアプリケーションの下にあるすべてのJSを含むフォルダは、JavaのビルドツールとしてMavenを使用する場合に使用できます。

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') 
     } 
    } 
};