React Introduction

What is React?

React is a JavaScript library used for building fast, interactive, and reusable user interfaces for web applications, especially for Single Page Applications (SPA).

SPA :

• A Single Page Application (SPA) is a type of web application that loads one HTML page initially and then updates the content dynamically without reloading the page.

In React, What is Component?

A Component is a reusable piece of UI.
Every component receives data from props, manages data from state, and returns UI using JSX.

Types of Component

1. Functional Component (Modern React)

It is simple JavaScript functions.

Key Features

• Simple and easy to read

• Use hooks (like useState, useEffect) for state and lifecycle logic

• Promoted by React as the modern standard

• Better performance due to fewer overheads

• No this keyword needed

2. Class Components (Old Method)

Class components are ES6 classes that extend React.Component.

Key Features

• Uses this.state and this.setState

• Heavier syntax

• Uses lifecycle methods like:

1. componentDidMount
2. componentDidUpdate
3. componentWillUnmount

Difference Between Functional and Class Components :

What is State?

State is the internal data of a component that can change over time.

When the state changes, React re-renders the component and updates the UI.

Key Points

• State is mutable

• Every component has different different states

• When the state changes, the UI automatically updates

• In functional components, state is managed using the useState() hook

What are Props?

Props are read-only data passed from a parent component to a child component.

The child component can only receive props—it cannot change them.

Key Points

• Readonly

• One-way dataflow (top → bottom)

• Can pass functions in props

• Helps make reusable components

Features of React

1. Component Based Architecture

React apps are built using small, reusable components.

Each component has its own logic and UI, which makes code easy to manage and scale.

2. Virtual DOM

React updates only the necessary parts of the UI.

This makes updates faster and improves performance.

3. One-Way Data Flow

Data flows in one direction—from parent to child (via props).
This makes apps predictable and easier to debug.

4. JSX (JavaScript XML)

React uses JSX, which allows you to write HTML-like code inside JavaScript.
It makes UI code easier to read and write.

5. Hooks (Modern React Features)

Hooks like useState, useEffect, etc., allow functional components to use state and lifecycle features.
They make code simpler and more powerful.

6. High Performance

React updates only the required parts of the UI due to the Virtual DOM and efficient diffing algorithms.

7. Reusable Components

Once a component is created, it can be reused multiple times, saving development time and keeping the code clean.

8. Large Ecosystem and Community

React has a massive community, support, tools, and libraries like React Router, Redux, etc.

9. SEO Friendly

React can be optimized for SEO using frameworks like Next.js, helping search engines index the content.

10. Cross Platform Development

With React Native, you can build mobile apps for iOS and Android using the same React concepts.