React Js. From The Beginning. W/ Redux And React Router

Learn React from the beginning! Including React Router, redux, hooks, context, front-end Stripe & a big project

What you'll learn

How to use React to make awesome front-end UIs!

How to set up, navigate, and use create-react-app to build React applications with ease

How to use React without webpack or ES6

The React component lifecycle system

Have a good idea how to make a large project (we do a small clone of AirBnB)

Requirements

Familiarity with JavaScript. I don't expect you to be a JS jedi, but you should not be new

Description

TL;DR - React is awesome. I've been teaching it professionally for 5 years and love it. Learn it here!This course:Starting with Angular 1 in 2010, JavaScript frameworks exploded onto the scene and are required by virtually every large website on the Internet. React, which appeared a few years later in 2013  has become the dominant tool in that group. What does that mean for you? You can learn to use the same front-end framework used by Facebook, Amazon, Netflix, BBC, Airbnb, and Ebay, to name a few. And you won't just learn how to use it, but you'll learn the fundamentals around it.What I need from you:I need you to know JavaScript, CSS, and HTML. It's not required to use React, but React makes very heavy use of ES6 (the 2015 update to JavaScript), so the course will use ES6 after the first main section. I will briefly mention how it works as needed, and add a supplemental section that covers those parts.I need you know how to navigate your computer, not be afraid of the terminal, and ask questions as you have them! Why me:I first used React in 2014 for a small company website. I've also used Angular, Vue, and Ember along with most other major UI frameworks and I'm a believer in React. I've taught it professionally for 4 years, and have built sites for some of the largest companies in the United States using React Router and redux alongside. I will teach you one step at a time, whiteboard, and start from ground zero before getting to webpack and eventually Redux. Prepare to start learning the best JavaScript framework!The sections in bold will be finished no later than August 15. I will send out a message when they are complete.Sections:Environment Setup (skip if you have node installed already)React 101State and EventsThe Component Lifecycle and HTTPProject 1 - Flash Card app (AWS services)React RouterReduxRedux Middleware (redux-promise and redux-thunk)AirBnB Clone with ReduxOverview of Auth From a Front-end PerspectiveBuilding/Preparing React for DeploymentHooks - the "2020 way" to do ReactContextSupplemental - ES6 for React

Overview

Section 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)

Section 2: React 101

Lecture 5 Introduction - early course layout - and github repo

Lecture 6 Optional - A brief history of JS and why we need React

Lecture 7 How we'll use Express in this section

Lecture 8 REQUIRED - Making a basic Express server for development

Lecture 9 Your First React Program

Lecture 10 Uhh, What Just Happend?

Lecture 11 JSX & Babel

Lecture 12 ReactDom.render() and the virtual DOM

Lecture 13 Components

Lecture 14 Props

Lecture 15 PRACTICE! - Using Components and Props

Lecture 16 Multiple Components in an Array

Lecture 17 Components as Classes

Lecture 18 PRACTICE! - Class, Array. and Components

Lecture 19 Breaking Down Components - Part 1

Lecture 20 Breaking Down Components - Part 2

Lecture 21 Section Review

Section 3: State and Events

Lecture 22 Create React App - making development easier

Lecture 23 Create React App - the node modules

Lecture 24 Coding in Create React App

Lecture 25 What is state? (no coding)

Lecture 26 State in Action

Lecture 27 State do's and don'ts

Lecture 28 Events in React

Lecture 29 Available events

Lecture 30 Changing state with an event

Lecture 31 Practicing with state

Lecture 32 Practicing with state - walkthrough

Lecture 33 Updated Image URLs

Lecture 34 State and props together

Lecture 35 Stateless Components vs. Stateful Components

Lecture 36 Stateless vs Stateful example

Section 4: The Component Lifecycle and HTTP

Lecture 37 Section Intro

Lecture 38 Getting started with axios & HTTP

Lecture 39 Axios URL

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

Lecture 41 The Component Lifecycle

Lecture 42 The Docs

Lecture 43 The Lifecycle - componentDidMount()

Lecture 44 The Lifecycle - render()

Lecture 45 More practice with render, state, and http

Lecture 46 Adding an input box

Lecture 47 The Lifecycle - componentDidUpdate()

Lecture 48 Practice - Refactoring the weather widget

Lecture 49 The Lifecycle - componentWillUnmount()

Lecture 50 The plan for the next few videos

Lecture 51 Managing forms with State

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

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

Lecture 54 Styling components

Section 5: Project - AWS flash cards - Practice with state and component lifecycle

Lecture 55 Project Demo

Lecture 56 Setting up our app structure

Lecture 57 QuizBar and FontAwesome glyphicons

Lecture 58 QuizType - a component inside QuizBar

Lecture 59 Cleaning up QuizBar

Lecture 60 IMPORTANT: A fix for the next video

Lecture 61 Flash Card Component

Lecture 62 Getting our data with Axios

Lecture 63 Adding a spinner

Lecture 64 Adding Flash Card Component Logic

Lecture 65 Moving State up one last time

Section 6: React Router

Lecture 66 IMPORTANT: React Router v6 update

Lecture 67 Intro to React Rrouter

Lecture 68 Router, Route, and Link

Lecture 69 NavLink and Making a NavBar

Lecture 70 Routes with Component vs. Render

Lecture 71 Nested Routes

Lecture 72 Router Component Props - history, location, and match

Lecture 73 Dynamic URL's and URL params & Short Review

Lecture 74 Endpoint for next lecture

Lecture 75 Mini-Project - Movie Fan App

Lecture 76 Mini-Project - Continued

Lecture 77 Mini-Project - Finished

Section 7: Redux

Lecture 78 What is Redux?

Lecture 79 Redux and React

Lecture 80 How Redux works

Lecture 81 Wiring Up Redux

Lecture 82 CONNECTing Redux and React

Lecture 83 Adding more reducers to our store

Lecture 84 Adding an action creator and action

Lecture 85 Adding the dispatcher

Lecture 86 Adding Meat and Produce

Lecture 87 STOP: REVIEW

Lecture 88 Adding the Router

Lecture 89 Getting a little more out of redux

Lecture 90 Getting a little more out of redux - an action

Section 8: Redux Middleware - async action creators!

Lecture 91 Section Intro

Lecture 92 Quick review of reducers, actions and action creators

Lecture 93 Trying axios/http without middleware (overview of codebase)

Lecture 94 Redux-promise

Lecture 95 Redux-thunk

Section 9: Project - Airbnb Clone

Lecture 96 Project Intro & Demo

Lecture 97 Thinking through our app structure

Lecture 98 Create React App and folder setup

Lecture 99 Index.js & Redux

Lecture 100 App.js & React Router

Lecture 101 Overview of the api

Lecture 102 NavBar Component

Lecture 103 Home - SearchBox (mostly markup and css)

Lecture 104 City, Slider, & Spinner components

Lecture 105 Font Awesome URL's

Lecture 106 Make the Spinner component

Lecture 107 Add Cities to the homepage (with some refactoring)

Lecture 108 Add the Slider and put the cities inside

Lecture 109 Refactor Home - Part 1

Lecture 110 Refactor Home - Part 2 - Promise.all()

Lecture 111 Build Activties

Lecture 112 Finish Activity component

Lecture 113 Houses assignment

Lecture 114 Single City Component

Lecture 115 Single City Component - Part 2

Lecture 116 Single City Component - Part 3

Lecture 117 Login, Registration, & Modal

Lecture 118 The return of REDUX!! Build the Modal

Lecture 119 Filling in the Modal content

Lecture 120 We'll pick up on Airbnb after a short section on auth!

Section 10: A front-end overview of authentication

Lecture 121 Auth - intro

Lecture 122 What is HTTP and what does it have to do with auth?

Lecture 123 An actual HTTP message

Lecture 124 The problem with HTTP and Auth

Lecture 125 How a JWT works

Section 11: Project - Airbnb Clone Continued

Lecture 126 SignUp Component Refactor

Lecture 127 Login Component Refactor

Lecture 128 Login and Signup endpoints

Lecture 129 Getting our JWT (JSON Web Token)

Lecture 130 Getting feedback to the user

Lecture 131 Auth and redux

Lecture 132 Updating components on signup/login

Lecture 133 Logout

Lecture 134 Login Challenge

Lecture 135 Redux Persist (middleware) - keep redux (and login) from resetting!

Lecture 136 Redux Persist - Part 2

Lecture 137 Remaining Project Goals

Lecture 138 SingleCity, many Venues component

Lecture 139 Displaying reserve a room

Lecture 140 Momentjs & Validate Reserve Dates

Lecture 141 Stripe Key

Lecture 142 Adding an external Script file to a component

Lecture 143 An annoying bug fix

Lecture 144 Integration with Stripe

Lecture 145 Setup payment success page and & component

Lecture 146 Payment Success Structure (markup)

Lecture 147 Payment Success Data

Lecture 148 Payment Success Finishing Options

Lecture 149 Markup without data for Payment Success

Lecture 150 Markup with data for Payment Success

Lecture 151 Note: Reservations and Users

Lecture 152 Account Page Prep

Lecture 153 Account Page Prep Instructions

Lecture 154 Account Page Review

Lecture 155 AccountSideBar and Page Routes

Lecture 156 Fetch and sort data, and pass to Bookings

Lecture 157 Booking Markup

Lecture 158 Cancel a reservation

Lecture 159 Search Box

Lecture 160 Search Page

Lecture 161 Building our app (or any React app)

Section 12: Deploying a React App

Lecture 162 Intro & npm run build

Lecture 163 A tour of the build folder

Lecture 164 Building at the root domain

Lecture 165 Loading Production… Locally

Lecture 166 The homepage property

Lecture 167 React.lazy

Lecture 168 React.Suspense

Section 13: Before we talk about Hooks…

Lecture 169 Section Intro

Lecture 170 An intro to hooks and should you use them?

Lecture 171 Using React to explain OOP and functional programming - BACKGROUND

Lecture 172 Paradigm Chart

Lecture 173 Paradigm 1 - Imperative & Procedural

Lecture 174 Paradigm 2 - Imperative & OOP

Lecture 175 Paradigm 3 - Procedural & Functional

Lecture 176 Paradigm 4 - OOP & Functional

Section 14: Hooks

Lecture 177 Back to Hooks

Lecture 178 The return of the weather widget!

Lecture 179 useEffect

Lecture 180 useEffect explained

Lecture 181 The docs - componentWillUnmount & multiple useEffect

Lecture 182 Refactoring a class - weatherAppHooks

Lecture 183 New Project Clone

Lecture 184 Refactor the Search component

Lecture 185 The Rules of Hooks

Lecture 186 Custom Hooks

Lecture 187 The structure of a custom hook

Lecture 188 Redux with Hooks

Lecture 189 Getting ready for redux - refactor Account

Lecture 190 Using redux with hooks - useSelector

Lecture 191 Using redux with hooks - useDispatch

Lecture 192 useDispatch in Action - Login

Lecture 193 useStore hook

Lecture 194 All 4 hooks! NavBar

Lecture 195 Challenge - Refactoring remainder of AirBnB

Section 15: Context

Lecture 196 What is context?

Lecture 197 Making a context

Lecture 198 Context Provider

Lecture 199 Context Consumer

Lecture 200 Changing Context down stream

Lecture 201 Short Review of What Context Is

Lecture 202 Context with classes

Lecture 203 I’ve heard it replaces Redux. Does it?

Section 16: Supplemental

Lecture 204 Intro to section

Lecture 205 Let & Const

Lecture 206 Template Literals

Lecture 207 Object Literals

Lecture 208 Destructuring and Spread

Lecture 209 Rocket Functions

Lecture 210 Classes - constructor/prototype review (the original way)

Lecture 211 Classes and sub classes - the 2015 version of a constructor

Lecture 212 Overriding methods in child classes

Lecture 213 How we'll use classes in this course

Devs who know how to use JavaScript and want to start using React to make their UI's easier to manage