Prerequisites for React

Introduction

React is a JavaScript library, which means React code is JavaScript code with some extra conventions layered on top. Before diving into components, props, and Hooks, it is worth making sure you are comfortable with the modern JavaScript features that show up constantly in React codebases, along with basic HTML and CSS.

This lesson is a checkpoint, not a full JavaScript course. It lists exactly what to review, explains why each piece matters specifically for reading and writing React, and gives you a short self-check so you can gauge your own readiness before moving on.

Why Fundamentals Matter for React

React does not introduce a new programming language — everything inside a component is regular JavaScript, wrapped in a function and returning some JSX. If a piece of JavaScript syntax feels unfamiliar, it will slow you down when reading React examples, even if the React-specific concept (like a Hook) is simple.

The good news is that the list of JavaScript features you need is short and specific. You do not need to be a JavaScript expert — you just need to be comfortable with the handful of patterns that appear over and over again in React code.

JavaScript Fundamentals to Know

These are the JavaScript features you will see constantly once you start writing React components.

Two more features are worth calling out specifically: the spread operator (...) and the rest operator, which look identical but serve different purposes depending on context.

Basic HTML and CSS Knowledge

Since JSX closely resembles HTML, you should be comfortable with common HTML elements (div, span, ul, li, form, input, button) and basic attributes (class, id, href, src). You do not need to be an HTML expert, but recognizing standard tags will make JSX far easier to read.

Basic CSS knowledge — selectors, the box model, flexbox basics, and how classes apply styles — is also useful, since React components are typically styled with CSS files, CSS Modules, or inline style objects, all of which build on the same core CSS concepts.

Example: Reading React-Style Code

Here is a small snippet that uses several of the fundamentals above together — destructuring, arrow functions, template literals, and array methods. You do not need to write code like this yet, just be able to follow it.

const users = [
  { id: 1, name: "Ava" },
  { id: 2, name: "Liam" },
];

function UserList({ title }) {
  return (
    <div>
      <h2>{`${title} (${users.length})`}</h2>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

Team Members (2)
- Ava
- Liam

Notice the destructured { title } parameter, the template literal building the heading text, and users.map() turning an array of data into a list of elements — all plain JavaScript features, used inside a React component.

Common Mistakes

Best Practices

Self-Check: Are You Ready?

Frequently Asked Questions

Key Takeaways

Summary

React builds directly on core JavaScript, HTML, and CSS knowledge rather than replacing it. Being comfortable with modern JavaScript syntax — arrow functions, destructuring, array methods, template literals, and modules — along with basic markup and styling, means you can focus on what is genuinely new in React instead of getting stuck on familiar syntax.

In this lesson, you reviewed the JavaScript, HTML, and CSS fundamentals that matter most for React, saw them used together in a short example, and checked your own readiness. Next, you will set up your local development environment and get ready to build your first React app.