React Quick Start: The Interactive Way
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Most "Quick Start" guides are just text. This one is interactive.
We'll cover the three pillars of React: Components, JSX, and Props.
Who This Is For
Learners following the React or Next.js roadmap.
1. Components: The Building Blocks
React apps are made of independent, reusable pieces called components. A component is just a JavaScript function that returns UI.
Concept:
function Button() {
return <button>Click me</button>;
}
Practice: Instead of setting up a local environment, jump straight into code: -> Build Your First Component on Scrimba
2. JSX: Writing Markup in JavaScript
JSX looks like HTML, but it's stricter. You can put it directly inside JavaScript code.
Rules of JSX:
- Return a single root element (or a Fragment
<>...</>). - Close all tags (e.g.,
<img />). - camelCase all attributes (e.g.,
classNameinstead ofclass).
Practice: -> Fix Broken JSX Challenge
3. Displaying Data
Use curly braces {} to "escape" back into JavaScript logic from your JSX.
const name = "Scrimba User";
return <h1>Hello, {name}</h1>;
You can put any expression inside curly braces: math, variables, function calls.
Next Steps
Once you understand these basics, you're ready to build a full project.
React Project: Build a React Info Site
FreeApply your new skills by building a static React page from scratch.
View on Scrimba (opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.