# React — The Library for Building User Interfaces

> React is the most popular JavaScript library for building user interfaces. Created by Meta, it uses a component-based architecture with a virtual DOM, enabling developers to build fast, interactive web and native applications with declarative, reusable code.

## Install

Save as a script file and run:

# React — The Library for Building User Interfaces

## Quick Use
```bash
# Create a new React app with Vite
npm create vite@latest my-app -- --template react-ts
cd my-app && npm install && npm run dev

# Or with Next.js (full-stack)
npx create-next-app@latest my-app
```

```jsx
// Simple React component
import { useState } from "react";

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

## Introduction
React is the most widely used library for building user interfaces on the web and beyond. Created by Jordan Walke at Facebook (now Meta) in 2013, it introduced the concept of declarative component-based UI development to the mainstream. Instead of manually manipulating the DOM, you describe what the UI should look like and React efficiently updates it.

With over 244,000 GitHub stars, React powers the interfaces of Facebook, Instagram, Netflix, Airbnb, Twitter, Discord, and millions of other applications. Its ecosystem — including Next.js, React Native, and thousands of libraries — makes it the center of modern frontend development.

## What React Does
React provides a way to build UIs from isolated, reusable components. Each component manages its own state and renders a piece of the interface. React uses a virtual DOM to efficiently determine the minimal set of changes needed to update the real DOM, making updates fast even in complex applications.

## Architecture Overview
```
[React Application]
        |
   [Component Tree]
   App -> Header -> Nav
      -> Main -> ProductList -> ProductCard
      -> Footer
        |
   [Hooks System]
   useState, useEffect,
   useContext, useReducer,
   useMemo, useCallback
        |
   [React Reconciler]
   Virtual DOM diffing
   Fiber architecture
   Concurrent rendering
        |
+-------+-------+
|       |       |
[react-dom] [React Native] [react-three-fiber]
Web         iOS/Android    3D (Three.js)
```

## Self-Hosting & Configuration
```tsx
// Modern React with TypeScript and hooks
import { useState, useEffect } from "react";

interface User {
  id: number;
  name: string;
  email: string;
}

export function UserList() {
  const [users, setUsers] = useState<User[]>([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch("/api/users")
      .then(res => res.json())
      .then(data => { setUsers(data); setLoading(false); });
  }, []);

  if (loading) return <p>Loading...</p>;

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>
          <strong>{user.name}</strong> — {user.email}
        </li>
      ))}
    </ul>
  );
}
```

## Key Features
- **Component-Based** — build encapsulated, reusable UI components
- **Declarative** — describe what the UI should look like, React handles updates
- **Virtual DOM** — efficient diffing algorithm for minimal DOM mutations
- **Hooks** — manage state and side effects without classes
- **Server Components** — render components on the server (React 19+)
- **Concurrent Rendering** — prioritize urgent updates over background work
- **React Native** — build native mobile apps with the same React knowledge
- **Massive Ecosystem** — thousands of libraries, tools, and frameworks

## Comparison with Similar Tools
| Feature | React | Vue | Svelte | Angular | SolidJS |
|---|---|---|---|---|---|
| Type | Library | Framework | Compiler | Framework | Library |
| Learning Curve | Moderate | Low | Low | High | Low |
| Bundle Size | 42KB | 33KB | 2KB (compiled) | 90KB+ | 7KB |
| State Mgmt | Hooks + external | Built-in + Pinia | Built-in | RxJS + Signals | Built-in signals |
| SSR | Via Next.js | Via Nuxt | Via SvelteKit | Built-in | Via SolidStart |
| Mobile | React Native | Capacitor | Capacitor | Ionic | N/A |
| Market Share | Dominant | Strong | Growing | Strong | Niche |
| GitHub Stars | 244K | 53K (core) | 86K | 100K | 35K |

## FAQ
**Q: React vs Vue — which should I learn?**
A: React has the largest job market and ecosystem. Vue has a gentler learning curve and better built-in tooling. Both are excellent — React for maximum career flexibility, Vue for faster productivity.

**Q: Do I need Next.js to use React?**
A: No. React works standalone with Vite for single-page apps. Next.js adds server-side rendering, routing, and full-stack features. Use Next.js when you need SEO, server rendering, or API routes.

**Q: What are React Server Components?**
A: Server Components (React 19+) run on the server and send rendered HTML to the client — reducing bundle size and enabling direct database/file access from components. They complement client components, not replace them.

**Q: Is React a framework or a library?**
A: React is a library — it handles UI rendering only. You choose your own router, state manager, and build tool. Frameworks like Next.js build on React to provide a complete solution.

## Sources
- GitHub: https://github.com/facebook/react
- Documentation: https://react.dev
- Created by Jordan Walke at Meta
- License: MIT

---
Source: https://tokrepo.com/en/workflows/689ccdd8-3702-11f1-9bc6-00163e2b0d79
Author: Script Depot