React 101: Learn React.js for absolute beginners

——   Created by Kalob Taulien

Share this course:

NEW
Course
20
Lessons
1h 25m
Lesson time
beginner
Skill level
This course is included in Arbington Premium
$15/month gets you access to every course. Start your 14 day trial today.

More about this course

Welcome to React for beginners: a course for web developers to learn React.js even if you've never written any React.js in your life. 

In this class, we're going to be starting at the very beginning, with no student left behind! React can look a bit strange to write at first because it's a mix of HTML and JavaScript, but I'm going to teach you ways to remember when to write JavaScript and when to write HTML (Or what's known as JSX).

We'll learn about React syntax, importing from other others, components, splitting components into new files and importing them, extending components, component props and state, click events, and how to build in an API request when a button is clicked. 

If that sounded advanced and scary, don't worry I'll teach you everything you need to know about React.js to get you up and running quickly. 

Why learn React.js:

React is a JavaScript library that lets you make insanely interactive and responsive websites and applications. When a user types or clicks on something, your JavaScript might want to take some form of action. React makes that easier to write and maintain. Plus it's extendable, meaning you can write a little bit of code and re-use it everywhere so you aren't spending all day writing code.

But more than that, React is a high demand skill. Lots of development companies, startups and big companies like Netflix use React — it's how they can create such amazing user interfaces like the Netflix movie catalog. 

Everything that can be created in React can be created using vanilla JavaScript, but React makes it easy to maintain and easy to read — it turns long spaghetti JavaScript into a nice programming language that's easy to work on with your peers.

Who uses React.js:

Pretty much everybody is React these days. Whether it's a small part of a website that has complex logic, or an entire website like Netflix. Pretty much everybody and their dogs are writing React these days. And that's why it's important to learn.

About the teacher:

Hi, I'm Kalob Taulien, your teacher. I've been teaching people how to code since 2012. I have taught and mentored hundreds of thousands of students in my teaching career.

I have managed to win a top-ranking spot in the development community as a web development teacher.

Today I'm going to be teaching you React.js. If you've never written react, that's OK, I'll hold your hand through the beginning phases. If you've never written React, you WILL need to know JavaScript first. So please don't start this course unless you're familiar with JavaScript. 

Your project:

  • Throughout this course, we're going to create a random Star Wars character generator using an API request. Together we'll build out the fundamental parts of an application like that. 
  • Then as your final project, you're going to swap out the API request for a different endpoint, and add images to your project to make it more visually appealing. 

Requirements:

  • Must know HTML, CSS, and plain JavaScript
  • Must be able to download and install Node.js (I'll show you how) 
  • Must be able to download and install files. 

The course project

Create a random Star Wars Character Generator from scratch using React.js and improve what we built together by adding image support homeworld text support. 

In this class we'll build out the fundamentals of an application like this, but it will be your capstone project to improve it and make it more visually appealing by adding images.

I'll be teaching you everything you need to know to master your project and create a fun and engaging final project. 

You can also download my final project source code to see how exactly I made my final project look the way it does above. 

20 Lessons

0:01:43
What is React.js?
free preview
0:03:49
Installing Node.js and npm
free preview
0:04:46
Starting a new project
0:04:56
React.js syntax
0:03:13
Importing components
0:06:13
JSX syntax
0:05:27
Your first component
0:04:20
Working with props
0:05:30
Click events in React.js
0:07:02
Adding state to your React components
0:03:42
Star Wars component
0:04:52
Pseudo coding
0:02:06
Another React.js click event
0:04:14
How to store data using React state
0:02:42
If conditions in React
View more lessons +

100% of 1 people enjoyed this course!

Joseph Livengood liked this class and said...

I have taken Kalob's courses before and I really like his teaching method. He is the one that introduced me to this site and taught me javascript.

Enroll in this course for $19.97
or $15/mo for unlimited courses

Class benefits

  • Certificate of Completion
  • 14 day free trial
  • 24/7 streaming access
  • Project included
  • Teacher Q&A
  • 1h 25m of on-demand video
  • 1 downloadable file
  • 5 peers to work with
  • Have a coupon?

About the instructor

Hi everybody! I'm Kalob Taulien.

Here's the TL;DR (short) version about me:

  • I have been coding since 1999 and teaching people how to code since 2011
  • I have over 500,000 web development students world-wide
  • I'm on the Wagtail CMS core development team (Wagtail is Python's #1 most popular website making …
View full profile

Access unlimited courses for only $15 per month

Start your 14 day free trial. Cancel at any time.

Join Today