On September 1, 2022, GitHub Learning Lab will shut down.
Read more on the GitHub blog and check out GitHub Skills for courses backed by GitHub Actions.
See an up-to-date option for this page.

Introduction to React

In this course, you will learn the basics of React.js through building a gradebook web application to manage assignments, students, and grades.

Start free course Join 3469 others!

social preview

Welcome to React

Congratulations on taking some of your first steps into full stack development.

So why did you decide to click and join this course? Ideally, you are a learner who:

  • Understands HTML tags
  • Understands classes and methods in JavaScript
  • Understands Git and GitHub

If you understand the topics above, you can start learning modern frontend development with React.

So why do we learn React?

React has growing popularity in the tech industry because of its simplicity. With a simple knowledge of HTML and JavaScript, picking up React won't be too difficult.

What you'll learn

We'll answer common questions like:

  • How do you setup a React project?
  • What is a component and how are they used?
  • How do you add components?
  • How is data passed to child components?
  • How are state variables created and used?
  • What is a callback function and how is it used to communicate data?

And when you're done you'll be able to:

  • Setup a React project
  • Add and use components
  • Pass data to child components
  • Use state variables
  • Use callback functions to communicate data

What you'll build

We'll be building a gradebook for teachers! gradebook


Before starting this course, we recommend:

Projects used

  • This course uses node.js We'll install this as part of the first step in the course.


New developers, new GitHub users, users new to Git, students, teams

Steps to complete this course 11
  1. Open a pull request

    Welcome to React! Let's get started with our project.

  2. Add a header component

    Give your app a title by adding a header component

  3. Import a child component

    Import a child component into its parent

  4. Uncomment assignments section

    Add the ability to create assignments

  5. Replace the title prop

    Pass a title prop to the List child component

  6. Add a state variable

    Add a students state variable to keep track of students

  7. Create a method

    Create a method to add students to our state

  8. Bind a method

    Bind the addStudents method to our class

  9. Pass functions as props

    Learn how to pass data back to parent components

  10. Get your pull request approved

    Let's confirm you made the right changes

  11. Merge your pull request

    Congrats on finishing the course!

Share Introduction to React
Average time to complete

260 minutes


All public courses on Learning Lab are free.

Latest release

Users who took this course also took

What is GitHub Learning Lab?

Learn new skills by completing fun, realistic projects in your very own GitHub repository.

Ready to start learning?

Start Introduction to React