Contact for queries :
banner1

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

Course Curriculum

A taste of React
1. Welcome to the Course! 00:00:00
2. Intro to React 00:00:00
3. Is React a Framework or Library 00:00:00
4. Introducing Components! 00:00:00
5. Pie Chart Component 00:00:00
6. Setting Up Your Server 00:00:00
7. Writing Our First Component 00:00:00
8. Function Vs. Class Components 00:00:00
9. Download All Code, Slides, & Handouts 00:00:00
2. Introducing JSX
1. Basics Rules of JSX 00:00:00
2. How JSX Works Behind the Scenes 00:00:00
3. Embedding JavaScript in JSX 00:00:00
4. Conditionals in JSX 00:00:00
5. Standard React App Layout 00:00:00
3. Props and More
1. Intro to React Props 00:00:00
2. Props are Immutable 00:00:00
3. Other Types of Props 00:00:00
4. Pie Chart Component Demo w Props 00:00:00
5. EXERCISE Slot Machine 00:00:00
6. EXERCISE Slot Machine Solution 00:00:00
7. Looping in JSX 00:00:00
8. Adding Default Props 00:00:00
9. Styling React 00:00:00
4. Introducing Create React App
1. Intro to Create React App 00:00:00
2. 2 Ways of Installing CRA 00:00:00
3. Creating a New App 00:00:00
4. Starting Up the Server 00:00:00
5. Modules Import & Export Crash Course 00:00:00
6. EXERICSE Fruits Modules 00:00:00
7. EXERCISE Fruits Modules Solution 00:00:00
8. Create React App Conventions 00:00:00
9. CSS and Assets in Create React App 00:00:00
5. Pokedex Project
1. Intro To Pokedex Exercise 00:00:00
2. Creating Pokecard Component 00:00:00
3. Adding Pokedex Component 00:00:00
4. Styling PokeCard and Pokedex 00:00:00
5. Adding Fancier Images 00:00:00
6. The PokeGame Component 00:00:00
7. Styling Pokegame 00:00:00
6. Introducing State
1. State Goals 00:00:00
2. Quick Detour React Dev Tools 00:00:00
3. State in General 00:00:00
4. Initializing State 00:00:00
5. IMPORTANT! ALTERNATE SYNTAX 00:00:00
6. WTF is super() Vs. super(props) 00:00:00
7. Setting State Correctly 00:00:00
8. Crash Course Click Events in React 00:00:00
9. ALTERNATE SYNTAX PT 2 00:00:00
10. EXERCISE State Clicker 00:00:00
11. EXERCISE State Clicker Solution 00:00:00
12. The State As Props Design Pattern 00:00:00
7. React State Dice Exercise
1. Introduction to Dice Exercise 00:00:00
2. Writing the Die Component 00:00:00
3. Adding the RollDice Component 00:00:00
4. Styling RollDice 00:00:00
5. Animating Dice Rolls! 00:00:00
8. React State Patterns
1. Updating Existing State 00:00:00
2. Mutating State the Safe Way 00:00:00
3. Designing State Minimizing State 00:00:00
4. Designing State Downward Data Flow 00:00:00
5. State Design Example Lottery 00:00:00
6. State Design Example LottoBall Component 00:00:00
7. State Design Example Lottery Component 00:00:00
9. State Exercises!
1. State Exercise 1 Coin Flipper 00:00:00
2. State Exercise 1 Coin Flipper Solution 00:00:00
3. State Exercise 2 Color Boxes 00:00:00
4. State Exercise 2 Color Boxes Solution 00:00:00
10. The World of React Events
1. Commonly Used React Events 00:00:00
2. The Joys of Method Binding ( 00:00:00
3. Alternative Binding With Class Properties 00:00:00
4. Binding With Arguments 00:00:00
5. Passing Methods to Child Components 00:00:00
6. Parent-Child Method Naming 00:00:00
7. Quick Detour React Keys 00:00:00
11. Hangman Exercise
1. Introducing The Hangman Exercise 00:00:00
2. Starter Code Walkthrough 00:00:00
3. Adding Keys 00:00:00
4. Tracking Incorrect Guesses 00:00:00
5. Adding Game Over 00:00:00
6. Adding Alt Text 00:00:00
7. Randomizing Words 00:00:00
8. Adding a Reset Button 00:00:00
9. Making the Game Winnable & Styling 00:00:00
12. Lights Out Game
1. Introducing Lights Out 00:00:00
2. Exploring the Starter Code 00:00:00
3. Displaying the Game Board 00:00:00
4. Flipping Cells 00:00:00
5. Winning the Game 00:00:00
6. Styling the Game 00:00:00
13. Forms in React
1. Intro to React Forms 00:00:00
2. Writing Forms w Multiple Inputs 00:00:00
3. The htmlFor Attribute 00:00:00
4. Design Pattern Passing Data Upwards 00:00:00
5. Using the UUID Library 00:00:00
14. Forms Exercise
1. Introduction to Box Maker Exercise 00:00:00
2. Adding the BoxList Component 00:00:00
3. Creating the BoxForm Component 00:00:00
4. Removing Color Boxes 00:00:00
15. Todo List Project
1. Project Overview 00:00:00
2. TodoList and TodoItem Components 00:00:00
3. Adding NewTodoForm 00:00:00
4. Removing Todos 00:00:00
5. Editing Todos 00:00:00
6. Toggling Todo Completion 00:00:00
7. Styling the Todo App 00:00:00
16. Building Yahtzee
1. Introducing Yahtzee 00:00:00
2. Yahtzee Starter Code Walkthrough 00:00:00
3. Fixing the Dice Locking Bug 00:00:00
4. Reading the Rules Classes 00:00:00
5. Adding In New Rules 00:00:00
6. Fixing the Re-Rolling Bug 00:00:00
7. Preventing Score Reuse 00:00:00
8. Adding Score Descriptions 00:00:00
9. Replacing Text w Dice Icons 00:00:00
10. Animating Dice Rolls 00:00:00
11. Final Touches and Bug Fixes 00:00:00
17. React Lifecycle Methods
1. Introducing ComponentDidMount 00:00:00
2. Loading Data Via AJAX 00:00:00
3. Adding Animated Loaders 00:00:00
4. Loading Data With Async Functions 00:00:00
5. Introducing ComponentDidUpdate 00:00:00
6. PrevProps and PrevState in ComponentDidUpdate 00:00:00
7. Introducing ComponentWillUnmount 00:00:00
18. LifeCycle Methods & API Exercise
1. Introducing the Cards API Project 00:00:00
2. Requesting a Deck ID 00:00:00
3. Fetching New Cards with AJAX 00:00:00
4. Adding the Card Component 00:00:00
5. Randomly Transforming Cards 00:00:00
6. Styling Cards and Deck 00:00:00
19. Building the Dad Jokes App
1. Introducing the Dad Jokes Project 00:00:00
2. Fetching New Jokes From the API 00:00:00
3. Styling JokeList Component 00:00:00
4. Upvoting and Downvoting Jokes 00:00:00
5. Styling the Joke Component 00:00:00
6. Adding Dynamic Colors and Emojis 00:00:00
7. Syncing with LocalStorage 00:00:00
8. Fixing Our LocalStorage Bug 00:00:00
9. Adding a Loading Spinner 00:00:00
10. Preventing Duplicate Jokes 00:00:00
11. Sorting Jokes 00:00:00
12. Styling The Fetch Button 00:00:00
13. Adding Animations 00:00:00
20. React Router
1. Intro to Client-Side Routing 00:00:00
2. Adding Our First Route 00:00:00
3. Using Switch and Exact 00:00:00
4. Intro to the Link Component 00:00:00
5. Adding in NavLinks 00:00:00
6. Render prop vs. Component prop in Routes 00:00:00
21. Vending Machine Exercise
1. Intro to Vending Machine Exercise 00:00:00
2. Adding The Vending Machine Routes 00:00:00
3. Adding the Links 00:00:00
4. Creating the Navbar 00:00:00
5. NEW CONCEPT Props.children 00:00:00
22. React Router Patterns
1. Working with URL Params 00:00:00
2. Multiple Route Params 00:00:00
3. Adding a 404 Not Found Route 00:00:00
4. Writing a Simple Search Form 00:00:00
5. The Redirect Component 00:00:00
6. Pushing onto the History Prop 00:00:00
7. Comparing History and Redirect 00:00:00
8. withRouter Higher Order Component 00:00:00
9. Implementing a Back Button 00:00:00
23. Router Exercises Part 2
1. Exercise Introduction 00:00:00
2. Working with Bootstrap in React 00:00:00
3. Writing the DogList Component 00:00:00
4. Adding the DogDetails Component 00:00:00
5. Creating Our Navbar Component 00:00:00
6. Refactoring & Extracting Our Routes 00:00:00
7. A Couple Small Tweaks 00:00:00
8. Styling the App 00:00:00
24. The Massive Color Project Pt 1
1. Introducing the Color App 00:00:00
2. The New Stuff We Cover in This Project 00:00:00
3. Finding the Final Project Code 00:00:00
4. Creating the Palette Component 00:00:00
5. Color Box Basics 00:00:00
6. Styling Color Box 00:00:00
7. Copying to Clipboard 00:00:00
8. Copy Overlay Animation 00:00:00
9. Generating Shades of Colors 00:00:00
10. Adding Color Slider 00:00:00
11. Styling the Color Slider 00:00:00
12. Adding Navbar Component 00:00:00
25. The Massive Color Project Pt 2
1. Intro to Material UI & Adding Select 00:00:00
2. Adding Snackbar 00:00:00
3. Add Palette Footer 00:00:00
4. Integrating React Router 00:00:00
5. Finding Palettes 00:00:00
6. PaletteList and Links 00:00:00
26. JSS & withStyles (Color App)
1. Introducing withStyles HOC 00:00:00
2. Styling MiniPalette with JSS 00:00:00
3. Styling PaletteList with JSS 00:00:00
4. Finishing Up MiniPalette 00:00:00
27. The Massive Color Project Pt 3
1. Linking To Palettes 00:00:00
2. Brainstorming Single Color Palette 00:00:00
3. Adding More Links 00:00:00
4. Creating Single Color Palette 00:00:00
5. Displaying Shades in Single Color Palette 00:00:00
6. Adding Navbar and Footer 00:00:00
7. Add Go Back Box 00:00:00
8. Dynamic Text Color w Luminosity 00:00:00
9. Refactoring More Styles 00:00:00
10. Finish Refactoring Color Box 00:00:00
28. The Massive Color Project Pt 4
1. Refactor Palette Styles 00:00:00
2. Move Styles Into New Folder 00:00:00
3. Refactor Navbar CSS 00:00:00
4. Overview of PaletteForm 00:00:00
5. Adding NewPaletteForm 00:00:00
6. Adding Slide-Out Drawer 00:00:00
7. Adding Color Picker Component 00:00:00
8. Connecting Color Picker to Button 00:00:00
9. Creating Draggable Color Box 00:00:00
10. Introducing Form Validator 00:00:00
29. The Massive Color Project Pt 5
1. Saving New Palettes 00:00:00
2. Add Palette Name Form 00:00:00
3. Styling Draggable Color Box 00:00:00
4. Adding Color Box Delete 00:00:00
5. It’s Drag and Drop Time! 00:00:00
6. Clear Palette and Random Color Buttons 00:00:00
7. Extract New Palette Nav 00:00:00
8. Extract Color Picker Component 00:00:00
9. Styling Palette Form Nav 00:00:00
10. Styling Color Picker 00:00:00
30. The Massive Color Project Pt 6
1. Adding ModalsDialogs 00:00:00
2. Styling Dialog 00:00:00
3. Closing Form & Adding Emoji 00:00:00
4. Finish Emoji Picker Form 00:00:00
5. Moving JSS Styles Out 00:00:00
6. Tweak Form Styles 00:00:00
7. Saving to LocalStorage 00:00:00
8. Adding MiniPalette Delete Button 00:00:00
9. Finish MiniPalette Delete 00:00:00
10. Create Responsive Sizes Helper 00:00:00
11. Make Color Box Responsive 00:00:00
12. Make Form & Navbar Responsive 00:00:00
31. The Massive Color Project Pt 7
1. Make Palette List Responsive 00:00:00
2. Add SVG Background 00:00:00
3. Fade Animations w Transition Group 00:00:00
4. Delete Confirmation Dialog 00:00:00
5. Fix DeleteDrag Bug 00:00:00
6. Animating Route Transitions 00:00:00
7. Refactoring Route Transitions 00:00:00
8. Optimizing w PureComponent 00:00:00
9. Cleaning Things Up 00:00:00
10. More Cleaning Up! 00:00:00
11. Fix Issues w New Palette Form 00:00:00
12. Prevent Duplicate Random Colors 00:00:00
32. Introducing React Hooks
1. Intro to Hooks & useState 00:00:00
2. Building a Custom Hook useToggleState 00:00:00
3. Building a Custom Hook useInputState 00:00:00
4. The useEffect Hook 00:00:00
5. Fetching Data w the useEffect Hook 00:00:00
33. React Hooks Project
1. Intro to Hooks Project 00:00:00
2. Adding Our Form With Hooks 00:00:00
3. Adding Todo Item Component 00:00:00
4. Toggling and Deletion w Hooks 00:00:00
5. Editing w Hooks 00:00:00
6. Small Style Tweaks 00:00:00
7. LocalStorage w UseEffect Hook 00:00:00
8. Refactoring to a Custom Hook 00:00:00
34. Introducing The Context API!
1. Where We Are Heading 00:00:00
3. What Even is Context 00:00:00
3. What Even is Context 00:00:00
4. Adding a Responsive Navbar To Our Context App 00:00:00
5. Adding a Responsive Form to our Context App 00:00:00
6. Intro to Context and Providers 00:00:00
7. Consuming A Context 00:00:00
8. Updating A Context Dynamically 00:00:00
9. Writing the Language Context 00:00:00
10. Consuming 2 Contexts Enter the Higher Order Component 00:00:00
35. Using Context with Hooks
2. Introducing the useContext Hook 00:00:00
3. Consuming Multiple Contexts w Hooks 00:00:00
4. Rewriting a Context Provider w Hooks 00:00:00
5. Context Providers w Custom Hooks 00:00:00
6. Hookify-ing the Rest of the App 00:00:00
36. State Management w useReducer & useContext
2. Adding In Todos Context 00:00:00
3. Consuming the Todo Context 00:00:00
4. The Issues w Our Current Approach 00:00:00
5. WTF Is a Reducer 00:00:00
6. First useReducer Example 00:00:00
7. Defining our Todo Reducer 00:00:00
8. Splitting Into 2 Contexts 00:00:00
9. Optimizing w Memo 00:00:00
10. Custom Hook Reducer + LocalStorage 00:00:00
37. Bonus Webpack Mini Course - Your Own Simple Version of Create React App
1. What Is Webpack 00:00:00
2. Installing and Running Webpack 00:00:00
3. Imports, Exports, and Webpack 00:00:00
4. Configuring Webpack 00:00:00
5. Webpack Loaders, CSS, & SASS 00:00:00
6. Cache Busting and Plugins 00:00:00
7. Splitting Dev & Production 00:00:00
8. Html-loader, file-loader, and Clean Webpack Plugin 00:00:00
9. Multiple Entry Points 00:00:00
10. Extract and Minify CSS 00:00:00
TAKE THIS COURSE
  • FREE
  • 10 Days
5 STUDENTS ENROLLED

About WPLMS

WPLMS is the most popular Education WordPress theme. With over 12000 customers and several startups successfully running their businesses on WPLMS, it is the most powerful solution for Education websites right now.

Popular Tags

Who’s Online

There are no users currently online
top
Template Design © VibeThemes. All rights reserved.