This guide is going to help you when migrating from JSP based web application to a reactJS single page application. It gives details of all the available tools that will make the migration fast and easy. It will also help in understanding various conventions that are different in client-server architecture than the traditional server-based application.
Development Environment Setup
Starting from scratch and setting up a new react project is a painful experience so there are tools available to alleviate this pain.
- Webpack vs Create-react-app
React app does not need webpack and can be run all alone but there many advantages of using webpack which cannot be ignored. Webpack is a module bundler and runs only during development and not when the page actually loads in the browser. Here’s a list of task that webpack does during the development.
- Development server: webpack provides its own development server so that the development can be done inside the actual server-like environment. Eventually, everything will run inside a server.
- Hot Module replacement: add or remove modules when the application is running without a full reload.
Webpack is not simple. It can be confusing many a time. Create-react-app comes for the rescue during such cases. Its very handy during the initial setup of a new react app. It also provides abstraction over the entire webpack configuration. So that you don’t have to manually configure webpack settings. The only drawback would be you don’t have control over what is happening behind the scenes. But again you can eject out anytime and switch to manual configuration. For beginners, it always good to start with create-react-app and than later switch to webpack once you get familiar with all the webpack configuration stuff.
Getting started with create-react-app is pretty simple. You need to have npm (node package manager) or yarn installed. Then run the following command:
- “npm install create-react-app”: it will install the react script in your machine.
- “create-react-app <project_name> “ : it will create the project with all the default configuration and folder structure.
- Switch to your project root and then run “npm start”. This is going to start the react app in development server.
- Note that the entire webpack configurations are done behind the scene and you have no control over it. In order to take control of webpack configuration run “npm eject”. This is a one-time command and cannot be reverted. It will create all the webpack configuration files and you can change them as per requirement.
Convert Spring controller to RESTful API
Unlike the spring MVC where the view is also served from the server side react js app follows client-server architecture where all the view resides on the client side and business data is fetched from the server. So the first thing that needs to be done is to change the server side controller to return json response and not the JSP view pages. The client will make ajax calls to get the data from the server.