The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Udemy

Learn the fundamentals and core concepts of the modern react framework, as well as Hooks, NextJS, Router, and Context for developing applications.

Online

₹ 4099

particular

details

                                    Medium of instructions
                                    English

                                    Mode of learning
                                    Self study

                                    Mode of Delivery
                                    Video and Text Based

A Taste of React

Welcome to the Course
Intro to React
Is React a Framework or Library?
Introducing Components!
Looking at 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
2 Ways of Installing CRA
Creating a New App
Starting Up the Server
Modules: Import & Export Crash Course
Exercise: 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 Patter

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

The Massive Color Project Pt 6

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

The Massive Color Project Pt 7

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

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

Popular Courses

Popular Platforms

Popular Searches

The Modern React Bootcamp (Hooks, Context, NextJS, Router)

Online

₹ 4099

Quick Facts

Course overview

The highlights

Program offerings

Course and certificate fees

Fees information

certificate availability

certificate providing authority

Who it is for

What you will learn

The syllabus