The Modern React Bootcamp Hooks Context NextJS Router

The Modern React Bootcamp Hooks Context NextJS Router

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

Requirements

You’ll need some experience with HTML, CSS, and JavaScript, but you don’t need to be an expert.
You don’t need advanced JavaScript knowledge. ES7 features are explained in the course as we go.

Description

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 get:250+ videosSlick, interactive slide decks custom made for each sectionDetailed handouts and cheatsheets, the React “textbook”.Dozens of exercises, projects, and quizzes.One massive code-along project with nearly 20 different React components.Free Webpack Mini Course!

Overview

Section 1: A Taste of React

Lecture 1 Welcome to the Course!

Lecture 2 Join The Community!

Lecture 3 Intro to React

Lecture 4 Is React a Framework or Library?

Lecture 5 Introducing Components!

Lecture 6 Looking at a Large App

Lecture 7 Setting Up Your Server

Lecture 8 Writing Our First Component

Lecture 9 Function Vs. Class Components

Lecture 10 Download All Code, Slides, & Handouts

Section 2: Introducing JSX

Lecture 11 Basics Rules of JSX

Lecture 12 How JSX Works Behind the Scenes

Lecture 13 Embedding JavaScript in JSX

Lecture 14 Conditionals in JSX

Lecture 15 Standard React App Layout

Section 3: Props and More

Lecture 16 Intro to React Props

Lecture 17 Props are Immutable?

Lecture 18 Other Types of Props

Lecture 19 Pie Chart Component Demo w/ Props

Lecture 20 EXERCISE: Slot Machine

Lecture 21 EXERCISE: Slot Machine Solution

Lecture 22 Looping in JSX

Lecture 23 Adding Default Props

Lecture 24 Styling React

Section 4: Introducing Create React App

Lecture 25 Intro to Create React App

Lecture 26 2 Ways of Installing CRA

Lecture 27 Creating a New App

Lecture 28 Starting Up the Server

Lecture 29 Modules: Import & Export Crash Course

Lecture 30 EXERICSE: Fruits Modules

Lecture 31 EXERCISE: Fruits Modules Solution

Lecture 32 Create React App Conventions

Lecture 33 CSS and Assets in Create React App

Section 5: Pokedex Project

Lecture 34 Intro To Pokedex Exercise

Lecture 35 Creating Pokecard Component

Lecture 36 Adding Pokedex Component

Lecture 37 Styling PokeCard and Pokedex

Lecture 38 Adding Fancier Images

Lecture 39 The PokeGame Component

Lecture 40 Styling Pokegame

Section 6: Introducing State

Lecture 41 State Goals

Lecture 42 Quick Detour: React Dev Tools

Lecture 43 State in General

Lecture 44 Initializing State

Lecture 45 IMPORTANT! ALTERNATE SYNTAX

Lecture 46 WTF is super() Vs. super(props)

Lecture 47 Setting State Correctly

Lecture 48 Crash Course: Click Events in React

Lecture 49 ALTERNATE SYNTAX PT 2

Lecture 50 EXERCISE: State Clicker

Lecture 51 EXERCISE: State Clicker Solution

Lecture 52 The “State As Props” Design Pattern

Section 7: React State Dice Exercise

Lecture 53 Introduction to Dice Exercise

Lecture 54 Writing the Die Component

Lecture 55 Adding the RollDice Component

Lecture 56 Styling RollDice

Lecture 57 Animating Dice Rolls!

Section 8: React State Patterns

Lecture 58 Updating Existing State

Lecture 59 Mutating State the Safe Way

Lecture 60 Designing State: Minimizing State

Lecture 61 Designing State: Downward Data Flow

Lecture 62 State Design Example: Lottery

Lecture 63 State Design Example: LottoBall Component

Lecture 64 State Design Example: Lottery Component

Section 9: State Exercises!

Lecture 65 State Exercise 1: Coin Flipper

Lecture 66 State Exercise 1: Coin Flipper Solution

Lecture 67 State Exercise 2: Color Boxes

Lecture 68 State Exercise 2: Color Boxes Solution

Section 10: The World of React Events

Lecture 69 Commonly Used React Events

Lecture 70 The Joys of Method Binding 🙁

Lecture 71 Alternative Binding With Class Properties

Lecture 72 Binding With Arguments

Lecture 73 Passing Methods to Child Components

Lecture 74 Parent-Child Method Naming

Lecture 75 Quick Detour: React Keys

Section 11: Hangman Exercise

Lecture 76 Introducing The Hangman Exercise

Lecture 77 Starter Code Walkthrough

Lecture 78 Adding Keys

Lecture 79 Tracking Incorrect Guesses

Lecture 80 Adding Game Over

Lecture 81 Adding Alt Text

Lecture 82 Randomizing Words

Lecture 83 Adding a Reset Button

Lecture 84 Making the Game Winnable & Styling

Section 12: Lights Out Game

Lecture 85 Introducing Lights Out

Lecture 86 Exploring the Starter Code

Lecture 87 Displaying the Game Board

Lecture 88 Flipping Cells

Lecture 89 Winning the Game

Lecture 90 Styling the Game

Section 13: Forms in React

Lecture 91 Intro to React Forms

Lecture 92 Writing Forms w/ Multiple Inputs

Lecture 93 The htmlFor Attribute

Lecture 94 Design Pattern: Passing Data Upwards

Lecture 95 Using the UUID Library

Section 14: Forms Exercise

Lecture 96 Introduction to Box Maker Exercise

Lecture 97 Adding the BoxList Component

Lecture 98 Creating the BoxForm Component

Lecture 99 Removing Color Boxes

Section 15: Todo List Project

Lecture 100 Project Overview

Lecture 101 TodoList and TodoItem Components

Lecture 102 Adding NewTodoForm

Lecture 103 Removing Todos

Lecture 104 Editing Todos

Lecture 105 Toggling Todo Completion

Lecture 106 Styling the Todo App

Section 16: Building Yahtzee

Lecture 107 Introducing Yahtzee

Lecture 108 Yahtzee Starter Code Walkthrough

Lecture 109 Fixing the Dice Locking Bug

Lecture 110 Reading the Rules Classes

Lecture 111 Adding In New Rules

Lecture 112 Fixing the Re-Rolling Bug

Lecture 113 Preventing Score Reuse

Lecture 114 Adding Score Descriptions

Lecture 115 Replacing Text w/ Dice Icons

Lecture 116 Animating Dice Rolls

Lecture 117 Final Touches and Bug Fixes

Section 17: React Lifecycle Methods

Lecture 118 Introducing ComponentDidMount

Lecture 119 Loading Data Via AJAX

Lecture 120 Adding Animated Loaders

Lecture 121 Loading Data With Async Functions

Lecture 122 Introducing ComponentDidUpdate

Lecture 123 PrevProps and PrevState in ComponentDidUpdate

Lecture 124 Introducing ComponentWillUnmount

Section 18: LifeCycle Methods & API Exercise

Lecture 125 Introducing the Cards API Project

Lecture 126 Requesting a Deck ID

Lecture 127 Fetching New Cards with AJAX

Lecture 128 Adding the Card Component

Lecture 129 Randomly Transforming Cards

Lecture 130 Styling Cards and Deck

Section 19: Building the Dad Jokes App

Lecture 131 Introducing the Dad Jokes Project

Lecture 132 Fetching New Jokes From the API

Lecture 133 Styling JokeList Component

Lecture 134 Upvoting and Downvoting Jokes

Lecture 135 Styling the Joke Component

Lecture 136 Adding Dynamic Colors and Emojis

Lecture 137 Syncing with LocalStorage

Lecture 138 Fixing Our LocalStorage Bug

Lecture 139 Adding a Loading Spinner

Lecture 140 Preventing Duplicate Jokes

Lecture 141 Sorting Jokes

Lecture 142 Styling The Fetch Button

Lecture 143 Adding Animations

Section 20: React Router:

Lecture 144 Intro to Client-Side Routing

Lecture 145 Adding Our First Route

Lecture 146 Using Switch and Exact

Lecture 147 Intro to the Link Component

Lecture 148 Adding in NavLinks

Lecture 149 Render prop vs. Component prop in Routes

Section 21: Vending Machine Exercise

Lecture 150 Intro to Vending Machine Exercise

Lecture 151 Adding The Vending Machine Routes

Lecture 152 Adding the Links

Lecture 153 Creating the Navbar

Lecture 154 NEW CONCEPT: Props.children

Section 22: React Router Patterns

Lecture 155 Working with URL Params

Lecture 156 Multiple Route Params

Lecture 157 Adding a 404 Not Found Route

Lecture 158 Writing a Simple Search Form

Lecture 159 The Redirect Component

Lecture 160 Pushing onto the History Prop

Lecture 161 Comparing History and Redirect

Lecture 162 withRouter Higher Order Component

Lecture 163 Implementing a Back Button

Section 23: Router Exercises Part 2

Lecture 164 Exercise Introduction

Lecture 165 Working with Bootstrap in React

Lecture 166 Writing the DogList Component

Lecture 167 Adding the DogDetails Component

Lecture 168 Creating Our Navbar Component

Lecture 169 Refactoring & Extracting Our Routes

Lecture 170 A Couple Small Tweaks

Lecture 171 Styling the App

Section 24: The Massive Color Project Pt 1

Lecture 172 Introducing the Color App

Lecture 173 The New Stuff We Cover in This Project

Lecture 174 Finding the Final Project Code

Lecture 175 Creating the Palette Component

Lecture 176 Color Box Basics

Lecture 177 Styling Color Box

Lecture 178 Copying to Clipboard

Lecture 179 Copy Overlay Animation

Lecture 180 Generating Shades of Colors

Lecture 181 Adding Color Slider

Lecture 182 Styling the Color Slider

Lecture 183 Adding Navbar Component

Section 25: The Massive Color Project Pt 2

Lecture 184 Intro to Material UI & Adding Select

Lecture 185 Adding Snackbar

Lecture 186 Add Palette Footer

Lecture 187 Integrating React Router

Lecture 188 Finding Palettes

Lecture 189 PaletteList and Links

Section 26: JSS & withStyles (Color App)

Lecture 190 Introducing withStyles HOC

Lecture 191 Styling MiniPalette with JSS

Lecture 192 Styling PaletteList with JSS

Lecture 193 Finishing Up MiniPalette

Section 27: The Massive Color Project Pt 3

Lecture 194 Linking To Palettes

Lecture 195 Brainstorming Single Color Palette

Lecture 196 Adding More Links

Lecture 197 Creating Single Color Palette

Lecture 198 Displaying Shades in Single Color Palette

Lecture 199 Adding Navbar and Footer

Lecture 200 Add Go Back Box

Lecture 201 Dynamic Text Color w/ Luminosity

Lecture 202 Refactoring More Styles

Lecture 203 Finish Refactoring Color Box

Section 28: The Massive Color Project Pt 4

Lecture 204 Refactor Palette Styles

Lecture 205 Move Styles Into New Folder

Lecture 206 Refactor Navbar CSS

Lecture 207 Overview of PaletteForm

Lecture 208 Adding NewPaletteForm

Lecture 209 Adding Slide-Out Drawer

Lecture 210 Adding Color Picker Component

Lecture 211 Connecting Color Picker to Button

Lecture 212 Creating Draggable Color Box

Lecture 213 Introducing Form Validator

Section 29: The Massive Color Project Pt 5

Lecture 214 Saving New Palettes

Lecture 215 Add Palette Name Form

Lecture 216 Styling Draggable Color Box

Lecture 217 Adding Color Box Delete

Lecture 218 It’s Drag and Drop Time!

Lecture 219 Clear Palette and Random Color Buttons

Lecture 220 Extract New Palette Nav

Lecture 221 Extract Color Picker Component

Lecture 222 Styling Palette Form Nav

Lecture 223 Styling Color Picker

Section 30: The Massive Color Project Pt 6

Lecture 224 Adding Modals/Dialogs

Lecture 225 Styling Dialog

Lecture 226 Closing Form & Adding Emoji

Lecture 227 Finish Emoji Picker Form

Lecture 228 Moving JSS Styles Out

Lecture 229 Tweak Form Styles

Lecture 230 Saving to LocalStorage

Lecture 231 Adding MiniPalette Delete Button

Lecture 232 Finish MiniPalette Delete

Lecture 233 Create Responsive Sizes Helper

Lecture 234 Make Color Box Responsive

Lecture 235 Make Form & Navbar Responsive

Section 31: The Massive Color Project Pt 7

Lecture 236 Make Palette List Responsive

Lecture 237 Add SVG Background

Lecture 238 Fade Animations w/ Transition Group

Lecture 239 Delete Confirmation Dialog

Lecture 240 Fix Delete/Drag Bug

Lecture 241 Animating Route Transitions

Lecture 242 Refactoring Route Transitions

Lecture 243 Optimizing w/ PureComponent

Lecture 244 Cleaning Things Up

Lecture 245 More Cleaning Up!

Lecture 246 Fix Issues w/ New Palette Form

Lecture 247 Prevent Duplicate Random Colors

Section 32: Introducing React Hooks

Lecture 248 Intro to Hooks & useState

Lecture 249 Building a Custom Hook: useToggleState

Lecture 250 Building a Custom Hook: useInputState

Lecture 251 The useEffect Hook

Lecture 252 Fetching Data w/ the useEffect Hook

Section 33: React Hooks Project

Lecture 253 Intro to Hooks Project

Lecture 254 Adding Our Form With Hooks

Lecture 255 Adding Todo Item Component

Lecture 256 Toggling and Deletion w/ Hooks

Lecture 257 Editing w/ Hooks

Lecture 258 Small Style Tweaks

Lecture 259 LocalStorage w/ UseEffect Hook

Lecture 260 Refactoring to a Custom Hook

Lecture 261 Creating our UseLocaslStorateState Hook

Section 34: Introducing The Context API!

Lecture 262 Where We Are Heading

Lecture 263 THE CODE FOR THIS SECTION!

Lecture 264 What Even is Context?

Lecture 265 Adding a Responsive Navbar To Our Context App

Lecture 266 Adding a Responsive Form to our Context App

Lecture 267 Intro to Context and Providers

Lecture 268 Consuming A Context

Lecture 269 Updating A Context Dynamically

Lecture 270 Writing the Language Context

Lecture 271 Consuming 2 Contexts: Enter the Higher Order Component

Section 35: Using Context with Hooks

Lecture 272 THE CODE FOR THIS SECTION

Lecture 273 THE CODE FOR THIS SECTION!

Lecture 274 Introducing the useContext Hook

Lecture 275 Consuming Multiple Contexts w/ Hooks

Lecture 276 Rewriting a Context Provider w/ Hooks

Lecture 277 Context Providers w/ Custom Hooks

Lecture 278 “Hookify-ing” the Rest of the App

Section 36: State Management w/ useReducer & useContext

Lecture 279 IMPORTANT: GET THE CODE HERE!

Lecture 280 Adding In Todos Context

Lecture 281 Consuming the Todo Context

Lecture 282 The Issues w/ Our Current Approach

Lecture 283 WTF Is a Reducer

Lecture 284 First useReducer Example

Lecture 285 Defining our Todo Reducer

Lecture 286 Splitting Into 2 Contexts

Lecture 287 Optimizing w/ Memo

Lecture 288 Custom Hook: Reducer + LocalStorage

Section 37: Next JS

Lecture 289 Intro to Next

Lecture 290 What is Server Side Rendering?

Lecture 291 Getting Started w/ Next

Lecture 292 Basic Routing in Next

Lecture 293 Next’s Link Component

Lecture 294 Links Without Anchor Tags

Lecture 295 Components Vs. Pages

Lecture 296 Overriding the Default _app.js

Section 38: Next: Fetching & Server API

Lecture 297 Introducing getInitialProps

Lecture 298 Fetching Posts w/ getInitialProps

Lecture 299 Query Strings in Next

Lecture 300 withRouter Higher Order Component

Lecture 301 Fetching Comments

Lecture 302 The “as” Prop

Lecture 303 Custom Server Without Express

Lecture 304 Custom Server-Side Routes w/ Express

Section 39: Bonus: Webpack Mini Course – Your Own Simple Version of Create React App

Lecture 305 What Is Webpack??

Lecture 306 Installing and Running Webpack

Lecture 307 Imports, Exports, and Webpack

Lecture 308 Configuring Webpack

Lecture 309 Webpack Loaders, CSS, & SASS

Lecture 310 Cache Busting and Plugins

Lecture 311 Splitting Dev & Production

Lecture 312 Html-loader, file-loader, and Clean Webpack Plugin

Lecture 313 Multiple Entry Points

Lecture 314 Extract and Minify CSS

Anyone brand new to React or front-end frameworks in general,Anyone who wants to build a portfolio of stunning React apps,Students struggling to learn React or looking for more practice,Anyone who wants to level up their developer skills and learn a highly in-demand skill!

Course Information:

Udemy | English | 38h 48m | 21.71 GB
Created by: Colt Steele

You Can See More Courses in the Developer >> Greetings from CourseDown.com