~ Contribute

Suggest a correction or improvement. The author reviews it before it goes live.

Comment0 / 300

en/tutorials/react/1react-what-is-react

# 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.

```jsx
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:

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

**Declarative** — Tell React what you want:

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

React handles the DOM updates for you.

## Creating a React App

The modern way is **Vite**:

```bash
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

No changes yet

cancel