React 101 – basics complete & latest. Forms, routing, async

Course Curriculum

Chapter 1: Welcome

Lecture 1: Why me?

Lecture 2: Why react?

Lecture 3: Why this course?

Lecture 4: Writing simple "Hello world" react application

Lecture 5: How to get help & asking good questions

Chapter 2: Setting up your environment

Lecture 1: Code editor, node.js with npm, yarn

Chapter 3: Inside React without JSX

Lecture 1: Intro

Lecture 2: index.html is all we need!

Lecture 3: Adding react

Lecture 4: React App without JSX

Lecture 5: What's going on?

Lecture 6: What are those magical props?

Lecture 7: Add more people!

Lecture 8: Summary

Lecture 9: Additional resources

Chapter 4: Inside React with JSX

Lecture 1: Intro

Lecture 2: Creating an application with create-react-app

Lecture 3: Why do we even need something like create-react-app?

Lecture 4: Project structure

Lecture 5: Running that default setup

Lecture 6: Cleaning out our application

Lecture 7: Playing with JSX and hot reloading

Lecture 8: Using different files

Lecture 9: Adding styles

Lecture 10: Adding a dependency and normalizing the styles with normalize.css

Lecture 11: Finishing styles

Lecture 12: Summary

Lecture 13: Additional resources

Chapter 5: Props & Events

Lecture 1: Intro

Lecture 2: Preparing a clean app

Lecture 3: Functional components

Lecture 4: Class components

Lecture 5: Events on functional components

Lecture 6: Events on classes

Lecture 7: Extracting and one-way binding

Lecture 8: Proceeding with the class component

Lecture 9: Passing things to the parent

Lecture 10: Refactor & Styles

Lecture 11: Summary

Lecture 12: Additional resources

Chapter 6: State & Lifecycle

Lecture 1: Intro

Lecture 2: Preparing a clean app

Lecture 3: What is state and how it differs from props?

Lecture 4: Adding and accessing state

Lecture 5: Updating the state

Lecture 6: State and props combination

Lecture 7: React Developer Tools

Lecture 8: What does setState do?

Lecture 9: Meet the lifecycle methods

Lecture 10: Common React Lifecycle Methods

Lecture 11: Summary

Lecture 12: Additional resources

Chapter 7: Project #1 – Tic-tac-toe

Lecture 1: Intro & Setup

Lecture 2: Making squares

Lecture 3: Board to rule them all!

Lecture 4: X stop it! It's O turn!

Lecture 5: Winning that game

Lecture 6: Resetting the game

Chapter 8: Styling

Lecture 1: Intro

Lecture 2: Why different style options?

Lecture 3: Preparing a clean app

Lecture 4: Normal CSS

Lecture 5: Inline CSS

Lecture 6: Sass & SCSS

Lecture 7: CSS Modules

Lecture 8: CSS in JS (JSS)

Lecture 9: Styled Components / Emotion

Lecture 10: What to choose?

Lecture 11: Summary

Lecture 12: Additional resources

Chapter 9: Project #2 – Landing page

Lecture 1: Intro & Setup

Lecture 2: Normalize, fonts

Lecture 3: Everyone needs a Hero

Lecture 4: Header to be above!

Lecture 5: Form & Addition

Lecture 6: Middle Section

Lecture 7: Right and Left sections

Lecture 8: Don't forget about the footer

Chapter 10: Lists & Keys

Lecture 1: Intro

Lecture 2: Preparing a clean app

Lecture 3: Lists in JavaScript and JSX

Lecture 4: Plenty of different people…

Lecture 5: …render all of them!

Lecture 6: Keys? What are they?

Lecture 7: Making our keys work

Lecture 8: Questions, questions, questions!

Lecture 9: Summary

Lecture 10: Additional resources

Chapter 11: Project #3 – Todo list

Lecture 1: Intro & Setup