React JS, is the versatile front-end library for building user interfaces based on UI components and is very helpful in making web applications as well as mobile applications.
React adheres to the declarative programming paradigm and is in contrast with imperative programming.
Today, we are going to share how we can use React with any existing old project without having any disturbance in current development.
A few months ago, we were working on one old AngularJS-based project and the client asked to upgrade the project with the latest frameworks like ReactJS/VueJS/Angular.
However, we were stuck with a problem in that we were already in mid of one major long task and the client was in a hurry. It was a situation of doing or dying, but we overcame it by merging ReactJS.
Stay in the blog, and you will get to know how we managed to upgrade from AngularJS to ReactJS and what issues we faced while implementing the requirement — 👇
Challenges Faced while Merging React.js with Angular-
While upgrading the project, the following were the problems that we faced-
- The project manuscript was ancient, written in AngularJS (1.X version).
- The ongoing development tasks were almost 60–70% complete.
- The project delivery timeline was getting closer, so we needed to be quick.
Because of the aforementioned points, we were not in a position to set up a new project and start everything from scratch, as it would’ve taken a lot of time and affected existing and running tasks.
Solution-
After analyzing the situation and looking over multiple options, we decided to use ReactJS parallelly with AngularJS and started implementing all new features in React and eventually moved completely onto that.
Why React?
ReactJS is an open source Library, and that too is the simplest in the current avant-garde technologies.
We can easily include ReactJS in any website by using script tags or installing react package in case of using any build tool like webpack.
Integration of React.js with Angular
We hope that now you have understood why ReactJS, was the best choice at that moment. So, now without wasting time, lets me show you how we integrated React with the existing AngularJS project with small configurations.
If you want to skip the explanation and directly want to see the implementation, you can check this sample git repository.
So, let me first share the screenshot of the folder structure so that we all are on the same page-
👉 Set up Webpack and ESLint
We used webpack to configure the dev server and create a build so that developers can feel like they are working with ReactJS only. 😃
To set up webpack-
✔ Install webpack and eslint-related dependency (you can check the dependency from the sample repository’s package.json)
✔ Create 3 configuration files -
-
webpack.config.dev.js : Include common config + dev server-related configurations.
-
webpack.config.common.js : Add all common webpack configurations including main file, eslint config, plugins, rules for JS/JSX/SCSS files
-
webpack.config.prod.js : Include common config + build related configurations
👉 Root Files (Main.js & index.ejs)
After Webpack and eslint configuration, let’s create one JS file where we include all our AngularJS files like app.js, controllers, directives, scss files … etc.
Ex: main.js {You can check the main.jsfile content here}
This is our main file (Don’t forget to add webpack.common.js as an entry point).
Now let’s create one index.ejs file used to generate dynamic index.html with newly build files, you can also check the index.ejs file content.
👉 Configure and Render React Components
To configure React.js with Angular project-
- First install react dependency using npm (you can check the dependency from the sample repository’s package.json)
- After installing the dependency, create one react component, i.e. Login Component.
- Now we will create one common directive according to this path- /src/directives/react-page.directive.js
This is our main directive which will take the id, pageName, and based on the respective page. It will render react components, will create some custom events to check whenever the theme/language will change, and then will re-render the component.
We can also pass props or methods instances to react from AngularJS. Refer to manage-todo.directive.js file for the same.
Conclusion
This was the whole process of integrating React.js with Angular. The same approach can be used to integrate ReactJS with other projects as well based on JQuery, vanilla JS, or any other JavaScript framework.
To learn more, you can also check how to create custom web components using VanillaJS with Life Cycle.
Let us know if you want to learn more about webpack configurations and react build configurations, we will surely make one blog on that as well.