How to append React in Available .NET Core Web Application

Hello my friends,

I will try to explain ‘How to append React in available .NET Core Web Application’ in this post.

Firstly, I am creating a new project for this post. You can use it and pass project create steps.

Screenshot 1: Create new project

I am selecting project template second step. My project will be web application.

Screenshot 2: Select template

Now, my project ready for development. Before started development, I will add some packages for react. This packages are as follows.

• React.AspNet
• JavaScriptEngineSwitcher.ChakraCore
• JavaScriptEngineSwitcher.ChakraCore.Native.win-x64 (If you are using Windows x86 or another OS, you should download your version for this OS.)
• JavaScriptEngineSwitcher.Extensions.MsDependencyInjection

Screenshot 3: Packages

After downloaded packages, we will modified startup.cs file in our project. Firstly, we are adding new libraries to startup.cs file. This libraries are as follows.

• using Microsoft.Extensions.DependencyInjection
• using JavaScriptEngineSwitcher.ChakraCore
• using JavaScriptEngineSwitcher.Extensions.MsDependencyInjection
• using React.AspNet

My page is as follows.

Screenshot 4: Startup.cs libraries

We will add the following code to the end of configureservices method.

Screenshot 5: ConfigureServices method

We will add as follows code in configure method. This code must be before static files. The screenshot is as follows.

Screenshot 6: Configure method

I created JSX folder in wwwroot. I will write react code in this folder. Let’s start.

Firstly, I added new div in my masterpage layout. (_layout.cshtml) My react components will use this div.

Screenshot 7: Created new div

Now, I will start to write react code. I am adding a new jxs file in my jsx folder. The screenshot is as follows.

Screenshot 8: New jsx file

My component details are as follows.

Screenshot 9: First react component (example.jsx)

Finally, I will call this file in my page for work. I added as follows codes bottom of in my master page.

Screenshot 10: Page scripts for react

Script links are as follows.

• https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.development.js
• https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.development.js

I started localhost and It worked!

Screenshot 11: Localhost

You can find example project in this link. Later, I will write new post for react examples.

See you.

Good luck :)