Menonloading
loading
React Masterclass [FULL COURSE]
Welcome to React Masterclass! I was originally going to release this course on a new learning platform. Unfortunately, the platform shut down ... so I decided to release it here for free. The course covers many aspects of modern React development including: - Create React App - JSX - Styling CSS in React - Tailwind CSS - Prettier - Functional vs. Class Components - State and Props - PropTypes - Lists and Children - React Behind the Scenes - Testing with React Testing Library - React Hooks including useState and useEffect - Component Libraries - Lifecycle Methods - API Requests and more! Enjoy!
426lessons
22hours
Lessons
- React Masterclass #01 - Welcome to React
- React Masterclass #01 - Welcome to React
- React Masterclass #02 - Traditional Applications vs SPAs
- React Masterclass #02 - Traditional Applications vs SPAs
- React Masterclass #03 - Intro to Components
- React Masterclass #03 - Intro to Components
- React Masterclass #04 - Installing Chrome
- React Masterclass #04 - Installing Chrome
- React Masterclass #05 - Node and NPM
- React Masterclass #05 - Node and NPM
- React Masterclass #06 - Installing Node
- React Masterclass #06 - Installing Node
- React Masterclass #07 - Installing Git
- React Masterclass #07 - Installing Git
- React Masterclass #08 - Installing Visual Studio Code
- React Masterclass #08 - Installing Visual Studio Code
- React Masterclass #09 - Installing VSCode Extensions
- React Masterclass #09 - Installing VSCode Extensions
- React Masterclass #10 - What is React Native?
- React Masterclass #10 - What is React Native?
- React Masterclass #11 - Intro to Create React App
- React Masterclass #11 - Intro to Create React App
- React Masterclass #12 - Clear NPX Cache
- React Masterclass #12 - Clear NPX Cache
- React Masterclass #13 - Create React Application with Create React App
- React Masterclass #13 - Create React Application with Create React App
- React Masterclass #14 - Starting and Stopping React Application
- React Masterclass #14 - Starting and Stopping React Application
- React Masterclass #15 - Servers and Ports
- React Masterclass #15 - Servers and Ports
- React Masterclass #16 - Codebase Walkthrough (Root Directory)
- React Masterclass #16 - Codebase Walkthrough (Root Directory)
- React Masterclass #17 - Codebase Walkthrough (public and src Folders)
- React Masterclass #17 - Codebase Walkthrough (public and src Folders)
- React Masterclass #18 - Welcome to JSX I
- React Masterclass #18 - Welcome to JSX I
- React Masterclass #19 - Welcome to JSX II
- React Masterclass #19 - Welcome to JSX II
- React Masterclass #20 - Babel Quick Dive
- React Masterclass #20 - Babel Quick Dive
- React Masterclass #21 - Welcome to JSX III (Our First React Component)
- React Masterclass #21 - Welcome to JSX III (Our First React Component)
- React Masterclass #22 - Introduction to Attributes
- React Masterclass #22 - Introduction to Attributes
- React Masterclass #23 - Quick Note on Formatting JSX
- React Masterclass #23 - Quick Note on Formatting JSX
- React Masterclass #24 - The className Attribute
- React Masterclass #24 - The className Attribute
- React Masterclass #25 - Interpolation with Curly Braces I
- React Masterclass #25 - Interpolation with Curly Braces I
- React Masterclass #26 - Interpolation with Curly Braces II
- React Masterclass #26 - Interpolation with Curly Braces II
- React Masterclass #27 - Interpolation with Curly Braces III
- React Masterclass #27 - Interpolation with Curly Braces III
- React Masterclass #28 - Restoring our App Component
- React Masterclass #28 - Restoring our App Component
- React Masterclass #29 - Hot Reloading
- React Masterclass #29 - Hot Reloading
- React Masterclass #30 - Composing Components
- React Masterclass #30 - Composing Components
- React Masterclass #31 - Multiple Levels of Component Renders
- React Masterclass #31 - Multiple Levels of Component Renders
- React Masterclass #32 - Note on React Import (The New JSX Transform)
- React Masterclass #32 - Note on React Import (The New JSX Transform)
- React Masterclass #33 - Reviewing App Render
- React Masterclass #33 - Reviewing App Render
- React Masterclass #34 - ReactDOM v18 vs Earlier SLIDES
- React Masterclass #34 - ReactDOM v18 vs Earlier SLIDES
- React Masterclass #35 - BONUS: Eject to See webpack.config.js File
- React Masterclass #35 - BONUS: Eject to See webpack.config.js File
- React Masterclass #36 - Section Review [SLIDES]
- React Masterclass #36 - Section Review [SLIDES]
- React Masterclass #37 - Local Styles vs Global Styles
- React Masterclass #37 - Local Styles vs Global Styles
- React Masterclass #38 - Inline Styles
- React Masterclass #38 - Inline Styles
- React Masterclass #39 - CSS Modules
- React Masterclass #39 - CSS Modules
- React Masterclass #40 - Return App Component to Original Design
- React Masterclass #40 - Return App Component to Original Design
- React Masterclass #41 - Install Styled Components
- React Masterclass #41 - Install Styled Components
- React Masterclass #42 - CSS in JS with Styled Components
- React Masterclass #42 - CSS in JS with Styled Components
- React Masterclass #43 - Intro to Tailwind CSS [SLIDES]
- React Masterclass #43 - Intro to Tailwind CSS [SLIDES]
- React Masterclass #44 - Installing and Configuring Tailwind
- React Masterclass #44 - Installing and Configuring Tailwind
- React Masterclass #45 - Turning off VSCode Tailwind Complaints
- React Masterclass #45 - Turning off VSCode Tailwind Complaints
- React Masterclass #46 - Installing Tailwind CSS Intellisense VSCode Extension
- React Masterclass #46 - Installing Tailwind CSS Intellisense VSCode Extension
- React Masterclass #47 - Using Tailwind in App Component
- React Masterclass #47 - Using Tailwind in App Component
- React Masterclass #48 - Updating tailwind.config.js with Custom Colors
- React Masterclass #48 - Updating tailwind.config.js with Custom Colors
- React Masterclass #49 - Section Review
- React Masterclass #49 - Section Review
- React Masterclass #50 - Intro to Prettier
- React Masterclass #50 - Intro to Prettier
- React Masterclass #51 - Installing Prettier
- React Masterclass #51 - Installing Prettier
- React Masterclass #52 - Adding Script to Format Project
- React Masterclass #52 - Adding Script to Format Project
- React Masterclass #53 - Running Prettier with NPX
- React Masterclass #53 - Running Prettier with NPX
- React Masterclass #54 - Install Prettier Plugin for TailwindCSS
- React Masterclass #54 - Install Prettier Plugin for TailwindCSS
- React Masterclass #55 - Configure VSCode to Format with Prettier on Save
- React Masterclass #55 - Configure VSCode to Format with Prettier on Save
- React Masterclass #56 - Section Review [SLIDES]
- React Masterclass #56 - Section Review [SLIDES]
- React Masterclass #57 - PROJECT: Building Taco Card Component
- React Masterclass #57 - PROJECT: Building Taco Card Component
- React Masterclass #58 - Creating React Project
- React Masterclass #58 - Creating React Project
- React Masterclass #59 - Downloading Project Assets
- React Masterclass #59 - Downloading Project Assets
- React Masterclass #60 - Styling App Component and Showing Taco Image
- React Masterclass #60 - Styling App Component and Showing Taco Image
- React Masterclass #61 - Adding Taco Title
- React Masterclass #61 - Adding Taco Title
- React Masterclass #62 - Adding Add to Order Button
- React Masterclass #62 - Adding Add to Order Button
- React Masterclass #63 - Creating TacoCard Component
- React Masterclass #63 - Creating TacoCard Component
- React Masterclass #64 - CHALLENGE: Extract Button to Its Own Component
- React Masterclass #64 - CHALLENGE: Extract Button to Its Own Component
- React Masterclass #65 - Intro to Props [SLIDES]
- React Masterclass #65 - Intro to Props [SLIDES]
- React Masterclass #66 - Pass Props to TacoCard Component
- React Masterclass #66 - Pass Props to TacoCard Component
- React Masterclass #67 - Using Destructuring Syntax for Props
- React Masterclass #67 - Using Destructuring Syntax for Props
- React Masterclass #68 - Install PropTypes Library
- React Masterclass #68 - Install PropTypes Library
- React Masterclass #69 - Declare PropTypes for TacoCard Component
- React Masterclass #69 - Declare PropTypes for TacoCard Component
- React Masterclass #70 - Default PropTypes
- React Masterclass #70 - Default PropTypes
- React Masterclass #71 - The isRequired Property
- React Masterclass #71 - The isRequired Property
- React Masterclass #72 - CHALLENGE: Adding a Prop for Image Source
- React Masterclass #72 - CHALLENGE: Adding a Prop for Image Source
- React Masterclass #73 - Installing React Dev Tools
- React Masterclass #73 - Installing React Dev Tools
- React Masterclass #74 - Exploring Components Panel in React Dev Tools
- React Masterclass #74 - Exploring Components Panel in React Dev Tools
- React Masterclass #75 - Section Review
- React Masterclass #75 - Section Review
- React Masterclass #76 - Using the map Method to Generate an Array of JSX
- React Masterclass #76 - Using the map Method to Generate an Array of JSX
- React Masterclass #77 - The key Prop
- React Masterclass #77 - The key Prop
- React Masterclass #78 - Spreading Props for Child Component
- React Masterclass #78 - Spreading Props for Child Component
- React Masterclass #79 - Destructuring Properties in map Method
- React Masterclass #79 - Destructuring Properties in map Method
- React Masterclass #80 - Create BurritoCard Component
- React Masterclass #80 - Create BurritoCard Component
- React Masterclass #81 - Render BurritoCard Components
- React Masterclass #81 - Render BurritoCard Components
- React Masterclass #82 - The children Prop I
- React Masterclass #82 - The children Prop I
- React Masterclass #83 - The children Prop II
- React Masterclass #83 - The children Prop II
- React Masterclass #84 - The children Prop III (Prop Types for children)
- React Masterclass #84 - The children Prop III (Prop Types for children)
- React Masterclass #85 - Creating Tacos and Burritos Components
- React Masterclass #85 - Creating Tacos and Burritos Components
- React Masterclass #86 - Creating FoodItems Component
- React Masterclass #86 - Creating FoodItems Component
- React Masterclass #87 - Merging Tacos and Burritos Arrays
- React Masterclass #87 - Merging Tacos and Burritos Arrays
- React Masterclass #88 - Some Fun with Rearranging Components
- React Masterclass #88 - Some Fun with Rearranging Components
- React Masterclass #89 - Adding PropTypes for FoodItems Component
- React Masterclass #89 - Adding PropTypes for FoodItems Component
- React Masterclass #90 - Section Review
- React Masterclass #90 - Section Review
- React Masterclass #91 - Welcome to the Section
- React Masterclass #91 - Welcome to the Section
- React Masterclass #92 - Create Behind the Scenes Project
- React Masterclass #92 - Create Behind the Scenes Project
- React Masterclass #93 - The document.getElementById Method
- React Masterclass #93 - The document.getElementById Method
- React Masterclass #94 - The document.createElement Method
- React Masterclass #94 - The document.createElement Method
- React Masterclass #95 - Adding CSS Styles Programmatically
- React Masterclass #95 - Adding CSS Styles Programmatically
- React Masterclass #96 - The React.createElement Method [SLIDES]
- React Masterclass #96 - The React.createElement Method [SLIDES]
- React Masterclass #97 - Pulling In React via CDN
- React Masterclass #97 - Pulling In React via CDN
- React Masterclass #98 - The React.createElement Method I
- React Masterclass #98 - The React.createElement Method I
- React Masterclass #99 - The React.createElement Method II (Passing Props)
- React Masterclass #99 - The React.createElement Method II (Passing Props)
- React Masterclass #100 - The React.createElement Method III
- React Masterclass #100 - The React.createElement Method III
- React Masterclass #101 - The React.createElement Method IV
- React Masterclass #101 - The React.createElement Method IV
- React Masterclass #102 - The React createElement Method V
- React Masterclass #102 - The React createElement Method V
- React Masterclass #103 - The React.createElement Method VI
- React Masterclass #103 - The React.createElement Method VI
- React Masterclass #104 - How JSX Simplifies The Process
- React Masterclass #104 - How JSX Simplifies The Process
- React Masterclass #105 - Adding JSX to Our Project
- React Masterclass #105 - Adding JSX to Our Project
- React Masterclass #106 - Section Review
- React Masterclass #106 - Section Review
- React Masterclass #107 - Class vs Functional Components
- React Masterclass #107 - Class vs Functional Components
- React Masterclass #108 - Create Project for Section
- React Masterclass #108 - Create Project for Section
- React Masterclass #109 - Convert App from Functional to Class Component
- React Masterclass #109 - Convert App from Functional to Class Component
- React Masterclass #110 - Styling our User Form with Tailwind CSS
- React Masterclass #110 - Styling our User Form with Tailwind CSS
- React Masterclass #111 - Props in Class Components
- React Masterclass #111 - Props in Class Components
- React Masterclass #112 - Declaring Initial Component State with this state
- React Masterclass #112 - Declaring Initial Component State with this state
- React Masterclass #113 - The setState Method
- React Masterclass #113 - The setState Method
- React Masterclass #114 - Extracting Click Logic to Component Method
- React Masterclass #114 - Extracting Click Logic to Component Method
- React Masterclass #115 - First Solution: The bind Keyword
- React Masterclass #115 - First Solution: The bind Keyword
- React Masterclass #116 - Second Solution: Arrow Function for Methods
- React Masterclass #116 - Second Solution: Arrow Function for Methods
- React Masterclass #117 - Styling the Login and Signup Buttons
- React Masterclass #117 - Styling the Login and Signup Buttons
- React Masterclass #118 - Add Click Handler Methods for New Buttons
- React Masterclass #118 - Add Click Handler Methods for New Buttons
- React Masterclass #119 - The SyntheticEvent Object
- React Masterclass #119 - The SyntheticEvent Object
- React Masterclass #120 - Exploring Available React Events
- React Masterclass #120 - Exploring Available React Events
- React Masterclass #121 - Swapping State to Boolean Property
- React Masterclass #121 - Swapping State to Boolean Property
- React Masterclass #122 - EXERCISE: Adding Derived State
- React Masterclass #122 - EXERCISE: Adding Derived State
- React Masterclass #123 - Install React Switch
- React Masterclass #123 - Install React Switch
- React Masterclass #124 - Use React Switch in App Component
- React Masterclass #124 - Use React Switch in App Component
- React Masterclass #125 - Section Review
- React Masterclass #125 - Section Review
- React Masterclass #126 - Render Inputs for Email and Password
- React Masterclass #126 - Render Inputs for Email and Password
- React Masterclass #127 - Conditional Rendering with && Symbols
- React Masterclass #127 - Conditional Rendering with && Symbols
- React Masterclass #128 - Inverting the loginMode Boolean
- React Masterclass #128 - Inverting the loginMode Boolean
- React Masterclass #129 - Running into a Problem with Root Elements
- React Masterclass #129 - Running into a Problem with Root Elements
- React Masterclass #130 - Intro to React.Fragment
- React Masterclass #130 - Intro to React.Fragment
- React Masterclass #131 - Install Prop Types Library
- React Masterclass #131 - Install Prop Types Library
- React Masterclass #132 - Creating Button Component
- React Masterclass #132 - Creating Button Component
- React Masterclass #133 - Render Button Component in App Component
- React Masterclass #133 - Render Button Component in App Component
- React Masterclass #134 - Passing a Function to setState Method
- React Masterclass #134 - Passing a Function to setState Method
- React Masterclass #135 - Alternate state Declaration Syntax
- React Masterclass #135 - Alternate state Declaration Syntax
- React Masterclass #136 - Reacting to User Typing into Input
- React Masterclass #136 - Reacting to User Typing into Input
- React Masterclass #137 - Saving Input to Component State
- React Masterclass #137 - Saving Input to Component State
- React Masterclass #138 - The value Attribute
- React Masterclass #138 - The value Attribute
- React Masterclass #139 - Add State for Password and Confirm Password
- React Masterclass #139 - Add State for Password and Confirm Password
- React Masterclass #140 - Passing Additional Arguments to Handler Method
- React Masterclass #140 - Passing Additional Arguments to Handler Method
- React Masterclass #141 - Adding State for Message
- React Masterclass #141 - Adding State for Message
- React Masterclass #142 - Add onClick and type Prop for Button Component
- React Masterclass #142 - Add onClick and type Prop for Button Component
- React Masterclass #143 - Alternate Syntax for propTypes and defaultProps
- React Masterclass #143 - Alternate Syntax for propTypes and defaultProps
- React Masterclass #144 - The preventDefault Method on a Submission Event
- React Masterclass #144 - The preventDefault Method on a Submission Event
- React Masterclass #145 - Handle User Form Submission
- React Masterclass #145 - Handle User Form Submission
- React Masterclass #146 - Section Review
- React Masterclass #146 - Section Review
- React Masterclass #147 - What is testing?
- React Masterclass #147 - What is testing?
- React Masterclass #148 - The describe and it Functions
- React Masterclass #148 - The describe and it Functions
- React Masterclass #149 - The expect Function + toBe
- React Masterclass #149 - The expect Function + toBe
- React Masterclass #150 - Nested Describe Functions
- React Masterclass #150 - Nested Describe Functions
- React Masterclass #151 - The toEqual Matcher
- React Masterclass #151 - The toEqual Matcher
- React Masterclass #152 - The render and screen Functions
- React Masterclass #152 - The render and screen Functions
- React Masterclass #153 - Understanding ARIA Roles
- React Masterclass #153 - Understanding ARIA Roles
- React Masterclass #154 - The getByRole Method
- React Masterclass #154 - The getByRole Method
- React Masterclass #155 - Configuring the getByRole Method
- React Masterclass #155 - Configuring the getByRole Method
- React Masterclass #156 - Testing Playground Extension
- React Masterclass #156 - Testing Playground Extension
- React Masterclass #157 - The userEvent Object and debug
- React Masterclass #157 - The userEvent Object and debug
- React Masterclass #158 - The getByLabelText Method
- React Masterclass #158 - The getByLabelText Method
- React Masterclass #159 - Targeting the Submit Button
- React Masterclass #159 - Targeting the Submit Button
- React Masterclass #160 - Writing Assertion for App
- React Masterclass #160 - Writing Assertion for App
- React Masterclass #161 - Add Test for Registration Mode
- React Masterclass #161 - Add Test for Registration Mode
- React Masterclass #162 - Adding Test for Signup Failure
- React Masterclass #162 - Adding Test for Signup Failure
- React Masterclass #163 - Section Review
- React Masterclass #163 - Section Review
- React Masterclass #164 - What is a React hook?
- React Masterclass #164 - What is a React hook?
- React Masterclass #165 - Quick Review of ES6 Array Destructuring Syntax
- React Masterclass #165 - Quick Review of ES6 Array Destructuring Syntax
- React Masterclass #166 - The useState Hook
- React Masterclass #166 - The useState Hook
- React Masterclass #167 - Rendering New and Old App Components Side by Side
- React Masterclass #167 - Rendering New and Old App Components Side by Side
- React Masterclass #168 - The Two Values from the useState Hook
- React Masterclass #168 - The Two Values from the useState Hook
- React Masterclass #169 - Copying Over Render Code From App Component
- React Masterclass #169 - Copying Over Render Code From App Component
- React Masterclass #170 - Modifying Old Method Event Handlers
- React Masterclass #170 - Modifying Old Method Event Handlers
- React Masterclass #171 - Nested Functions Inside Function Component
- React Masterclass #171 - Nested Functions Inside Function Component
- React Masterclass #172 - Writing Function for Handling Form Submit
- React Masterclass #172 - Writing Function for Handling Form Submit
- React Masterclass #173 - Replacing Class Component with Functional One
- React Masterclass #173 - Replacing Class Component with Functional One
- React Masterclass #174 - Checking in On React Testing Library Tests
- React Masterclass #174 - Checking in On React Testing Library Tests
- React Masterclass #175 - Section Review
- React Masterclass #175 - Section Review
- React Masterclass #176 - Intro to Employee Registry Project
- React Masterclass #176 - Intro to Employee Registry Project
- React Masterclass #177 - Create Employee Registry Project
- React Masterclass #177 - Create Employee Registry Project
- React Masterclass #178 - Intro to Material UI
- React Masterclass #178 - Intro to Material UI
- React Masterclass #179 - Installing Material UI
- React Masterclass #179 - Installing Material UI
- React Masterclass #180 - The CssBaseline Component
- React Masterclass #180 - The CssBaseline Component
- React Masterclass #181 - The Container and Box Components
- React Masterclass #181 - The Container and Box Components
- React Masterclass #182 - The Typography Component
- React Masterclass #182 - The Typography Component
- React Masterclass #183 - Rendering Input for Employee Names
- React Masterclass #183 - Rendering Input for Employee Names
- React Masterclass #184 - Add State for Employee Name
- React Masterclass #184 - Add State for Employee Name
- React Masterclass #185 - Rendering Card for Employee Profiles
- React Masterclass #185 - Rendering Card for Employee Profiles
- React Masterclass #186 - Rendering Cards with map Method
- React Masterclass #186 - Rendering Cards with map Method
- React Masterclass #187 - Filtering Employees with User Search
- React Masterclass #187 - Filtering Employees with User Search
- React Masterclass #188 - Section Review
- React Masterclass #188 - Section Review
- React Masterclass #189 - Lifecycle Methods
- React Masterclass #189 - Lifecycle Methods
- React Masterclass #190 - Intro to JSON Server Library
- React Masterclass #190 - Intro to JSON Server Library
- React Masterclass #191 - Create db json File for JSON Server Library
- React Masterclass #191 - Create db json File for JSON Server Library
- React Masterclass #192 - Install Axios NPM Library
- React Masterclass #192 - Install Axios NPM Library
- React Masterclass #193 - Practice with Axios in Regular JavaScript File
- React Masterclass #193 - Practice with Axios in Regular JavaScript File
- React Masterclass #194 - The componentDidMount Lifecycle Method
- React Masterclass #194 - The componentDidMount Lifecycle Method
- React Masterclass #195 - Refactoring componentDidMount with async/await
- React Masterclass #195 - Refactoring componentDidMount with async/await
- React Masterclass #196 - The componentDidUpdate Lifecycle Method
- React Masterclass #196 - The componentDidUpdate Lifecycle Method
- React Masterclass #197 - Refactoring componentDidUpdate with async/await
- React Masterclass #197 - Refactoring componentDidUpdate with async/await
- React Masterclass #198 - Jest Mock Functions I
- React Masterclass #198 - Jest Mock Functions I
- React Masterclass #199 - Jest Mock Functions II
- React Masterclass #199 - Jest Mock Functions II
- React Masterclass #200 - The jest.mock Method
- React Masterclass #200 - The jest.mock Method
- React Masterclass #201 - Writing Tests for App Component
- React Masterclass #201 - Writing Tests for App Component
- React Masterclass #202 - Section Review
- React Masterclass #202 - Section Review
- React Masterclass #203 - Refactoring App Component to Utilize useState
- React Masterclass #203 - Refactoring App Component to Utilize useState
- React Masterclass #204 - The useEffect Hook
- React Masterclass #204 - The useEffect Hook
- React Masterclass #205 - Fetching Employees in useEffect Hook
- React Masterclass #205 - Fetching Employees in useEffect Hook
- React Masterclass #206 - Fixing Infinite Loop Problem
- React Masterclass #206 - Fixing Infinite Loop Problem
- React Masterclass #207 - Second Argument to useEffect Hook
- React Masterclass #207 - Second Argument to useEffect Hook
- React Masterclass #208 - Async Code in useEffect
- React Masterclass #208 - Async Code in useEffect
- React Masterclass #209 - Clean Up Code
- React Masterclass #209 - Clean Up Code
- React Masterclass #210 - The setTimeout, setInterval & clearInterval Functions
- React Masterclass #210 - The setTimeout, setInterval & clearInterval Functions
- React Masterclass #211 - Side Effect: Displaying Time
- React Masterclass #211 - Side Effect: Displaying Time
- React Masterclass #212 - Problems with Side Effects
- React Masterclass #212 - Problems with Side Effects
- React Masterclass #213 - The useEffect Cleanup Function
- React Masterclass #213 - The useEffect Cleanup Function