React Introduction

React applications are built using components, which are reusable, self-contained building blocks for UI elements.

Components can be either functional components (using functions) or class components (using ES6 classes).

JSX is a syntax extension for JavaScript recommended by React.

It allows us to write HTML elements and components in a syntax that looks similar to XML or HTML.

React uses a virtual DOM to optimize the updating of the actual DOM.

Instead of updating the entire DOM tree when there is a change, React updates a virtual representation of the DOM and then calculates the most efficient way to update the actual DOM.

React follows a unidirectional data flow, meaning that the data flows in one direction from parent to child components.

Changes to the state in a parent component can trigger updates in child components, but not vice versa.

React applications can benefit from optimization techniques to enhance performance and user experience.

React Provides techniques and methods to achieve Optimization in React such as `React.memo` Higher Order Function, `useMemo` Hook, `useCallback` Hook, Components Lazy Loading, and Automatic Batching to prevent updating state multiple times and more.

React components can have state, which is used to manage data that can change over time.

Props (short for properties) are used to pass data from a parent component to a child component.

Before Hooks Introduces, we have class components in React that have lifecycle methods that allow developers to hook into different phases of a component's life, such as when it is first mounted, updated, or unmounted.

After Hooks was introduced, now we have only a single useEffect hook which allows developers to hook into different phases of a component's life.

Introduced in React 16.8, hooks are functions that allow developers to use state and lifecycle features in functional components, making them more powerful and eliminating the need for class components in many cases.