Hey, in this blog I will compare React and Blazor so that you can get the perfect idea about the Pros and Cons of using any of these to build the web-based application. But before we start our comparison let just quickly understand what is React and Blazor.
React
React is a library that you can use to build responsive and attractive UI for your web-based application projects.
React focus on component building and it doesn’t tackle other aspects like Routing.
Blazor
Blazor is a framework that helps you build web applications that run in the browser. With the help of C#.
When you use Blazor to build a web application, then it arrives with few packages that help you to build an application. You can also install additional packages using NuGet.
Looking for React Templates?
Download stunning looking react templates to give your web apps and products, amazing look and feel. They are ready to use and easily available on internet, some of them are free as well, so you can start your project with zero investment.
Creating a New App by React
The simplest way to start React application is to use the command “Create React App”
To do that you can use these commands.
npx create-react-app my-app
cd my-app
npm start
Creating a New App by Blazor
In Blazor you can use visual studio to start new project.
You can use these commands.
dotnet new blazorwasm
cd blazorwasm
dotnet run
The command that I have wrote above is the simplest option to get started.
Building UI with React
In React you can build your web-based application by using lots of components by declarative approach.
Here is a basic example.
import React, { useState} from ‘react’;
export default function Welcome() {
const [name, setName] = useState();
const nameChanged = (e) => {
setName(e.target.value)
}
return (<>
<label>What’s your name?</label>
<input type=”text” onChange={nameChanged} placeholder=”Mike”/>
<span>Hello {name}</span>
</>)
}
In React we write components by using JavaScript in this particular example I export a function called Welcome.
This “welcome” function represents a react component.
Building UI with Blazor
In Blazor we use a very similar approach that we used in React to build the User Interface component.
But the main difference is that we use C# instead of JSX and JavaScript.
Here is a basic example
<label>What’s your name?</label>
<input type=”text” @bind-value=”Name” @bind-value:event=”oninput” placeholder=”sam”/>
<span>Hello @Name</span>
@code {
public string Name { get; set; }
}
When the user enters their name, then it will get updated by the help of Name property.
Pros and cons of React and Blazor.
React
Pros
- “Create react app” simplifies the JavaScript build process.
- JSX keeps the part of UI that changes in one place.
- React provide freedom to use other JavaScript library.
- Well established component models.
Cons
- React don’t have a built-in Router.
- If you don’t like JSX then you can’t build an application with React.
- Sometimes JavaScript “ecosystem” gets complicated for package management and building tools.
- If you don’t like JavaScript then you can’t use React.
Blazor
Pros
- Blazor provides built-in routing, validation, and form handling.
- Blazor provides the ability to bring third-party code by NuGet packages
- We can deploy as static files.
- Users can use the same component in the browser or on the server.
Cons
- Tooling is young and it will take time to evolve.
- It’s a new framework and users will take time to adopt it.
- Fewer resources are available on the internet.
- The initial download for the .NET runtime is high.
So that all from my side I hope you like the article, and if you do then don’t forget to share it with your friends.
You can also put your thoughts about this topic in the comment section down below.
