What is React?

What is React exactly? Well, React is a JavaScript library. It’s not a framework; its main focus is on handling the user interface of a website. You know, the frontend stuff that we interact with whenever we visit a webpage.

In contrast to a framework, which provides a complete set of tools for building a project, React is more streamlined. It’s like having specialized tools just for the UI.

React can be used for both web and native user interfaces ( https://react.dev/ ). You can even write code for mobile applications using React Native.

Why React, why not vanilla JS?

Why did  React come? Which problem does it solve? Why choose React over vanilla JS? Let’s dig into that.
With vanilla JS, if you update a variable’s value, you also have to update the UI manually to reflect that change. It’s a bit of a hassle, to say the least.

Enter React. Whenever there’s a change in data, React automatically updates the UI by reacting to the change to reflect that in UI. It’s like having a self-updating the components by reacting to changes that have been made, which is why it’s called React.

The story behind React begins with Facebook, which was struggling to keep its UI up-to-date using jQuery. So they assembled a team to solve this problem. Facebook software engineer Jordan Walke developed React in 2011, inspired by a component-based framework in PHP called XHP. React was released as an open-source project in 2013 and is written entirely in vanilla JS.

What is React & what is React dom?

So what exactly does React do? Essentially, it handles user interactions and builds the DOM. When a user clicks a button or types something into a form, React listens for those actions and responds accordingly.

React works in two steps. First, it creates a virtual DOM, a rough draft of the webpage. Then, it renders the virtual DOM to the actual webpage, creating the final result.

But here’s the kicker: React uses JSX, a syntax that looks like HTML but isn’t quite the same. Browsers can’t understand JSX, so we need a little help. That’s where Babel (https://babeljs.io/)  comes in. 

Babel is a transpiler that converts JSX into plain old vanilla JavaScript that browsers can understand. So before we can run our React code in the browser, we need to run it through Babel first.

So there you have it—a beginner’s guide on why we need React. Whether you’re building a simple website or a complex web application, React is a powerful tool that can help you create stunning user interfaces with ease. So why wait? Start learning it today and building something amazing.