English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 314 lectures (38h 48m) | 12.79 GB
Just published! Follow the same curriculum I teach my students in SF. 10+ projects including one HUGE application!
EXPANDED and UPDATED to include new sections on Next JS and Server-Side Rendering!
Welcome to the best online resource for learning React! Published in April 2019, this course is brand new and covers the latest in React. This course follows the exact same React curriculum my in-person bootcamp students follow in San Francisco, where students have gone on to get jobs at places like Google, Apple, Pinterest, & Linkedin. This is the most polished React course online, and it’s the only course that is based on REAL bootcamp curriculum that has been tried and tested in the classroom.
This course builds up concepts one at a time, cementing each new topic with an expertly designed exercise or project to test your knowledge. It includes a huge variety of beautiful exercises, projects, and games that we create together from scratch. Sometimes we mix things up and give you a broken React app and ask you to fix it or optimize the code. Check out the promo video to see a couple of the course exercises. The course culminates in one huge capstone project, which is the largest project I’ve ever built for any of my online courses. I’m really excited about it
React is the most popular JS library around, and there’s never been a better time to learn it! Companies all over the world are turning to React to help manage their JavaScript chaos, including tech giants like Facebook, Airbnb, and Uber. React is consistently voted the most loved and most wanted front-end framework by developers, and it’s clear why! React is a joy to use, and it makes writing maintainable and modular JavaScript code a breeze.
If you’re new to frameworks, React is the ideal first framework to learn. It’s easy enough to learn the basics, but it doesn’t teach you bad habits. Even if you’ve already enrolled in another React course, this course is worth your time for the exercises and projects alone! This curriculum is the product of two years of development and iteration in the bootcamp classroom. All the lectures, exercises, and projects have been tweaked and improved based on real student feedback. You won’t find anything else online as structured and polished as this course.
The highlights:
- Learn React, from the very basics up to advanced topics like Next JS, React Router, Higher Order Components and Hooks and the Context API.
- Build one massive capstone application, complete with drag & drop, animations, route transitions, complex form validations, and more.
- Learn the latest in React, including Hooks (my favorite part of React!). We build a complete app using Hooks, including multiple custom hooks.
- Learn state management using the useContext and useReducer hooks, to mimic some of the functionality of Redux.
- You get tons of detailed handouts and cheatsheets that you can refer back to whenever you need to. Think of this as a React textbook you can study at any point if you get tired of videos.
What you’ll learn
- React Hooks! (My favorite part of React!)
- The new Context API
- State management w/ useReducer + use Context (Redux Lite)
- The basics of React (props, state, etc)
- Master React Router
- Build tons of projects, each with a beautiful interface
- React State Management Patterns
- Drag & Drop With React
- Writing dynamically styled components w/ JSS
- Common React Router Patterns
- Work with tons of libraries and tools
- Integrate UI libraries like Material UI and Bootstrap into your React apps
- React Design Patterns and Strategies
- Learn the ins and outs of JSS!
- Learn how to easily use React to build responsive apps
- Add complex animations to React projects
- Debug and Fix buggy React code
- Optimize React components
- Integrate React with APIs
- Learn the basics of Webpack in a free mini-course!
- DOM events in React
- Forms and complex validations in React
- Using Context API w/ Hooks
Table of Contents
A Taste of React
Welcome to the Course!
Join The Community!
Intro to React
Is React a Framework or Library
Introducing Components!
Looking at a Large App
Setting Up Your Server
Writing Our First Component
Function Vs. Class Components
Download All Code, Slides, & Handouts
Introducing JSX
Basics Rules of JSX
How JSX Works Behind the Scenes
Embedding JavaScript in JSX
Conditionals in JSX
Standard React App Layout
Props and More
Intro to React Props
Props are Immutable
Other Types of Props
Pie Chart Component Demo w Props
EXERCISE Slot Machine
EXERCISE Slot Machine Solution
Looping in JSX
Adding Default Props
Styling React
Introducing Create React App
Intro to Create React App
Ways of Installing CRA
Creating a New App
Starting Up the Server
Modules Import & Export Crash Course
EXERICSE Fruits Modules
EXERCISE Fruits Modules Solution
Create React App Conventions
CSS and Assets in Create React App
Pokedex Project
Intro To Pokedex Exercise
Creating Pokecard Component
Adding Pokedex Component
Styling PokeCard and Pokedex
Adding Fancier Images
The PokeGame Component
Styling Pokegame
Introducing State
State Goals
Quick Detour React Dev Tools
State in General
Initializing State
IMPORTANT! ALTERNATE SYNTAX
WTF is super() Vs. super(props)
Setting State Correctly
Crash Course Click Events in React
ALTERNATE SYNTAX PT 2
EXERCISE State Clicker
EXERCISE State Clicker Solution
The State As Props Design Pattern
React State Dice Exercise
Introduction to Dice Exercise
Writing the Die Component
Adding the RollDice Component
Styling RollDice
Animating Dice Rolls!
React State Patterns
Updating Existing State
Mutating State the Safe Way
Designing State Minimizing State
Designing State Downward Data Flow
State Design Example Lottery
State Design Example LottoBall Component
State Design Example Lottery Component
State Exercises!
State Exercise 1 Coin Flipper
State Exercise 1 Coin Flipper Solution
State Exercise 2 Color Boxes
State Exercise 2 Color Boxes Solution
The World of React Events
Commonly Used React Events
The Joys of Method Binding (
Alternative Binding With Class Properties
Binding With Arguments
Passing Methods to Child Components
Parent-Child Method Naming
Quick Detour React Keys
Hangman Exercise
Introducing The Hangman Exercise
Starter Code Walkthrough
Adding Keys
Tracking Incorrect Guesses
Adding Game Over
Adding Alt Text
Randomizing Words
Adding a Reset Button
Making the Game Winnable & Styling
Lights Out Game
Introducing Lights Out
Exploring the Starter Code
Displaying the Game Board
Flipping Cells
Winning the Game
Styling the Game
Forms in React
Intro to React Forms
Writing Forms w Multiple Inputs
The htmlFor Attribute
Design Pattern Passing Data Upwards
Using the UUID Library
Forms Exercise
Introduction to Box Maker Exercise
Adding the BoxList Component
Creating the BoxForm Component
Removing Color Boxes
Todo List Project
Project Overview
TodoList and TodoItem Components
Adding NewTodoForm
Removing Todos
Editing Todos
Toggling Todo Completion
Styling the Todo App
Building Yahtzee
Introducing Yahtzee
Yahtzee Starter Code Walkthrough
Fixing the Dice Locking Bug
Reading the Rules Classes
Adding In New Rules
Fixing the Re-Rolling Bug
Preventing Score Reuse
Adding Score Descriptions
Replacing Text w Dice Icons
Animating Dice Rolls
Final Touches and Bug Fixes
React Lifecycle Methods
Introducing ComponentDidMount
Loading Data Via AJAX
Adding Animated Loaders
Loading Data With Async Functions
Introducing ComponentDidUpdate
PrevProps and PrevState in ComponentDidUpdate
Introducing ComponentWillUnmount
LifeCycle Methods & API Exercise
Introducing the Cards API Project
Requesting a Deck ID
Fetching New Cards with AJAX
Adding the Card Component
Randomly Transforming Cards
Styling Cards and Deck
Building the Dad Jokes App
Introducing the Dad Jokes Project
Fetching New Jokes From the API
Styling JokeList Component
Upvoting and Downvoting Jokes
Styling the Joke Component
Adding Dynamic Colors and Emojis
Syncing with LocalStorage
Fixing Our LocalStorage Bug
Adding a Loading Spinner
Preventing Duplicate Jokes
Sorting Jokes
Styling The Fetch Button
Adding Animations
React Router
Intro to Client-Side Routing
Adding Our First Route
Using Switch and Exact
Intro to the Link Component
Adding in NavLinks
Render prop vs. Component prop in Routes
Vending Machine Exercise
Intro to Vending Machine Exercise
Adding The Vending Machine Routes
Adding the Links
Creating the Navbar
NEW CONCEPT Props.children
React Router Patterns
Working with URL Params
Multiple Route Params
Adding a 404 Not Found Route
Writing a Simple Search Form
The Redirect Component
Pushing onto the History Prop
Comparing History and Redirect
withRouter Higher Order Component
Implementing a Back Button
Router Exercises Part 2
Exercise Introduction
Working with Bootstrap in React
Writing the DogList Component
Adding the DogDetails Component
Creating Our Navbar Component
Refactoring & Extracting Our Routes
A Couple Small Tweaks
Styling the App
The Massive Color Project Pt 1
Introducing the Color App
The New Stuff We Cover in This Project
Finding the Final Project Code
Creating the Palette Component
Color Box Basics
Styling Color Box
Copying to Clipboard
Copy Overlay Animation
Generating Shades of Colors
Adding Color Slider
Styling the Color Slider
Adding Navbar Component
The Massive Color Project Pt 2
Intro to Material UI & Adding Select
Adding Snackbar
Add Palette Footer
Integrating React Router
Finding Palettes
PaletteList and Links
JSS & withStyles (Color App)
Introducing withStyles HOC
Styling MiniPalette with JSS
Styling PaletteList with JSS
Finishing Up MiniPalette
The Massive Color Project Pt 3
Linking To Palettes
Brainstorming Single Color Palette
Adding More Links
Creating Single Color Palette
Displaying Shades in Single Color Palette
Adding Navbar and Footer
Add Go Back Box
Dynamic Text Color w Luminosity
Refactoring More Styles
Finish Refactoring Color Box
The Massive Color Project Pt 4
Refactor Palette Styles
Move Styles Into New Folder
Refactor Navbar CSS
Overview of PaletteForm
Adding NewPaletteForm
Adding Slide-Out Drawer
Adding Color Picker Component
Connecting Color Picker to Button
Creating Draggable Color Box
Introducing Form Validator
The Massive Color Project Pt 5
Saving New Palettes
Styling Draggable Color Box
Adding Color Box Delete
It’s Drag and Drop Time!
Clear Palette and Random Color Buttons
Extract New Palette Nav
Extract Color Picker Component
Styling Palette Form Nav
Styling Color Picker
The Massive Color Project Pt 6
Styling Dialog
Closing Form & Adding Emoji
Finish Emoji Picker Form
Moving JSS Styles Out
Tweak Form Styles
Saving to LocalStorage
Adding MiniPalette Delete Button
Finish MiniPalette Delete
Create Responsive Sizes Helper
Make Color Box Responsive
Make Form & Navbar Responsive
The Massive Color Project Pt 7
Make Palette List Responsive
Add SVG Background
Fade Animations w Transition Group
Delete Confirmation Dialog
Fix DeleteDrag Bug
Animating Route Transitions
Refactoring Route Transitions
Optimizing w PureComponent
Cleaning Things Up
More Cleaning Up!
Fix Issues w New Palette Form
Prevent Duplicate Random Colors
Introducing React Hooks
Intro to Hooks & useState
Building a Custom Hook useToggleState
Building a Custom Hook useInputState
The useEffect Hook
Fetching Data w the useEffect Hook
React Hooks Project
Intro to Hooks Project
Adding Our Form With Hooks
Adding Todo Item Component
Toggling and Deletion w Hooks
Editing w Hooks
Small Style Tweaks
LocalStorage w UseEffect Hook
Refactoring to a Custom Hook
Creating our UseLocaslStorateState Hook
Introducing The Context API!
Where We Are Heading
THE CODE FOR THIS SECTION!
What Even is Context
Adding a Responsive Navbar To Our Context App
Adding a Responsive Form to our Context App
Intro to Context and Providers
Consuming A Context
Updating A Context Dynamically
Writing the Language Context
Consuming 2 Contexts Enter the Higher Order Component
Using Context with Hooks
THE CODE FOR THIS SECTION
THE CODE FOR THIS SECTION!
Introducing the useContext Hook
Consuming Multiple Contexts w Hooks
Rewriting a Context Provider w Hooks
Context Providers w Custom Hooks
Hookify-ing the Rest of the App
State Management w useReducer & useContext
IMPORTANT GET THE CODE HERE!
Adding In Todos Context
Consuming the Todo Context
The Issues w Our Current Approach
WTF Is a Reducer
First useReducer Example
Defining our Todo Reducer
Splitting Into 2 Contexts
Optimizing w Memo
Custom Hook Reducer + LocalStorage
Next JS
Intro to Next
What is Server Side Rendering
Getting Started w Next
Basic Routing in Next
Next’s Link Component
Links Without Anchor Tags
Components Vs. Pages
Overriding the Default _app.js
Next Fetching & Server API
Introducing getInitialProps
Fetching Posts w getInitialProps
Query Strings in Next
withRouter Higher Order Component
Fetching Comments
The as Prop
Custom Server Without Express
Custom Server-Side Routes w Express
Bonus Webpack Mini Course – Your Own Simple Version of Create React App
What Is Webpack
Installing and Running Webpack
Imports, Exports, and Webpack
Configuring Webpack
Webpack Loaders, CSS, & SASS
Cache Busting and Plugins
Splitting Dev & Production
Html-loader, file-loader, and Clean Webpack Plugin
Multiple Entry Points
Extract and Minify CSS
Resolve the captcha to access the links!