React is a JavaScript library for building user interfaces out of small, reusable components, using a declarative style and a virtual DOM to keep updates efficient.

Syntax

import React from 'react';

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

Deep Dive Course

React, created by Facebook (Meta) and first released in 2013, lets you describe what a UI should look like for a given state, rather than manually writing the step-by-step DOM operations needed to get there — you write declarative components, and React figures out the most efficient way to update the actual browser DOM to match. It achieves this efficiency through a virtual DOM, an in-memory representation of the UI that React diffs against the previous version after every state change, applying only the minimal set of real DOM updates needed rather than re-rendering the entire page. This component-based, declarative model is what makes React particularly well-suited for building complex, interactive single-page applications that stay maintainable as they grow.

1Understanding What is React?

💡

React itself only handles the view layer, building and updating the UI — for things like routing or global state management, you'll typically reach for companion libraries like React Router or Redux, rather than expecting React itself to provide them.

editor.html

import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

localhost:3000

2Practical Example

Here is a real-world application of What is React? showing how it is used in production React code.

editor.html

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <p>React mounted successfully.</p>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

localhost:3000

3Best Practices

Follow these guidelines when working with What is React?:

1. Think in terms of components and the state that drives what they render, rather than manually planning DOM manipulation steps

2. Keep components small and focused on one responsibility, composing larger UIs out of smaller, reusable pieces

3. Treat React strictly as the view layer, pairing it with separate libraries for concerns like routing and state management rather than expecting it to do everything

⚠️

Tip: React itself only handles the view layer, building and updating the UI — for things like routing or global state management, you'll typically reach for companion libraries like React Router or Redux, rather than expecting React itself to provide them.

editor.html

import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

localhost:3000

Examples

Example 01Basic Usage

import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

Example 02Advanced Example

import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  return <p>React mounted successfully.</p>;
}

const root = createRoot(document.getElementById('root'));
root.render(<App />);

Best Practices

Think in terms of components and the state that drives what they render, rather than manually planning DOM manipulation steps
Keep components small and focused on one responsibility, composing larger UIs out of smaller, reusable pieces
Treat React strictly as the view layer, pairing it with separate libraries for concerns like routing and state management rather than expecting it to do everything

Interview Question

Why does React's use of a virtual DOM generally make UI updates faster than directly manipulating the real DOM for every change?▼

Hint: Think about the relative cost of reading/writing the real browser DOM versus working with a plain JavaScript object in memory.

Directly manipulating the real DOM for every single change is comparatively expensive, since each read or write can trigger the browser to recalculate layout, repaint pixels, or both, and doing this repeatedly for many small, uncoordinated changes adds up quickly. React's virtual DOM is just a lightweight JavaScript object representing the UI's structure, so React can update this in-memory representation freely and cheaply, then compare, or diff, the new version against the previous one to figure out the minimal actual set of real DOM changes needed. Only that minimal, batched set of updates is then applied to the real DOM at once, which avoids redundant layout and repaint work compared to naively updating the real DOM directly for every individual change as it happens.

Exercises

MediumPractice using What is React? in a real scenario.

View Solution

import React from 'react';

function Welcome() {
  return <h1>Hello, React!</h1>;
}

export default Welcome;

Frequently Asked Questions

Why does React's use of a virtual DOM generally make UI updates faster than directly manipulating the real DOM for every change?▼

Related Functions

componentsjsxreact-installation