> For the complete documentation index, see [llms.txt](https://www.anandisheladiya.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://www.anandisheladiya.com/skills-and-experience/frontend/reactjs.md).

# ReactJS

## React.js – A Powerful JavaScript Library for Modern Web Development

### **Introduction**

React.js is an open-source **JavaScript library** developed and maintained by **Meta (formerly Facebook)**. It is widely used for building **interactive and efficient user interfaces (UIs)**, particularly for **single-page applications (SPAs)** and **mobile applications**. React’s component-based architecture enables developers to create reusable UI elements, leading to scalable and maintainable codebases.

### **Why Use React.js?**

React has become one of the most popular front-end libraries due to its:

* **Component-Based Architecture** – Encourages reusability and modularity in code.
* **Virtual DOM (VDOM)** – Optimizes rendering for better performance.
* **Unidirectional Data Flow** – Ensures predictable application behavior.
* **Rich Ecosystem** – Supported by a vast community with libraries like React Router, Redux, and Next.js.
* **Cross-Platform Support** – Can be used in web applications, mobile apps (React Native), and even desktop applications (Electron).

### **Key Features of React.js**

#### **1. JSX (JavaScript XML)**

React uses **JSX**, a syntax extension that allows developers to write UI components using an HTML-like structure inside JavaScript.

```jsx
const HelloWorld = () => {
  return <h1>Hello, World!</h1>;
};

```

#### **2. Components and Props**

React applications are built using **components**, which can be either **functional** or **class-based**. These components accept **props** to make them dynamic.

```jsx
const Welcome = (props) => {
  return <h1>Welcome, {props.name}!</h1>;
};

```

#### **3. State Management**

React provides **useState()** for handling component-level state. For larger applications, state management libraries like **Redux, Recoil, or Zustand** can be used.

```jsx
import { useState } from "react";

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

```

#### **4. React Hooks**

Hooks allow functional components to have state and lifecycle methods. Popular hooks include:

* **useState** – Manages state in functional components.
* **useEffect** – Handles side effects such as API calls.
* **useContext** – Provides global state without prop drilling.

Example of **useEffect** for fetching data:

```jsx
import { useEffect, useState } from "react";

const FetchData = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/posts")
      .then((response) => response.json())
      .then((json) => setData(json));
  }, []);

  return (
    <ul>
      {data.map((item) => (
        <li key={item.id}>{item.title}</li>
      ))}
    </ul>
  );
};

```

#### **5. React Router**

React Router enables client-side navigation without reloading the page.

```jsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};

```

### **Advanced Topics in React.js**

* **Next.js** – A React framework for server-side rendering (SSR) and static site generation (SSG).
* **React Native** – Builds mobile apps using React components.
* **State Management Solutions** – Redux, MobX, Recoil, Zustand.
* **Performance Optimization** – Lazy loading, memoization (React.memo), and code splitting.

###


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://www.anandisheladiya.com/skills-and-experience/frontend/reactjs.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.