What is React?

React is a JavaScript library for building user interfaces. Developed by Meta, it’s the most widely used frontend library in the world.

UI Library, Not a Framework

React handles the view layer only. It doesn’t prescribe routing, state management, or HTTP clients. You choose your own tools for those.

import { createRoot } from "react-dom/client";
import App from "./App";

createRoot(document.getElementById("root")).render(<App />);

This renders your App component into the DOM. React takes over from there.

The Virtual DOM

React keeps a lightweight copy of the real DOM in memory — the virtual DOM. When state changes, React:

1. Creates a new virtual DOM tree
2. Diffs it against the previous tree
3. Updates only the changed parts in the real DOM

This makes updates fast without you manually manipulating the DOM.

Why React?

• Declarative — Describe what the UI should look like, not how to update it
• Component-based — Build encapsulated pieces that compose together
• Learn once, write anywhere — React Native for mobile, React Three Fiber for 3D
• Massive ecosystem — Thousands of libraries, tools, and community resources

Declarative vs Imperative

Imperative — Tell the browser how to do it step by step:

const el = document.createElement("h1");
el.textContent = `Hello, ${name}`;
document.getElementById("root").appendChild(el);

Declarative — Tell React what you want:

function App({ name }) {
  return <h1>Hello, {name}</h1>;
}

React handles the DOM updates for you.

Creating a React App

The modern way is Vite:

npm create vite@latest my-app -- --template react
cd my-app
npm install
npm run dev

This scaffolds a project with hot module replacement and zero config.

You get a working App.jsx file that you can start editing immediately.

React Ecosystem

React is just the view layer, but the ecosystem fills the gaps:

• React Router — Client-side routing
• Redux / Zustand — State management
• React Query — Server state and data fetching
• Next.js / Remix — Full-stack React frameworks

Pick tools as you need them. Start simple.

Best Practices

1. Start with Vite — Faster than Create React App
2. Learn vanilla React first — Don’t reach for state managers immediately
3. Think in components — Break UI into small, reusable pieces
4. Keep state minimal — Derive values instead of storing duplicates

Common Mistakes

1. Confusing React with a framework — React is a library; you pick the rest
2. Ignoring the virtual DOM — Understanding it helps debug rendering issues
3. Over-engineering early — Simple projects don’t need Redux or GraphQL