How to integrate ReactJS with Redux and Spring mVC - spring

Question

I am a newbiew of ReactJS. Before, I used ReactJS for my company's project but actually that project has configurated by somone. I just apply what I know about Reactjs into project such as : state, props, component, apply redux.....
But , now I want to create a project by myself step by step. In that I can use reactjs integrate redux to manage state for using data and Spring is server in RESTfull standard and combine with JPA
Please help me

Answer 1

You can integrate spring and react js using 2 approaches
You can do it by making an isomorphic web app which uses nashorn engine(jdk8).
You can use pusher api(I have used pusher api in my app)
As i can not explain the full working here,here are tutorials for reference
using pusher api
isomorphic wb app

Answer 2

There is no simple answer.
You can use maven plugin https://github.com/eirslett/frontend-maven-plugin
Add to your pom.xml something like this
<plugin>
<groupId>com.github.eirslett</groupId>
<artifactId>frontend-maven-plugin</artifactId>
<version>1.2</version>
<configuration>
<installDirectory>target</installDirectory>
</configuration>
<executions>
<execution>
<id>install node and npm</id>
<goals>
<goal>install-node-and-npm</goal>
</goals>
<configuration>
<nodeVersion>v4.4.5</nodeVersion>
<npmVersion>3.9.2</npmVersion>
</configuration>
</execution>
<execution>
<id>npm install</id>
<goals>
<goal>npm</goal>
</goals>
<configuration>
<arguments>install</arguments>
</configuration>
</execution>
<execution>
<id>webpack build</id>
<goals>
<goal>webpack</goal>
</goals>
</execution>
</executions>
</plugin>
and you need to add package.json like this
{
"dependencies": {
"react": "^15.4.2",
"react-dom": "^15.4.2",
"requirejs": "^2.3.2"
},
"devDependencies": {
"babel-core": "^6.22.1",
"babel-loader": "^6.2.10",
"babel-plugin-transform-regenerator": "^6.22.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.22.0",
"babel-preset-stage-0": "^6.22.0",
"react-frame-component": "^0.6.6",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.3.0"
},
"scripts": {
"start": "webpack-dev-server --progress --inline --hot",
"build": "webpack -d"
}
}
But list of dependenccies is yours
And you need webpack.config.js something like this
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,
output: {
path: __dirname,
filename: './src/main/resources/static/built/bundle.js',
publicPath: 'http://localhost:3000/'
},
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
}
}
};