44 captures

24 Aug 2019 - 09 Jul 2024

Sep	OCT	Nov
	04
2019	2020	2021

success

fail

About this capture

COLLECTED BY

Collection: Save Page Now

TIMESTAMPS

The Wayback Machine - http://web.archive.org/web/20201004082101/https://lab.github.com/githubtraining/introduction-to-react

Learning Lab For Organizations Teach on Learning Lab Sign in

Introduction to React

The GitHub Training Team 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 1337 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!

●Completed source repository ●Completed Gradebook.

Prerequisites

Before starting this course, we recommend: ●Completing the Introduction to GitHub Learning Lab with the option for working locally in the command line. ●Completing the Introduction to HTML Learning Lab

Projects used

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

Audience

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

Steps to complete this course 11

Open a pull request

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

Add a header component

Give your app a title by adding a header component

Import a child component

Import a child component into its parent

Uncomment assignments section

Add the ability to create assignments

Replace the title prop

Pass a title prop to the List child component

Add a state variable

Add a students state variable to keep track of students

Create a method

Create a method to add students to our state

Bind a method

Bind the addStudents method to our class

Pass functions as props

Learn how to pass data back to parent components

Get your pull request approved

Let's confirm you made the right changes

Merge your pull request

Congrats on finishing the course!

Share Introduction to React

Average time to complete

282 minutes

Free

All public courses on Learning Lab are free.

Get help

Post on the GitHub Community Forum

Latest release

July 30, 2020

What is GitHub Learning Lab?

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