React js. From the beginning. w/ Redux and React Router

Course Curriculum

Chapter 1: Introduction and housekeeping

Lecture 1: Github repo, course layout, and how to get help

Lecture 2: Installing Nodejs and VSCode – MAC (Skip if you have it)

Lecture 3: Installing Nodejs on a PC (Skip if you have)

Lecture 4: Using Visual Studio Code on a PC (Skip if you have)

Chapter 2: React 101

Lecture 1: Introduction – early course layout – and github repo

Lecture 2: Optional – A brief history of JS and why we need React

Lecture 3: How we'll use Express in this section

Lecture 4: REQUIRED – Making a basic Express server for development

Lecture 5: Your First React Program

Lecture 6: Uhh, What Just Happend?

Lecture 7: JSX & Babel

Lecture 8: ReactDom.render() and the virtual DOM

Lecture 9: Components

Lecture 10: Props

Lecture 11: PRACTICE! – Using Components and Props

Lecture 12: Multiple Components in an Array

Lecture 13: Components as Classes

Lecture 14: PRACTICE! – Class, Array. and Components

Lecture 15: LoremPixel Repalcement

Lecture 16: Breaking Down Components – Part 1

Lecture 17: Breaking Down Components – Part 2

Lecture 18: Section Review

Chapter 3: State and Events

Lecture 1: Create React App – making development easier

Lecture 2: Create React App – the node modules

Lecture 3: Coding in Create React App

Lecture 4: What is state? (no coding)

Lecture 5: State in Action

Lecture 6: State do's and don'ts

Lecture 7: Events in React

Lecture 8: Available events

Lecture 9: Changing state with an event

Lecture 10: Practicing with state

Lecture 11: Practicing with state – walkthrough

Lecture 12: Updated Image URLs

Lecture 13: State and props together

Lecture 14: Stateless Components vs. Stateful Components

Lecture 15: Stateless vs Stateful example

Chapter 4: The Component Lifecycle and HTTP

Lecture 1: Section Intro

Lecture 2: Getting started with axios & HTTP

Lecture 3: Axios URL

Lecture 4: Using Axios and a free api (openweathermap.org)

Lecture 5: The Component Lifecycle

Lecture 6: The Docs

Lecture 7: The Lifecycle – componentDidMount()

Lecture 8: The Lifecycle – render()

Lecture 9: More practice with render, state, and http

Lecture 10: Adding an input box

Lecture 11: The Lifecycle – componentDidUpdate()

Lecture 12: Practice – Refactoring the weather widget

Lecture 13: The Lifecycle – componentWillUnmount()

Lecture 14: The plan for the next few videos

Lecture 15: Managing forms with State

Lecture 16: Data flows down, so pass state up! Part 1

Lecture 17: Data flows down, so pass state up! Part 2

Lecture 18: Styling components

Chapter 5: Project – AWS flash cards – Practice with state and component lifecycle

Lecture 1: Project Demo

Lecture 2: Setting up our app structure

Lecture 3: QuizBar and FontAwesome glyphicons

Lecture 4: QuizType – a component inside QuizBar

Lecture 5: Cleaning up QuizBar

Lecture 6: IMPORTANT: A fix for the next video

Lecture 7: Flash Card Component

Lecture 8: Getting our data with Axios

Lecture 9: Adding a spinner

Lecture 10: Adding Flash Card Component Logic

Lecture 11: Moving State up one last time

Chapter 6: React Router

Lecture 1: IMPORTANT: React Router v6 update

Lecture 2: Intro to React Rrouter

Lecture 3: Router, Route, and Link

Lecture 4: NavLink and Making a NavBar

Lecture 5: Routes with Component vs. Render

Lecture 6: Nested Routes

Lecture 7: Router Component Props – history, location, and match

Lecture 8: Dynamic URL's and URL params & Short Review

Lecture 9: Endpoint for next lecture

Lecture 10: Mini-Project – Movie Fan App

Lecture 11: Mini-Project – Continued

Lecture 12: Mini-Project – Finished

Chapter 7: Redux

Lecture 1: What is Redux?

Lecture 2: Redux and React

Lecture 3: How Redux works

Lecture 4: Wiring Up Redux

Lecture 5: CONNECTing Redux and React

Lecture 6: Adding more reducers to our store

Lecture 7: Adding an action creator and action

Lecture 8: Adding the dispatcher

Lecture 9: Adding Meat and Produce

Lecture 10: STOP: REVIEW

Lecture 11: Adding the Router

Lecture 12: Getting a little more out of redux

Lecture 13: Getting a little more out of redux – an action

Chapter 8: Redux Middleware – async action creators!

Lecture 1: Section Intro