What is react - introduction

React is a JavaScript library to make single page application, developed by Facebook. It allows users to create user interfaces, particularly for creating interactive and dynamic web applications. It is not a framework, but its mentioned like that in most of the places because it's very powerful, and comes head to head with other popular frameworks like angular and vue.

React works on the concept that when there is some changes in the website it will only re render that component without reloading the page. This makes web application work faster and creates a good user experience.

Unlike the DOM( document object model) of the website, react creates a virtual DOM side by side and maintains it. This virtual DOM is a light weight copy of the real DOM. whenever there is any change made in the virtual DOM it makes changes in only that part of the real DOM. More about that in some other blog.

Note: Don't start learning react without learning JavaScript . react is a library built using JavaScript. To learn react properly or understand it, First learn JavaScript and practice hard until you get comfortable with it.

How to use react

To use react make sure you have node installed on your system. On the React docs two ways are mentioned either use react with production grade applications like Next.js or use bundlers like vite and parcel. These two are bundlers which picks the react and react-dom from the npm and sets up a custom build process. There is also another utility like vite and parcel, that is create-react-app but it's little slow and bulky.

Single page application SAP

When you create a react app you will see there will be only one index.html page. This is because with react you will be able to make only a single website and then through virtual DOM we can perform all kinds of manipulation, to make the page dynamic. If the user requests the about page that single page will be rendered to show the about page, we can even have control over the URL. This is what is known as sap or single page application.

React components

In react we break down each parts of a website into components, we don't write all code under one. The navbar, footer, hero section all of them components. We build components for these and then use them in our app. The components can also be reused later in other projects. Consider them as lego blocks, you can pick one from one of your structure and stick it with another one. They can be of class type or functional type, modern apps use rfc(react functional components) and class based components are found in some legacy code bases.

Props in real quick

Props are basically properties of a react component. when you create a react component you can define certain props lets say in a car component you can define the title as a prop image as a prop, etc. Then when you are using the component, you can pass values for the props, you also define default values of props, types of the props, etc. Props makes the component reusable.

What the duck is JSX

In simple words, JSX is a format for writing HTML inside of JavaScript. In a react component we return JSX code which is basically html which will be rendered in the webpage. But we can manipulate it with JavaScript. Now you might think why don't we use normal HTML, because it is not dynamic, but JSX allows embedding dynamic values and expressions directly within the HTML-like syntax. More about JSX on a JSX particular blog. Here is an example of a react component that returns JSX.

function App() {
  return (
    <>
      <h1>Hello world</h1>
    </>
  )
}

export default App

Why use react

React makes it easy to build and manage complex frontend. In simple projects like a website that fetch weather data from a third party api and shows to the user don't need react, there it will be overkill.

Why was react created

react was developed by a team of developers in Facebook. In the early days of Facebook the website used to have a common problem. The message notification, that show number of new messages, sometimes doesn't update even after reading them, So the number never updates sometimes. There was an inconsistency in the UI. This problem was referred to as Phantom message. In the website state was managed by JavaScript and UI was by DOM, so the technical issue was, there was no sync between the UI and state and there should be a communication between the two. So from there the idea of react was born.

What is state

State is referred to the state or condition of a variable at any given time. There are even ways through which we can update the state of the variable in the app. For example lets say we have a variable count and on the click of a button, the count should update. So initially the state of the variable would be 0 and once the button is pressed, we will fire the update method, which will increment the count. So the state of the count will change in that case. There are more details to what is state but this is the basic.

Conclusion

There are lot of things which comes in the roadmap of learning react, this was basically a over view where I tried to explain in simple words what are the various or the common aspects of a react app or project. So this is not a roadmap. I hope I was able to explain to you what is react, why was is made and why you should learn it, along with some important parts of it. Stay tuned and subscribe to my newsletter because I will be coming with more react, JavaScript and programming content. Till then goodbye, have a good day and happy coding!