React in MVC application

What is it? I believe you are questioning and this question is because it is uncommon to use react.js this way, in majority the application all frontend is built using react.js and consume api REST.

So, let's go, react.js in MVC application, before getting out utilizing some technology needs to understand the finality and situation more suitable to apply.

Imagine the following situation: the company has MVC application and this application has more than 2 years life, many things already made and you have many feature for build, using jquery will easily the build the feature until react.js is came, where is a lot easily build feature has many interactions. So understand the benefits the react.js you present to your company, all stay interesting, but the company has many things that are necessary to change to react.js. Because there are many things to change, the company denies adoption of react.js.

Many times we programmers stay get excited the technologies and we want apply this technologies all places, but when we working in some company is necessary analyses some points with: community of technology, adoptions the technology per persons, impact the adoption this technology in application, finance impact the adoption this technology and benefits the adoption this technology to the company.

I believe this approach to use of react.js in MVC applications is interesting, because it prevents many changes in application to apply this technology. This way the programmer stays happy per work using new technology and company too, because the productivity rises.

Ok, I speak a lot but show nothing, so, let’s go. Image below is the project structure that I created to explain this approach.

Details about folder structure:

• Directory componentsReact is where react.js code. OBS: directory name is different, this does not affect anything.
• Directory src where find application web code node.js.
• Directory public where find js and css files.
• Directory views where find applications page. Now we go into the deep react.js code part. The image below show settings of webpack:

Summary the webpack.config.js file working the following way:

• The entry is entry file used per webpack to generate bundle.js
• The output is section where settings where webpack to generate bundle.js and put within public directory to use more later in views directory.
• When generate bundle.js code is set library variable and attributed bundle.js code to this variable
• The module is a section where has rules and loaders necessary to webpack handler javascript new versions and css code in react.js components.
• In ./src/index.js file inside componentsReact directory necessary stay this way:

Let’s go, explain image above:

• You saw there exist two functions renderLoging and renderLogout both have parameters, the container receive element html id where I inject react component into, already seconds params receive one object where is passed with props to react component.
• In the end file export functions that were added in bundle.js file.
• You must stay thinking about how to render the react component on one page. The image below shows how to make this:

Summary what is happening here:

• Import bundle.js file in page.
• After create script block where call variable defined in webpack.config.js that has two function exported. In line 45 is called renderLogin function passing information.

The result is:

One thing important is http requests made per react.js, no necessary implement jwt authentication with jwt token, because when javascript makes a request the same domain automatically sends cookies in request this way you can identify the user authenticated per session.

Case you have interesting about the project used, link of repository here: link of github

Summary:

In this post I want to pass one approach different from how to use react.js. Another thing I believe has passed is technology is tools and you need to analyze the impact that it can cause in application.

In this example I use application node.js, but you can use this approach to applications laravel, spring, ruby on rails, etc