React is an open-source JavaScript library developed by Facebook for building user interfaces, especially for developing single-page applications. It allows developers to create large web applications that can update and render efficiently in response to data changes.

Components are the building blocks of a React application. Each component is an independent and reusable piece of UI. There are two types of components:

• Functional Components – simple functions that return JSX.

• Class Components – ES6 classes that extend React.Component

JSX stands for JavaScript XML. It’s a syntax extension that looks similar to HTML and is used with React to describe what the UI should look like. JSX allows mixing HTML with JavaScript.

Example:

const element = <h1>Hello, JSX!</h1>;

The virtual DOM is a lightweight in-memory representation of the real DOM. When a component's state or props change, React first updates the virtual DOM. Then, it calculates the difference (diffing) and updates only the changed parts in the real DOM, improving performance.

Props (short for properties) are used to pass data from parent to child components. They are read-only and help in making components reusable.

In simple words, we can say React Props are like function arguments in JavaScript and attributes in HTML.

To send props into a component, we use the same syntax as HTML attributes:

Example:

Add a "language" props to the Codegrill  Component:

<Codegrill language="React" />;

The component receives the argument as a props object:

Example:

function Codegrill (props) {
 return <h2>Welcome to { props.language } world!</h2>;
}

State is a built-in object that stores property values that belong to the component. When the state changes, the component re-renders.

Example:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>Count: {count}</button>;
}

• Props are used to pass data to a component from its parent.
• State is managed within the component and can change over time.

Hooks are functions that let you “hook into” React features in functional components. Common hooks include useState, useEffect, useContext, etc.

Example:

useEffect(() => {
 document.title = "Hello!";
}, );

• Functional Components are simple functions that return JSX.
• Class Components are ES6 classes that extend React.Component and can have lifecycle methods and state (prior to hooks).

With hooks, functional components can manage state and side effects too.

useState is a hook that allows you to add state to a functional component. It returns an array with the current state and a function to update it.

Example:

const [count, setCount] = useState(0);

useEffect is used for side effects like fetching data, subscribing to services, or manually changing the DOM. It runs after every render by default.

Example:

useEffect(() => {
 console.log("Component mounted or updated");
}, );

We can use if, ternary (? :), or logical (&&) operators inside JSX to conditionally render components.

Example:

{isLoggedIn ? <Logout /> : <Login />}

Keys help React identify which items have changed, are added, or removed in a list. It helps in efficiently updating the UI.

Example:

{items.map(item => <li key={item.id}>{item.name}</li>)}

Fragments let you group multiple elements without adding an extra node to the DOM.

Example:

<>
 <h1>Title</h1>
 <p>Description</p>
</>

When two components need to share state, it's moved to their closest common ancestor. This is called lifting state up.

Context is a way to pass data through the component tree without having to pass props manually at every level.

Example:

const ThemeContext = React.createContext('light');

Prop drilling is passing props through many layers of components unnecessarily. You can avoid it using context or state management libraries like Redux.

Redux is a state management library often used with React. It stores the entire application state in a single store, and state is updated using actions and reducers.

Forms in React are controlled using state. Each input field's value is managed by state and updated via an onChange handler.

• Controlled components: React controls the form data using state.
• Uncontrolled components: The DOM manages the input state using ref.

React uses camelCase for event names and passes functions directly

Example:

<button onClick={handleClick}>Click Me</button>

Reconciliation is the process React uses to update the DOM. It compares the new virtual DOM with the previous one and makes the minimal changes.

React’s reconciliation algorithm uses a diffing strategy on the virtual DOM to efficiently update only the changed parts of the actual DOM. Instead of re-rendering the entire DOM, it does the following things

Compares old and new virtual DOM trees.

Identifies differences (node type, attributes, keys).

Applies minimal updates using document.createElement, appendChild, etc.

This makes updates faster and less expensive than direct DOM manipulation.

A Higher-Order Component is a function that takes a component and returns a new component with extended behavior.

const withLogger = (WrappedComponent) => {
 return (props) => {
   console.log('Props:', props);
   return <WrappedComponent {...props} />;
 };
};

const MyComponent = (props) => <div>Hello {props.name}</div>;
export default withLogger(MyComponent);

Used for cross-cutting concerns like authentication, logging, and analytics.

The Context API allows global state management without prop drilling. Ideal for simple use cases like theme, auth, or user settings.

const ThemeContext = createContext('light');
function App() {
 return (
   <ThemeContext.Provider value="dark">
     <Toolbar />
   </ThemeContext.Provider>
 );
}

function Toolbar() {
 const theme = useContext(ThemeContext);
 return <div>Theme is {theme}</div>;
}

Use Redux for complex, deeply nested, and large-scale applications.