Blazor vs React

Overview

React

Stacks182.6K

Followers147.0K

Votes4.1K

GitHub Stars240.3K

Forks49.7K

Blazor

Stacks549

Followers724

Votes445

Blazor vs React: What are the differences?

Introduction

Blazor and React are both popular frameworks used for building web applications. However, they have some key differences that set them apart from each other. In this article, we will explore these differences and provide a comparison between the two frameworks.

Rendering: In Blazor, the rendering process takes place on the server-side using Razor components. This means that the components are rendered on the server and then sent to the client for display. On the other hand, React performs client-side rendering where the components are rendered on the client's browser using JavaScript.
Language: Blazor allows developers to write their application code using C#. This is because Blazor uses WebAssembly to run C# code on the browser. In contrast, React is a JavaScript library, and developers need to write their application code using JavaScript or TypeScript.
Performance: Blazor provides faster page load times as the initial rendering happens on the server-side, and only the necessary updates are sent to the client. This reduces the amount of data transferred over the network. React, on the other hand, requires the entire application code to be downloaded to the client's browser, which can increase the page load time.
Component Interactions: Blazor allows for two-way data binding between components, which means changes made in one component automatically update other components that are bound to the same data. In React, data flow is unidirectional, and developers need to use props and state to pass data between components.
Maturity: React has been around for a longer time and has a more mature ecosystem compared to Blazor, which is relatively new. As a result, React has a larger community, more available resources, and a wider range of third-party libraries and tools.
Development Environment: Blazor can be developed using Visual Studio or Visual Studio Code, which are powerful IDEs with extensive debugging and code analysis capabilities. React, being a JavaScript library, can be developed using any JavaScript IDE or code editor, providing developers with a wide range of choices.

In summary, Blazor and React differ in their rendering process, language, performance, component interactions, maturity, and development environment.

Share your Stack

Help developers discover the tools you use. Get visibility for your team's tech choices and contribute to the community's knowledge.

View Docs

CLI (Node.js)

Manual

Advice on React, Blazor

Cyrus

Aug 15, 2019

Needs adviceon

Vue.js

React

I find using Vue.js to be easier (more concise / less boilerplate) and more intuitive than writing React. However, there are a lot more readily available React components that I can just plug into my projects. I'm debating whether to use Vue.js or React for an upcoming project that I'm going to use to help teach a friend how to build an interactive frontend. Which would you recommend I use?

884k views884k

Comments

Cyrus

Aug 15, 2019

Needs advice

Simple datepickers are cumbersome. For such a simple data input, I feel like it takes far too much effort. Ideally, the native input[type="date"] would just work like it does on FF and Chrome, but Safari and Edge don't handle it properly. So I'm left either having a diverging experience based on the browser or I need to choose a library to implement a datepicker since users aren't good at inputing formatted strings.

For React alone there are tons of examples to use https://reactjsexample.com/tag/date/. And then of course there's the bootstrap datepicker (https://bootstrap-datepicker.readthedocs.io/en/latest/), jQueryUI calendar picker, https://github.com/flatpickr/flatpickr, and many more.

How do you recommend going about handling date and time inputs? And then there's always moment.js, but I've observed some users getting stuck when presented with a blank text field. I'm curious to hear what's worked well for people...

401k views401k

Comments

Malek

Web developer at Quicktext

Mar 28, 2020

Decided

The project is a web gadget previously made using vanilla script and JQuery, It is a part of the "Quicktext" platform and offers an in-app live & customizable messaging widget. We made that remake with React eco-system and Typescript and we're so far happy with results. We gained tons of TS features, React scaling & re-usabilities capabilities and much more!

What do you think?

244k views244k

Comments

Detailed Comparison

React	Blazor
Lots of people use React as the V in MVC. Since React makes no assumptions about the rest of your technology stack, it's easy to try it out on a small feature in an existing project.	Blazor is a .NET web framework that runs in any browser. You author Blazor apps using C#/Razor and HTML.
Declarative; Component-based; Learn once, write anywhere	Uses only the latest web standards; No plugins or transpilation needed; A component model for building composable UI; Routing; Layouts; Forms and validation; Dependency injection; JavaScript interop; Live reloading in the browser during development; Server-side rendering; Full .NET debugging both in browsers and in the IDE; Rich IntelliSense and tooling; Ability to run on older (non-WebAssembly) browsers via asm.js; Publishing and app size trimming
Statistics
GitHub Stars 240.3K	GitHub Stars -
GitHub Forks 49.7K	GitHub Forks -
Stacks 182.6K	Stacks 549
Followers 147.0K	Followers 724
Votes 4.1K	Votes 445
Pros & Cons
Pros 837 Components 674 Virtual dom 579 Performance 509 Simplicity 442 Composable Cons 41 Requires discipline to keep architecture organized 30 No predefined way to structure your app 29 Need to be familiar with lots of third party packages 13 JSX 10 Not enterprise friendly	Pros 63 Uses C# 49 No need to learn separate language or technology 42 Supports making a single page application 40 Tight integration with .NET project 38 Uses .NET standard library Cons 4 Initial load time 2 Hard to inject javascript
Integrations
No integrations available	.NET C# WebAssembly

What are some alternatives to React, Blazor?

Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

jQuery

jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML.

AngularJS

AngularJS lets you write client-side web applications as if you had a smarter browser. It lets you use good old HTML (or HAML, Jade and friends!) as your template language and lets you extend HTML’s syntax to express your application’s components clearly and succinctly. It automatically synchronizes data from your UI (view) with your JavaScript objects (model) through 2-way data binding.

Vue.js

It is a library for building interactive web interfaces. It provides data-reactive components with a simple and flexible API.

jQuery UI

Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Foundation

Foundation is the most advanced responsive front-end framework in the world. You can quickly prototype and build sites or apps that work on any kind of device with Foundation, which includes layout constructs (like a fully responsive grid), elements and best practices.

Semantic UI

Semantic empowers designers and developers by creating a shared vocabulary for UI.

Materialize

A CSS Framework based on material design.

Material Design for Angular

Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices. Our goal is to deliver a lean, lightweight set of AngularJS-native UI elements that implement the material design system for use in Angular SPAs.

Svelte

If you've ever built a JavaScript application, the chances are you've encountered – or at least heard of – frameworks like React, Angular, Vue and Ractive. Like Svelte, these tools all share a goal of making it easy to build slick interactive user interfaces. Rather than interpreting your application code at run time, your app is converted into ideal JavaScript at build time. That means you don't pay the performance cost of the framework's abstractions, or incur a penalty when your app first loads.

Related Comparisons

Blazor vs React: What are the differences?

Introduction

Rendering: In Blazor, the rendering process takes place on the server-side using Razor components. This means that the components are rendered on the server and then sent to the client for display. On the other hand, React performs client-side rendering where the components are rendered on the client's browser using JavaScript.
Language: Blazor allows developers to write their application code using C#. This is because Blazor uses WebAssembly to run C# code on the browser. In contrast, React is a JavaScript library, and developers need to write their application code using JavaScript or TypeScript.
Performance: Blazor provides faster page load times as the initial rendering happens on the server-side, and only the necessary updates are sent to the client. This reduces the amount of data transferred over the network. React, on the other hand, requires the entire application code to be downloaded to the client's browser, which can increase the page load time.
Component Interactions: Blazor allows for two-way data binding between components, which means changes made in one component automatically update other components that are bound to the same data. In React, data flow is unidirectional, and developers need to use props and state to pass data between components.
Maturity: React has been around for a longer time and has a more mature ecosystem compared to Blazor, which is relatively new. As a result, React has a larger community, more available resources, and a wider range of third-party libraries and tools.
Development Environment: Blazor can be developed using Visual Studio or Visual Studio Code, which are powerful IDEs with extensive debugging and code analysis capabilities. React, being a JavaScript library, can be developed using any JavaScript IDE or code editor, providing developers with a wide range of choices.

Blazor vs React

Overview

Blazor vs React: What are the differences?

Introduction