Compile Academy Start learning
JSX Course · 68 lessons · approx. 463 minutes

Learn React

React builds user interfaces from components. You learn JSX, props and state – and test your components directly: they are rendered and even clicked.

Start the React courseOpen compiler
  • Components & JSX
  • Props
  • State
  • Events
  • Listen & Keys
  • Effects
  • Hooks
  • Your own programs & going deeper
  • A conditional message
  • A child triggers an action
  • Derived values instead of duplicated state
  • Fragment: several elements together
  • className: a CSS class in JSX
  • Filtering a list before rendering
  • A state with two possibilities
  • A controlled input field
  • children: passing content into a component
  • style: styling as an object
  • A state with a lower limit
  • Extending a list in state
  • Showing an empty list clearly
  • Reusing components by composing them
  • Showing and hiding a panel with state
  • Several updates with updater functions
  • Disabling an unavailable action
  • Derived values without extra state
  • Using stable keys from the data
  • Making the state of a toggle accessible
  • Events & controlled inputs
  • Lists, keys & conditional rendering
  • Custom hooks
  • React + HTML/CSS: JSX is HTML inside JavaScript
  • React + TypeScript: components with types

What you’ll learn

  1. Chapter 1Components & JSX – Interfaces made of building blocks.
    Your first component
  2. Chapter 2Props – Passing data to components.
    Props
  3. Chapter 3State with useState – Components that remember something.
    State with useState · Boss: points counter
  4. Chapter 4Your code workshop – Connect what you have learned and discover a new building block.
    Content based on a condition
  5. Chapter 5Workshop: understand and build it yourself – Practise new building blocks with short explanations and your own programs.
    Showing lists in the interface · An interface decides · Boss: a points button with a safe update
  6. Chapter 6New tools for your own ideas – Understand new concepts, fill them in and use them yourself.
    A conditional message · A child triggers an action · Derived values instead of duplicated state
  7. Chapter 7Level up: your next practice chapter – Understand four new building blocks in small steps and use them yourself.
    Fragment: several elements together · className: a CSS class in JSX · Filtering a list before rendering · A state with two possibilities
  8. Chapter 8Master chapter: how real programs are built – Five building blocks from real projects – explained, connected, filled in and written by you.
    A controlled input field · children: passing content into a component · style: styling as an object · A state with a lower limit · Extending a list in state
  9. Chapter 9Project tools: understand and apply – Eight more building blocks with explanation pages and four exercises per lesson.
    Showing an empty list clearly · Reusing components by composing them · Showing and hiding a panel with state · Several updates with updater functions · Disabling an unavailable action · Derived values without extra state · Using stable keys from the data · Making the state of a toggle accessible
  10. Chapter 10Events & controlled inputs – React to clicks, keep inputs in state and submit forms.
    onClick with values · A character counter with onChange · Selection lists with select · Submitting forms with onSubmit · Boss: a mini quiz
  11. Chapter 11Lists, keys & conditional rendering – Show data as lists, sort and filter it, and style it depending on the state.
    Showing objects as a list · Conditional display with && · Showing sorted data · Classes depending on state · Boss: a filterable list
  12. Chapter 12Effects with useEffect – Side effects – and when you do not need them.
    useEffect: code after rendering · Dependencies: when does the effect run? · An empty array: only at the start · useRef: remembering without redrawing · Boss: saving automatically in an effect
  13. Chapter 13Custom hooks – Build your own hooks: write logic once, use it everywhere.
    Your first own hook · A hook for lists · Hooks with calculated values · useEffect in a hook · Boss: a hook for forms
  14. Chapter 14Context & local state – Sharing data deep in the tree.
    createContext and useContext · The nearest provider wins · Shared state in the parent · useReducer: state with actions · Boss: a shopping cart with context and useReducer
  15. Chapter 15Styling & responsive components – Styling components.
    Several classes from conditions · Calculating style from values · One component, several variants · Responsive: a grid with a columns prop · Boss: a small component kit
  16. Chapter 16React + HTML/CSS: JSX is HTML inside JavaScript – JSX looks like HTML but is JavaScript: className, style objects, htmlFor and lists built from data.
    JSX: className instead of class · style as an object: {{ … }} · JSX rules: fragment, /> and htmlFor · Data becomes HTML: map and key · Boss: a profile card as a component
  17. Chapter 17React + TypeScript: components with types – TypeScript describes props and state – mistakes show up before anyone opens the app.
    Describing props with a type · Optional props with ? and a default value · State with a type: useState<number> · Variants with union types · Boss: a typed task list

Final project: Mini dashboard

A dashboard made of several interactive components.

How it works

Every lesson starts with short explanation pages. Then you practise with multiple-choice questions, fill-in-the-gap tasks, putting code in order and writing your own code – with hints and instant feedback. Free, without ads, on phone, tablet and PC.

Learn React now