Introduction to React

Juno

Welcome to the React handbook! I'm Juno, and I'm glad you're here. React is a tool for building user interfaces, and the thing to know up front is that React is JavaScript the whole way through. If the JavaScript still feels shaky, that's completely normal, and it's worth getting comfortable there first.

We'll take it one small idea at a time: a piece of the page here, a bit of data there, and slowly you'll see how they fit together. Nothing here is ever too basic to ask about.

If you haven't done the JavaScript handbook yet, start there and come back. React will make a lot more sense once it does.

Juno

Welcome to the React handbook. I'm Ace, and I like to keep things practical. React is how you organize a user interface around components: small, self-contained pieces you build once and reuse, each holding its own slice of data.

We stay hands-on the whole way: read the idea, build a component with it, wire in some state, see it react to a click. React is a library you learn by using, so that's how we'll learn it.

Juno

Welcome to the React handbook. I'm Sol, and I'll be walking you through the mental model and the sharp edges. Here's the core of it: you describe what the UI should look like for a given set of data, and React re-renders when that data changes. Get that model right and most of React follows from it.

Part of the skill is knowing when React earns its keep. It buys you a lot once a UI has real state to manage, and it costs you complexity you don't always need. Expect the render model, the hook rules, and the places where the abstraction leaks. Read closely and question all of it, including me.

The moment a page gets interactive, a problem shows up. In plain JavaScript you reach into the page, find the element you want, and update it by hand every time your data changes, keeping the screen and the data in sync yourself. That works for a button or two. It gets fragile fast as a page grows, because every piece of state has its own set of manual updates to remember. React flips this around: you describe what the UI should look like for your current data, and React handles the updates when that data changes.

React is a JavaScript library for building user interfaces out of components, and you compose those pieces into whole screens.

What is a component?

A component is a function that returns a piece of your UI. Larger screens are built by composing many of them together. Components covers how to write and combine them.

If you've been through the JavaScript handbook, you've already done the hard version of this by hand. The DOM chapter is where you learned to read and change elements on the page, and the events chapter is where you made the page respond to a click or a keypress. React is built on exactly those ideas. It gives you a cleaner way to express them as your app grows.

One thing to be firm about: React is JavaScript, wall to wall. Components are functions, props are arguments, state is variables, and the logic inside a component is the same language you write everywhere else. There's no shortcut around it. If you haven't worked through the JavaScript handbook, start there, because time spent shoring up the fundamentals pays off directly here. It's also worth reading what a framework is for the bigger picture of where a library like React sits and what it does for you.

Here's the scope, so you know what this handbook covers. It opens with what React is, where it came from, and how to get a project running with Vite on your own machine. From there: building and composing components, writing markup with JSX, styling them, passing data down with props, rendering lists with keys, holding changing data in state, responding to events, rendering conditionally, handling forms, sharing state between components, running side effects with useEffect, fetching data from a server, reaching the DOM with refs, and the wider set of hooks. It closes with thinking in React, making an interface accessible, and a map of what comes after. That's the core you reach for in almost every React app. The wider ecosystem, routing, Next.js, and deployment, is signposted in the final chapter rather than taught here. Get these fundamentals solid and the rest is a much shorter climb.

JunoReact is still JavaScript Here's a comforting thing about React: there's no separate React language to learn. A component is a JavaScript function, props are its arguments, and state is a value you store. Every time React feels confusing, it usually helps to ask what the plain JavaScript underneath is doing, because that's all it ever is.

JunoReact is still JavaScript Keep this in mind as you go: React adds a small number of new ideas, components, JSX, props, state, hooks, on top of the JavaScript you already write. The rest is functions, arrays, objects, and events doing their usual jobs. When a component misbehaves, reading it as ordinary JavaScript first will get you unstuck more often than reaching for a React-specific answer.

JunoReact is still JavaScript The abstraction is thin on purpose. A component is a function of its props and state that returns a description of the UI; React's job is to reconcile that description with the DOM efficiently. Almost every gotcha, stale closures, unnecessary re-renders, effects firing when you didn't expect, comes from forgetting that the function runs again on every render. Hold the JavaScript execution model in your head and the React behavior stops being surprising.

Meet your guides

This handbook is hosted by three guides, and you pick which one shows you around. The material is the same for everyone; your guide sets the voice it is told in, and on the pages that adapt, how deep each section goes.

• Juno teaches the beginner track: warm and patient, plain analogies, nothing assumed.
• Ace teaches the intermediate track: practical and build-first, straight to what you actually do.
• Sol teaches the Deep Dive: the mechanism, the trade-offs, and the production details everyone else skips.

Switch guide any time from the picker at the top of any page, or open Preferences at the bottom right to change your guide, language, or font size.

When you're set, the handbook starts in earnest. The next chapter, What is React, covers what React really is, the problem it was built to solve, and how it fits alongside the JavaScript you already know.

Take the React course on ScrimbaBuild six React projects in your browser, free, with Bob Ziroll.→