Lessons · Coding · beginner · Programming with Mosh

React Tutorial for Beginners

The video “React Tutorial for Beginners” by Programming with Mosh as 10 lessons, with the idea explained, the code from the screen, steps to try in the practice terminal, practice problems with solutions and a quiz that leads back to the moment.

10lessons
15pieces of code
1formula
27exercises
80min of video
Open the lessons →Lesson 1 is free · Beyond Pass opens all
React Tutorial for Beginners, video by Programming with Mosh▶ 1:20:03 · Programming with Mosh
12345678910
0:0010 lessons across the whole video1:20:03

You will be able to

  • Create a React project with TypeScript using Vite and run it in the browser
  • Build function components in TSX and compose them into a page
  • Render dynamic lists and conditional content with map, the ternary operator and &&
  • Handle click events and type them with TypeScript annotations
  • Manage component state with useState and pass data and callbacks through typed props
  • Build reusable Bootstrap-styled components using children and optional props

Good to know first

  • Working knowledge of HTML, CSS and JavaScript
  • Node.js 16 or higher installed
  • Basic comfort with a terminal and npm
  • Familiarity with a code editor such as VS Code

Syllabus

10 lessons and a final project

  1. 1

    Course overview and prerequisites Free

    0:00–2:202 min of video

    This lesson explains what the React course will cover and what you need to know before starting. You will see the video game discovery app you will build, and learn that HTML, CSS and JavaScript are the only prerequisites.

    2 exercises3 questions
  2. 2

    What React is and setting up your first React project Beyond Pass

    2:20–9:127 min of video

    You learn what React is (a library for building user interfaces out of reusable components) and why it helps manage complex pages. You then check your Node version, create a React + TypeScript project with Vite, open it in VS Code and run it in the browser.

    2 code5 build steps3 exercises3 questions
  3. 3

    Components, JSX and the React project structure Beyond Pass

    9:12–16:387 min of video

    You will learn what the main files of a React + TypeScript project do, and how to write a function component with JSX, export it, and use it inside another component. You will also see how curly braces let JSX show dynamic values.

    2 code5 build steps2 exercises3 questions
  4. 4

    How React renders UI: virtual DOM and library vs framework Beyond Pass

    16:38–21:315 min of video

    You will learn how React turns your component tree into a virtual DOM and uses react-dom to update the real browser page. You will also learn the difference between a library like React and a framework.

    1 code2 build steps2 exercises3 questions
  5. 5

    Building a List Group: Bootstrap, Lists and Conditional Rendering Beyond Pass

    21:31–34:2313 min of video

    You will install Bootstrap, build a ListGroup component from Bootstrap markup, and render a list of items dynamically with map. You will also learn how to show different content with a condition.

    2 code5 build steps3 exercises4 questions
  6. 6

    Conditional rendering, click events and TypeScript types Beyond Pass

    34:23–44:4810 min of video

    You will learn to show or hide JSX with the ternary operator and the logical AND operator, then handle clicks with onClick, including how to write a typed event handler in TypeScript. The lesson follows the React list example from the video.

    4 code5 build steps3 exercises4 questions
  7. 7

    State with useState and props with typed interfaces Beyond Pass

    44:48–58:3814 min of video

    You will learn how useState lets a component remember a value that changes and re-renders the screen, and how props with a TypeScript interface pass data into a reusable component and send events back out to its parent.

    1 code1 formula5 build steps3 exercises4 questions
  8. 8

    Passing Children, the Alert Component and React DevTools Beyond Pass

    58:38–1:07:229 min of video

    You will learn how to build a reusable Alert component that takes its content as children, using the special children prop and the React.ReactNode type. You will also learn how React DevTools lets you inspect components, their props and where they were rendered.

    2 code6 build steps3 exercises3 questions
  9. 9

    Button component, optional props and alert visibility Beyond Pass

    1:07:22–1:18:4011 min of video

    You will turn a Bootstrap button into a reusable React component that takes a label, a click handler and an optional color, with TypeScript checking the allowed colors. You will then show and hide a dismissable alert using state, and let the child close button tell the parent to hide it.

    1 code4 build steps3 exercises4 questions
  10. 10

    Wrap-up: wiring a close button and the next steps Beyond Pass

    1:18:40–1:20:031 min of video

    This lesson shows how the last piece of the alert component works: a parent passes a function down as a prop, and the child calls it when the user clicks close. It also covers how to finish the app and where to go next.

    4 build steps3 exercises3 questions

Final project

Mini Game Picker: a small React + TypeScript app

Build a small page with Vite, React and TypeScript that lets a user choose a game genre from a Bootstrap list and see a dismissable alert about it. It uses every skill from the course: components, lists, state, typed props, children and callbacks.

Its 7 tasks open with Beyond Pass.

Free preview · Lesson 1 in full

Course overview and prerequisites

This lesson explains what the React course will cover and what you need to know before starting. You will see the video game discovery app you will build, and learn that HTML, CSS and JavaScript are the only prerequisites.

0:00 to 2:20 in the video

The idea

This course teaches you React. React is a tool for building websites and apps that people click and interact with.

You learn by building something real. In this course you will build a video game discovery app, a place where users can browse and find video games.

Before you start, you need three skills: HTML, CSS and JavaScript. HTML builds the structure of a page, CSS styles it, and JavaScript makes it do things.

These three are the only prerequisites. You do not need to know any other framework or library first.

If one of the three feels shaky, refresh it before going on. React code is built on top of JavaScript, so the stronger your basics, the easier the next lessons will be.

Key points

  • The course teaches React by building a real project: a video game discovery app.
  • The only prerequisites are HTML, CSS and JavaScript.
  • HTML is the structure of a page, CSS is its style, JavaScript is its behaviour.
  • You do not need any other framework or library before starting.

Words to know

React
A JavaScript library for building user interfaces, the parts of a website or app that users see and use.
Prerequisite
Something you should already know before starting a course.
HTML
The language that gives a web page its structure, such as headings, text and buttons.
CSS
The language that styles a web page: colours, sizes and layout.
JavaScript
The programming language that makes web pages interactive.

Practice

Do it Solution checked

Self-check: write down HTML, CSS and JavaScript. Next to each one, write one thing you can already do with it (for example, make a heading, change a colour, or write a function). If you cannot think of anything for one of them, mark it to refresh before Lesson 2.

Solution
  1. Write the three names on a sheet or in a text file.
  2. Next to each, note one thing you can do with it.
  3. Mark any that you left empty as the ones to revise first.

A list of HTML, CSS and JavaScript, each with one thing you can do, and any gaps marked.

Explain Solution checked

A friend wants to start this course but has never written any web code. Using what this lesson says, tell them in two or three sentences what they should learn first and why.

Solution
  1. The course needs HTML, CSS and JavaScript as prerequisites.
  2. HTML gives the structure, CSS the style, JavaScript the behaviour.
  3. React is built on JavaScript, so they should learn these basics first.

They should first learn HTML, CSS and JavaScript, the three prerequisites, because React builds on them.

Quiz

  1. What will you build during this course?

    1. A video game discovery app
    2. A banking app
    3. A text editor
    4. A weather widget
    Show the answer

    A. A video game discovery app · The lesson shows the video game discovery app you will build.

  2. Which skills are the prerequisites for this course?

    1. Python, SQL and Java
    2. HTML, CSS and JavaScript
    3. Angular and Vue
    4. Photoshop and Figma
    Show the answer

    B. HTML, CSS and JavaScript · HTML, CSS and JavaScript are the only prerequisites.

  3. Which statement about the prerequisites is correct?

    1. You must know another framework first
    2. You must already know React
    3. HTML, CSS and JavaScript are enough to start
    4. Only JavaScript matters; HTML and CSS are not needed
    Show the answer

    C. HTML, CSS and JavaScript are enough to start · The lesson says HTML, CSS and JavaScript are the only prerequisites, so you need no other framework and no React knowledge.

Open lesson 1, with the video →

Lessons 2–10 and the final project

They open with Beyond Pass: every lesson of every course, in full. One payment: $14.99 for 90 days or $29 for a year. No subscription.

Get Beyond Pass →Start lesson 1 free

Made by Beyond from the video “React Tutorial for Beginners” by Programming with Mosh. The video plays in YouTube's own player. Watch it on YouTube · All lessons