Skip to main content

React quick start: the interactive way

Quick answer: If you already decided “I’m learning React,” start here for components, JSX rules, and showing data—each section links into a Scrimba scrim so you type the code, not only read.

This page covers React’s first pillars in a practice-first way: function components as UI building blocks, JSX rules for markup inside JavaScript, and displaying data with curly braces in JSX. The goal is a concrete base before larger projects, with Scrimba lessons linked for hands-on reps instead of read-only steps alone.

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:

  1. Return a single root element (or a Fragment <>...</>).
  2. Close all tags (e.g., <img />).
  3. camelCase all attributes (e.g., className instead of class).

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.

Start the Full React Course (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.

Scrimba Pro unlocks paths and advanced courses when you are ready—the core Learn React course is free.

Related Guides

Docs

Learn React Roadmap

→
Docs

React Course Catalog

→
Blog

Scrimba React Learning Path

→

Ready to Upgrade Your Learning?

Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.

Claim 20% Off Scrimba Pro (opens in a new tab)
Last updated on