What is React?

React is a toolkit that helps you build websites out of small reusable pieces, like building with LEGO blocks instead of carving one giant statue.

In this page:

What Problem React Solves
Declarative vs Imperative UI
Component-Based Architecture
Where React Code Runs

What Problem React Solves

Updating a page by hand with document.getElementById and appendChild gets messy fast as an app grows -- you have to track exactly which DOM nodes exist and manually change each one.

React lets you describe what the UI should look like for the current data, and React itself figures out which real DOM nodes to update.

Note: Think of a React component as a function that takes data in and returns UI out -- the same data always produces the same UI.

Warning: React is a UI library, not a full framework -- routing, state management, and API calls all need separate tools.

Example: What Problem React Solves

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Greeting() {
  return <h1>Hello, React!</h1>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Greeting />);
  </script>
</body>
</html>

Declarative vs Imperative UI

Imperative code gives step-by-step DOM instructions (create this element, then append it, then set its text). Declarative React code just describes the end result as JSX, and React handles the actual DOM operations behind the scenes.

Note: Read JSX as 'what the UI should look like right now', not as a sequence of steps to run.

Warning: Reaching for document.getElementById inside a React component to change the DOM directly fights against React instead of using it -- React can lose track of that element.

Example: Declarative vs Imperative UI

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Message() {
  // Declarative: just describe the result.
  return <p>This paragraph was described, not built step-by-step.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Message />);
  </script>
</body>
</html>

Component-Based Architecture

React apps are built as a tree of small, reusable components, each responsible for one piece of UI. A page is assembled by combining components rather than writing one giant block of markup.

Note: Give each component a single clear responsibility so it stays easy to reuse and test.

Warning: Stuffing unrelated pieces of UI into one component makes it hard to reuse or reason about later.

Example: Component-Based Architecture

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Header() {
  return <h2>My Site</h2>;
}
function Footer() {
  return <p>&copy; 2024</p>;
}
function Page() {
  return (
    <div>
      <Header />
      <Footer />
    </div>
  );
}
ReactDOM.createRoot(document.getElementById('root')).render(<Page />);
  </script>
</body>
</html>

Where React Code Runs

React was built for rendering into the browser DOM via the react-dom package, which is what this entire course uses. The same component concepts (components, props, state) also power React Native for mobile apps and Server Components, but the rendering target is different in each case.

Note: Everything in this course targets react-dom -- rendering directly into a webpage.

Warning: Code written for React Native isn't automatically compatible with a plain react-dom web app -- the underlying host elements differ.

Example: Where React Code Runs

markup

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
  <div id="root"></div>
  <script type="text/babel">
function Note() {
  return <p>Rendered into the browser DOM by react-dom.</p>;
}
ReactDOM.createRoot(document.getElementById('root')).render(<Note />);
  </script>
</body>
</html>

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

Next Lesson → Installing Node.js and npm

What is React?

What Problem React Solves

Declarative vs Imperative UI

Component-Based Architecture

Where React Code Runs

Chapter Quiz — Complete all 10 topics to unlock

Login to run this code