Modern React Bootcamp

Basics Rules of JSX Preview 04:43

How JSX Works Behind the Scenes Preview 03:32

Embedding JavaScript in JSX Preview 03:44

Conditionals in JSX Preview 09:13

Standard React App Layout Preview 05:08

Intro to React Props Preview 05:57

Props are Immutable? Preview 02:21

Other Types of Props Preview 05:53

Pie Chart Component Demo w/ Props Preview 02:03

EXERCISE: Slot Machine Preview 01:37

EXERCISE: Slot Machine Solution Preview 06:47

Looping in JSX Preview 05:19

Adding Default Props Preview 02:42

Styling React Preview 08:56

Intro to Create React App Preview 02:58

2 Ways of Installing CRA Preview 04:25

Creating a New App Preview 05:06

Starting Up the Server Preview 05:06

Modules: Import & Export Crash Course Preview 11:05

EXERICSE: Fruits Modules Preview 02:43

EXERCISE: Fruits Modules Solution Preview 07:39

Create React App Conventions Preview 03:10

CSS and Assets in Create React App Preview 07:51

Intro To Pokedex Exercise Preview 07:01

Creating Pokecard Component Preview 07:39

Adding Pokedex Component Preview 04:28

Styling PokeCard and Pokedex Preview 06:28

Adding Fancier Images Preview 02:43

The PokeGame Component Preview 09:16

Styling Pokegame Preview 09:12

State Goals Preview 02:01

Quick Detour: React Dev Tools Preview 03:12

State in General Preview 03:33

Initializing State Preview 08:37

IMPORTANT! ALTERNATE SYNTAX Preview 09:17

WTF is super() Vs. super(props) Preview 07:24

Setting State Correctly Preview 10:24

Crash Course: Click Events in React Preview 10:49

ALTERNATE SYNTAX PT 2 Preview 05:52

EXERCISE: State Clicker Preview 01:48

EXERCISE: State Clicker Solution Preview 07:25

The "State As Props" Design Pattern Preview 03:02

Introduction to Dice Exercise Preview 08:21

Writing the Die Component Preview 06:07

Adding the RollDice Component Preview 09:02

Styling RollDice Preview 04:05

Animating Dice Rolls! Preview 10:36

Updating Existing State Preview 10:41

Mutating State the Safe Way Preview 10:15

Designing State: Minimizing State Preview 04:04

Designing State: Downward Data Flow Preview 04:01

State Design Example: Lottery Preview 03:51

State Design Example: LottoBall Component Preview 04:02

State Design Example: Lottery Component Preview 11:34

State Exercise 1: Coin Flipper Preview 02:45

State Exercise 1: Coin Flipper Solution Preview 18:28

State Exercise 2: Color Boxes Preview 02:35

State Exercise 2: Color Boxes Solution Preview 10:16

Commonly Used React Events Preview 09:44

The Joys of Method Binding :( Preview 09:36

Alternative Binding With Class Properties Preview 05:03

Binding With Arguments Preview 05:50

Passing Methods to Child Components Preview 12:00

Parent-Child Method Naming Preview 02:03

Quick Detour: React Keys Preview 07:43

Introducing The Hangman Exercise Preview 08:00

Starter Code Walkthrough Preview 10:07

Adding Keys Preview 01:44

Tracking Incorrect Guesses Preview 01:36

Adding Game Over Preview 06:19

Adding Alt Text Preview 01:54

Randomizing Words Preview 02:17

Adding a Reset Button Preview 03:12

Making the Game Winnable & Styling Preview 08:23

Introducing Lights Out Preview 03:07

Exploring the Starter Code Preview 09:28

Displaying the Game Board Preview 11:16

Flipping Cells Preview 05:09

Winning the Game Preview 03:24

Styling the Game Preview 11:03

Intro to React Forms Preview 10:53

Writing Forms w/ Multiple Inputs Preview 07:21

The htmlFor Attribute Preview 01:26

Design Pattern: Passing Data Upwards Preview 10:28

Using the UUID Library Preview 03:32

Introduction to Box Maker Exercise Preview 01:58

Adding the BoxList Component Preview 06:16

Creating the BoxForm Component Preview 08:12

Removing Color Boxes Preview 06:08

Project Overview Preview 02:09

TodoList and TodoItem Components Preview 04:59

Adding NewTodoForm Preview 06:02

Removing Todos Preview 06:34

Editing Todos Preview 12:08

Toggling Todo Completion Preview 05:31

Styling the Todo App Preview 10:43

Introducing Yahtzee Preview 08:16

Yahtzee Starter Code Walkthrough Preview 13:16

Fixing the Dice Locking Bug Preview 09:33

Reading the Rules Classes Preview 16:02

Adding In New Rules Preview 09:50

Fixing the Re-Rolling Bug Preview 08:13

Preventing Score Reuse Preview 09:20

Adding Score Descriptions Preview 04:00

Replacing Text w/ Dice Icons Preview 14:07

Animating Dice Rolls Preview 13:45

Final Touches and Bug Fixes Preview 09:17

Introducing ComponentDidMount Preview 08:47

Loading Data Via AJAX Preview 06:56

Adding Animated Loaders Preview 04:57

Loading Data With Async Functions Preview 07:01

Introducing ComponentDidUpdate Preview 04:20

PrevProps and PrevState in ComponentDidUpdate Preview 06:37

Introducing ComponentWillUnmount Preview 02:22

Introducing the Cards API Project Preview 03:55

Requesting a Deck ID Preview 05:24

Fetching New Cards with AJAX Preview 10:36

Adding the Card Component Preview 03:36

Randomly Transforming Cards Preview 07:00

Styling Cards and Deck Preview 05:29

Introducing the Dad Jokes Project Preview 06:01

Fetching New Jokes From the API Preview 07:42

Styling JokeList Component Preview 10:07

Upvoting and Downvoting Jokes Preview 09:01

Styling the Joke Component Preview 05:59

Adding Dynamic Colors and Emojis Preview 03:50

Syncing with LocalStorage Preview 05:36

Fixing Our LocalStorage Bug Preview 03:54

Adding a Loading Spinner Preview 03:29

Preventing Duplicate Jokes Preview 08:07

Sorting Jokes Preview 02:35

Styling The Fetch Button Preview 04:56

Adding Animations Preview 06:35

Intro to Client-Side Routing Preview 09:48

Adding Our First Route Preview 06:07

Using Switch and Exact Preview 07:20

Intro to the Link Component Preview 03:37

Adding in NavLinks Preview 03:21

Render prop vs. Component prop in Routes Preview 09:24

Intro to Vending Machine Exercise Preview 02:13

Adding The Vending Machine Routes Preview 04:33

Adding the Links Preview 04:17

Creating the Navbar Preview 06:21

NEW CONCEPT: Props.children Preview 07:02

Working with URL Params Preview 12:46

Multiple Route Params Preview 05:10

Adding a 404 Not Found Route Preview 03:11

Writing a Simple Search Form Preview 05:20

The Redirect Component Preview 04:44

Pushing onto the History Prop Preview 06:13

Comparing History and Redirect Preview 03:05

withRouter Higher Order Component Preview 04:31

Implementing a Back Button Preview 02:57

Exercise Introduction Preview 03:27

Working with Bootstrap in React Preview 06:49

Writing the DogList Component Preview 09:30

Adding the DogDetails Component Preview 13:41

Creating Our Navbar Component Preview 10:00

Refactoring & Extracting Our Routes Preview 02:43

A Couple Small Tweaks Preview 03:13

Styling the App Preview 11:42

Introducing the Color App Preview 09:16

The New Stuff We Cover in This Project Preview 07:48

Finding the Final Project Code Preview 01:56

Creating the Palette Component Preview 05:59

Color Box Basics Preview 06:49

Styling Color Box Preview 10:33

Copying to Clipboard Preview 03:26

Copy Overlay Animation Preview 14:50

Generating Shades of Colors Preview 17:11

Adding Color Slider Preview 07:39

Styling the Color Slider Preview 06:03

Adding Navbar Component Preview 09:23

Intro to Material UI & Adding Select Preview 13:50

Adding Snackbar Preview 12:09

Add Palette Footer Preview 04:30

Integrating React Router Preview 04:08

Finding Palettes Preview 04:02

PaletteList and Links Preview 06:02

Introducing withStyles HOC Preview 10:50

Styling MiniPalette with JSS Preview 06:51

Styling PaletteList with JSS Preview 07:37

Finishing Up MiniPalette Preview 07:46

Linking To Palettes Preview 06:26

Brainstorming Single Color Palette Preview 05:20

Adding More Links Preview 06:30

Creating Single Color Palette Preview 08:28

Displaying Shades in Single Color Palette Preview 12:42

Adding Navbar and Footer Preview 09:24

Add Go Back Box Preview 09:48

Dynamic Text Color w/ Luminosity Preview 11:21

Refactoring More Styles Preview 17:31

Finish Refactoring Color Box Preview 06:53

Refactor Palette Styles Preview 08:11

Move Styles Into New Folder Preview 06:36

Refactor Navbar CSS Preview 08:46

Overview of PaletteForm Preview 05:45

Adding NewPaletteForm Preview 04:57

Adding Slide-Out Drawer Preview 11:21

Adding Color Picker Component Preview 09:46

Connecting Color Picker to Button Preview 08:47

Creating Draggable Color Box Preview 07:20

Introducing Form Validator Preview 12:28

Saving New Palettes Preview 11:01

Add Palette Name Form Preview 10:17

Styling Draggable Color Box Preview 06:49

Adding Color Box Delete Preview 04:41

It's Drag and Drop Time! Preview 14:58

Clear Palette and Random Color Buttons Preview 11:05

Extract New Palette Nav Preview 13:07

Extract Color Picker Component Preview 11:48

Styling Palette Form Nav Preview 05:43

Styling Color Picker Preview 10:04

Adding Modals/Dialogs Preview 07:33

Styling Dialog Preview 08:49

Closing Form & Adding Emoji Preview 05:21

Finish Emoji Picker Form Preview 12:23

Moving JSS Styles Out Preview 06:54

Tweak Form Styles Preview 07:08

Saving to LocalStorage Preview 05:02

Adding MiniPalette Delete Button Preview 07:00

Finish MiniPalette Delete Preview 08:52

Create Responsive Sizes Helper Preview 14:17

Make Color Box Responsive Preview 07:34

Make Form & Navbar Responsive Preview 09:00

Make Palette List Responsive Preview 08:45

Add SVG Background Preview 08:07

Fade Animations w/ Transition Group Preview 12:14

Delete Confirmation Dialog Preview 16:52

Fix Delete/Drag Bug Preview 03:24

Animating Route Transitions Preview 08:21

Refactoring Route Transitions Preview 09:03

Optimizing w/ PureComponent Preview 07:57

Cleaning Things Up Preview 03:58

More Cleaning Up! Preview 07:23

Fix Issues w/ New Palette Form Preview 06:02

Prevent Duplicate Random Colors Preview 05:04

Intro to Hooks & useState Preview 11:09

Building a Custom Hook: useToggleState Preview 15:27

Building a Custom Hook: useInputState Preview 15:25

The useEffect Hook Preview 06:45

Fetching Data w/ the useEffect Hook Preview 12:16

Intro to Hooks Project Preview 10:15

Adding Our Form With Hooks Preview 07:56

Adding Todo Item Component Preview 10:38

Toggling and Deletion w/ Hooks Preview 08:27

Editing w/ Hooks Preview 12:06

Small Style Tweaks Preview 04:56

LocalStorage w/ UseEffect Hook Preview 05:37

Refactoring to a Custom Hook Preview 06:10

Creating our UseLocaslStorateState Hook Preview 13:43

Where We Are Heading Preview 02:44

THE CODE FOR THIS SECTION! Preview 00:36

What Even is Context? Preview 08:34

Adding a Responsive Navbar To Our Context App Preview 18:48

Adding a Responsive Form to our Context App Preview 14:44

Intro to Context and Providers Preview 12:43

Consuming A Context Preview 07:56

Updating A Context Dynamically Preview 05:05

Writing the Language Context Preview 13:38

Consuming 2 Contexts: Enter the Higher Order Component Preview 12:21

THE CODE FOR THIS SECTION Preview 00:07

THE CODE FOR THIS SECTION! Preview 00:07

Introducing the useContext Hook Preview 05:33

Consuming Multiple Contexts w/ Hooks Preview 03:11

Rewriting a Context Provider w/ Hooks Preview 04:23

Context Providers w/ Custom Hooks Preview 04:41

"Hookify-ing" the Rest of the App Preview 03:03

IMPORTANT: GET THE CODE HERE! Preview 00:11

Adding In Todos Context Preview 09:01

Consuming the Todo Context Preview 05:50

The Issues w/ Our Current Approach Preview 10:01

WTF Is a Reducer Preview 08:34

First useReducer Example Preview 12:13

Defining our Todo Reducer Preview 13:25

Splitting Into 2 Contexts Preview 06:44

Optimizing w/ Memo Preview 05:44

Custom Hook: Reducer + LocalStorage Preview 07:24

Intro to Next Preview 06:05

What is Server Side Rendering? Preview 11:51

Getting Started w/ Next Preview 08:28

Basic Routing in Next Preview 06:35

Next's Link Component Preview 06:01

Links Without Anchor Tags Preview 02:08

Components Vs. Pages Preview 04:14

Overriding the Default _app.js Preview 07:19

Introducing getInitialProps Preview 11:19

Fetching Posts w/ getInitialProps Preview 11:03

Query Strings in Next Preview 09:57

withRouter Higher Order Component Preview 02:53

Fetching Comments Preview 08:06

The "as" Prop Preview 04:29

Custom Server Without Express Preview 13:13

Custom Server-Side Routes w/ Express Preview 12:41

What Is Webpack?? Preview 09:23

Installing and Running Webpack Preview 14:23

Imports, Exports, and Webpack Preview 07:56

Configuring Webpack Preview 09:15

Webpack Loaders, CSS, & SASS Preview 15:14

Cache Busting and Plugins Preview 13:33

Splitting Dev & Production Preview 10:16

Html-loader, file-loader, and Clean Webpack Plugin Preview 11:21

Multiple Entry Points Preview 06:44

Extract and Minify CSS Preview 18:18