Why react is still king of UI's

Introduction

React was officially launched on May 29, 2013, which means it’s been just over 12 years since its debut into the world of UI development. It has been 12 years yet no library is closed to react when it comes to building frontend. but why?

Overview of React's Position in the Market

A study shows that around 39.5% of developers worldwide reported using React.js.

That translates to millions of developers actively building with React across personal projects, startups, and enterprise-level apps.

Purpose of the Article

Understanding advanced React concepts along with React history.

Historical Background

We all know we can build UI without using react. But since react gives so much superpower all tends to use react even if it’s a small project.

React was originally created at Facebook to solve a very specific and frustrating problem: managing complex, dynamic user interfaces where data changes frequently.

So dynamic UI is the react MOAT. changing UI fast as data changes. That’s one thing, another is modular code. You can write a component code one time and use it in any where in your application. it solves so much problem of maintaining large code base and DRY principle of coding.

That we all know of but what makes react strong is it’s though process if anybody asks me wether react is library or framework I say it’s a thought process.

Nobody challenged react thought process since the day it was launched.

Key Advantages of React

Dynamic UI : What is mean by dynamic UI. it means data which we see on web page is adaptable to situation of state changes. The numbers and text are not static there change as the data which are coming form backend change.
Components : You use react and there is no way you haven’t heard of components. so the whole concept of react Component is You write once use it everywhere. You can see component as function which return the HTML. we write component is jsx or tsx which nothing but combination of HTML and javascript/TS. Components receive prop which is like parameter of function.
State management: State management in React is all about how your app handles and shares data, especially data that changes over time and affects what the user sees.

Virtual DOM

After reading this you will never forget what virtual dom is.

DOM (Document object model) picture it as a tree which holds all the element in your webpage you know all those divs, p, h, img tags. it’s like these tags are children or branches of DOM.

Technical definition

The DOM, or Document Object Model, is a programming interface that represents the structure of a web page as a tree of objects.

The Virtual DOM is a virtual copy of the actual DOM. Any changes that happen in the actual DOM are first reflected in the Virtual DOM, and then displayed in the real DOM.

Now let’s create a react app

First make sure you have node js and npm in your system.
Create your react app
```
 npm create vite@latest
```
After running a UI will ask you to choose the name, framework, varient of your react app.
You can give your application whatever name you like, for framework you to select a React and for language you can select JS or TS.
Then we need to install the dependencies by cd into the project
After running these commands, all the dependencies going to install and you will have your react project ready on localhost:5173

Hooray 🥳, your react app is ready

Conclusion

We saw the React architecture and how react was introduced and how to create react etc.

Summary of Key Points

React: it’s a powerfull UI library build by META
component: They are like a reuable piece of code which return the html and written in jsx or tsx.
DOM: we saw the differece between actual and virtual DOM
create app: we created the React app

References and Further Reading

You can watch Chai Aur code Youtube channel to learn more on react or read offical documentation of react to understand it better.

React documentation

Some tips from my site try to use some advanced and latest library in react to make your project standout

Tanstack Query
zustand
react-router-dom
react-hook-form

If you still have doubts or want to connect with me message me on X (pritam_awatade).

That’s it from my side, learners

See you soon
Pritam Awatade

Why does React dominate the Market? Advanced React tips.

Table of contents