React is a free and open-source front-end JavaScript library for building User Interfaces. It is known for its speed, scalability, and simplicity. It is also known for its component-based architecture, which makes it easy to create reusable and maintainable code.
Installation of React
npm create vite@latest
or
npx create-react-app (appname)
Before diving into the explanation I would like to introduce some of the jargon that will be used in both tutorials, docs, and interview..
Component - React Components are the building block of React Application. Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
JSX - JSX, which stands for JavaScript XML, is a syntax extension for JavaScript that allows developers to write HTML-like code directly within their JavaScript code. It is primarily used with ReactJS to describe the UI components in a more intuitive and concise manner.
Instance - A React instance is a specific occurrence of a component that is created when a component is rendered. It is a physical manifestation of a component in the component tree. Each instance has its own state and props.
React Element - In React, an element is the smallest building block of a user interface. It is an immutable object that describes what should appear on the screen. Elements are created using JSX, a syntax extension to JavaScript. JSX looks like HTML, but it has some additional features that make it easier to write React code.
Virtual DOM - The Virtual DOM (VDOM) is a programming concept that keeps a virtual representation of a UI in memory. This representation is then synced with the real DOM by a library like ReactDOM.
How VirtualDOM works?
The Virtual DOM is a lightweight copy of the real DOM. It is much faster to manipulate the Virtual DOM than the real DOM. This is because the Virtual DOM is just a JavaScript object, while the real DOM is a complex tree of HTML elements.
React uses the Virtual DOM to make updates to the UI very efficient. When you change the state of a React component, React only updates the parts of the UI that have actually changed. This makes React applications very fast and responsive.
Reconciliation - It is a process by which react decides which DOM elements needed to be reflected in the latest state changes.
React Fiber - It is a new reconciler algorithm that the React team has culminated over two years of research. It aims to solve many of the problems that came with the original algorithm. So ultimately, React Fiber can be seen as a re-implementation of one of React’s core algorithms.
Diffing - In React, It is the process of comparing the current virtual DOM with the previous virtual DOM to determine the minimal set of changes that need to be applied to the real DOM. This process is performed after a component's state or props have changed.
React LifeCycle
React lifecycle starts from its initialization and ends when it is unmounted from the DOM. There are several methods defined for different phases of the lifecycle of React Components.
A React Component can go through four stages of its life.
Initialization phase - This is the stage where the component is constructed with the given Props and default state. This is done on the constructor of a component class.
Mounting Phase - Mounting is the stage of rendering the JSX returned by the render method itself.
Updating - Updating is the stage when the state of a component is updated and the application is repainted.
Unmounting - As the name suggests Unmounting is the final step of the component lifecycle where the component is removed from the page.
Whether you're building a simple website or a complex web application, ReactJS equips you with the tools and flexibility needed to bring your ideas to life. Embrace the power of React, and embark on your journey to creating captivating and responsive web experiences. Happy coding!