IIRF Online > Development > Web Development > React JS > The Modern React Bootcamp (Hooks, Context, NextJS, Router)
The Modern React Bootcamp (Hooks, Context, NextJS, Router) by Udemy
Just published! Follow the same curriculum I teach my students in SF. 10+ projects including one HUGE application!
Course Highlights
- 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
Skills you will learn!
Curriculum
10 Topics
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
5 Topics
Basics Rules of JSX
How JSX Works Behind the Scenes
Embedding JavaScript in JSX
Conditionals in JSX
Standard React App Layout
9 Topics
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
9 Topics
Intro to Create React App
2 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
7 Topics
Intro To Pokedex Exercise
Creating Pokecard Component
Adding Pokedex Component
Styling PokeCard and Pokedex
Adding Fancier Images
The PokeGame Component
Styling Pokegame
12 Topics
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
5 Topics
Introduction to Dice Exercise
Writing the Die Component
Adding the RollDice Component
Styling RollDice
Animating Dice Rolls!
7 Topics
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
4 Topics
State Exercise 1: Coin Flipper
State Exercise 1: Coin Flipper Solution
State Exercise 2: Color Boxes
State Exercise 2: Color Boxes Solution
7 Topics
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
9 Topics
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
6 Topics
Introducing Lights Out
Exploring the Starter Code
Displaying the Game Board
Flipping Cells
Winning the Game
Styling the Game
5 Topics
Intro to React Forms
Writing Forms w/ Multiple Inputs
The htmlFor Attribute
Design Pattern: Passing Data Upwards
Using the UUID Library
4 Topics
Introduction to Box Maker Exercise
Adding the BoxList Component
Creating the BoxForm Component
Removing Color Boxes
7 Topics
Project Overview
TodoList and TodoItem Components
Adding NewTodoForm
Removing Todos
Editing Todos
Toggling Todo Completion
Styling the Todo App
11 Topics
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
7 Topics
Introducing ComponentDidMount
Loading Data Via AJAX
Adding Animated Loaders
Loading Data With Async Functions
Introducing ComponentDidUpdate
PrevProps and PrevState in ComponentDidUpdate
Introducing ComponentWillUnmount
6 Topics
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
13 Topics
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
6 Topics
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
5 Topics
Intro to Vending Machine Exercise
Adding The Vending Machine Routes
Adding the Links
Creating the Navbar
NEW CONCEPT: Props.children
9 Topics
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
8 Topics
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
12 Topics
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
6 Topics
Intro to Material UI & Adding Select
Adding Snackbar
Add Palette Footer
Integrating React Router
Finding Palettes
PaletteList and Links
4 Topics
Introducing withStyles HOC
Styling MiniPalette with JSS
Styling PaletteList with JSS
Finishing Up MiniPalette
10 Topics
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
10 Topics
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
10 Topics
Saving New Palettes
Add Palette Name Form
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
12 Topics
Adding Modals/Dialogs
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
12 Topics
Make Palette List Responsive
Add SVG Background
Fade Animations w/ Transition Group
Delete Confirmation Dialog
Fix Delete/Drag 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
5 Topics
Intro to Hooks & useState
Building a Custom Hook: useToggleState
Building a Custom Hook: useInputState
The useEffect Hook
Fetching Data w/ the useEffect Hook
9 Topics
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
10 Topics
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
7 Topics
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
10 Topics
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
8 Topics
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
8 Topics
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
11 Topics
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
The Modern React Bootcamp (Hooks, Context, NextJS, Router)
Related React JS Courses
Thank You!
Your review has been submitted successfully.