React is a great front-end library where the concepts are easy to grasp such as state and components, but it can be confusing, a little bit difficult to integrate without the use of boilerplate like create-react-app.
According to the official page, React serves as a “V” in MVC. I’ve been trying to scratch my head for years before I got the concept and how can I integrate it gracefully in my existing ASP.net MVC app.
A lot (or some) of you may be wondering about how we can integrate ReactJS into ASP.net MVC app for the longest time. I actually wondered about that myself as well since my tech stack revolves around .net ecosystem until I learned how to make use and integrate it the hard way.
Like you, I digged deeper into the rabbit hole till I found the answer by learning the front-end ecosystems surrounding React, etc.
Having found the solution, let us answer how we can integrate ReactJS in our existing ASP.net MVC app:
Ways to integrate ReactJS in ASP.net MVC
As some of you might have know already, there are a couple of ways we can integrate ReactJS in our existing ASP.net MVC projects. Here they are:
Importing the React script
This is by far the easiest approach among the three, but you won’t be able to utilize JSX syntax with this method. You’re going to use plain javascript methods to construct your own React components.
So it’s up to you to use this method or not. You can find the cdn links here to get started with React right away.
Using ReactJS.net
ReactJS.net is a .net library that allows you to make use of JSX syntax on the fly by installing it via nuget package. You can find it here.
Using Webpack and Babel
Last but not the least is integrating through the use of webpack and babel.
This is by far is my favorite method of integrating the front-end library to our existing ASP.net MVC app as it’s flexible, customizable, and we can tune the performance of React at will through the use of webpack.
Personally, I prefer this method over the two. Here’s why:
Have better controls on the juicy stuffs of javascript ecosystem – Things like ES8, dynamically import ES modules, new React syntax definitions, etc. I feel like I’m missing a lot in javascript ecosystem without having to know how to make use of webpack. And since you can customize everything yourself, you can have the latest features of ECMAScript as you like at your fingertips.
Customizable scripts – Allows you to customize how webpack should compile/transpile React source code efficiently with less bloatware.
Better Separation of Concerns for React components and MVC – What I appreciate most in using webpack and babel is the fact that I have better controls on how can I separate React components from MVC structure of ASP.net. Although you might be able to achieve this using ReactJS.net as I haven’t used it.
Improve script performance – One of my favorite things about webpack is its ability to optimize and improve the performance of the script bundle. React just simply gets attached to the DOM once loaded, so you could imagine how expensive this operation is since it loads all components and scripts associated with that React DOM. And that’s where the script performance optimization of webpack comes into play.
Improve your knowledge in javascript ecosystem – This is by far the main reason why I learned webpack and babel down to my core is also because to strengthen my knowledge in javascript ecosystem. This allows me to grasp the front-end side of things and improve the loading speed.
We are going to use this method for the most part. If you have no knowledge in webpack and babel, don’t worry. We won’t delve deeper into these tools but just scratch the surface enough for you to understand the basics and integrate React into ASP.net MVC projects with less hassle.