React Premium Course

React Full Course

(Premium Version with Certificate)

Enroll ~~$169~~ $49 Free Preview

Premium Highlights

Enhanced Learning Experience

An ad-free learning experience with progress tracking, easy-to-navigate content.
Certificate of Completion

Earn a Certificate of Completion for the world’s most popular frontend library. Add a competitive edge to your resume.
Detailed Course Breakdown

Easily find and revisit specific skills with our detailed course breakdown and search feature
Support SuperSimpleDev

Your purchase supports SuperSimpleDev, helping us to continue producing high-quality educational videos and content.

Certificate

https://supersimple.dev/certificates/react

Course curriculum

1. Introduction
  FREE PREVIEW
1. Lesson 1 Links
2. 1.1 Requirements
3. 1.2 Setup
4. 1.3 What is React & JavaScript Review
5. 1.4 Load JS From a File
6. 1.5 Load JS From a Website (External Library)
7. 1.6 React is an External Library
8. 1.7 Why We're Using a supersimpledev URL
9. 1.8 React vs ReactDOM
10. 1.9 DOM Review
11. 1.10 Set Up React
12. 1.11 .render()
13. 1.12 HTML Structure Review
14. 1.13 Babel External Library
15. 1.14 JSX
16. 1.15 Translate JSX into JS using Babel
17. 1.16 Render an Element Using React
18. 1.17 Render Multiple Elements Using React
19. 1.18 JSX Formatting
20. 1.19 React Helps Us Create Websites Easier
21. 1.20 Conclusion and Exercises
22. Lesson 1 Course Notes (Work In Progress)
1. Lesson 2 Links
2. 2.1 Chatbot Project Intro and Setup
3. 2.2 Components
4. 2.3 Create the ChatInput Component
5. 2.4 Component Syntax
6. 2.5 Fragments
7. 2.6 Adjust Placeholder and Size of Input
8. 2.7 Create the ChatMessage Component
9. 2.8 Load Profile Image and Insert ChatMessage
10. 2.9 Use div for Layout
11. 2.10 Props
12. 2.11 Create More ChatMessages using Props
13. 2.12 Add sender Prop
14. 2.13 Destructuring Shortcut
15. 2.14 If-Statements Inside JSX using && (AND)
16. 2.15 JSX on Multiple Lines
17. 2.16 Create the App Component
18. 2.17 Conclusion and Exercises
1. Lesson 3 Links
2. 3.1 Save the Data
3. 3.2 Generate the HTML
4. 3.3 Add the key Prop
5. 3.4 Create the ChatMessages Component
6. 3.5 Events and Event Handlers
7. 3.6 Add a New Chat Message
8. 3.7 State
9. 3.8 Array Destructuring
10. 3.9 Get the Text in the Textbox Using onChange
11. 3.10 Save the Text in the Textbox Using State
12. 3.11 Make the Send Button Interactive
13. 3.12 Lifting the State Up
14. 3.13 Create a New ChatMessage Using the Textbox
15. 3.14 Controlled Inputs
16. 3.15 Get a Response From the Chatbot
17. 3.16 Display the Chatbot Response on the Website
18. 3.17 Conclusion and Exercises
1. Lesson 4 Links
2. 4.1 CSS Review
3. 4.2 Style the Send Button
4. 4.3 Style the Textbox
5. 4.4 Create the Layout for ChatInput using Flexbox
6. 4.5 Create the Layout for the Overall App
7. 4.6 Create the Layout the Chat Messages
8. 4.7 Style the Text in the Chat Messages
9. 4.8 Style the Chat Messages Profile Image
10. 4.9 Move Textbox to the Bottom
11. 4.10 Make Chat Messages Scrollable
12. 4.11 Hooks and useEffect
13. 4.12 useRef and Auto Scroll
14. 4.13 Conclusion and Exercises
1. Lesson 5 Links
2. 5.1 Command Line Review
3. 5.2 NodeJS Review
4. 5.3 Proper React Setup with Vite
5. 5.4 Folders in the React Setup
6. 5.5 Files in the React Setup
7. 5.6 Move App into the React Setup
8. 5.7 Fix ESLint Errors
9. 5.8 main.jsx in the React Setup
10. 5.9 Move CSS into the React Setup
11. 5.10 Move Images into the React Setup
12. 5.11 Move ChatInput Into a Separate File
13. 5.12 JavaScript Modules Review
14. 5.13 Move Other Components Into Separate Files
15. 5.14 Default Export Review
16. 5.15 Finish Separating the Components
17. 5.16 Separate the CSS into Different Files
18. 5.17 Conclusion and Exercises
1. Lesson 6 Links
2. 6.1 Ecommerce Project Setup
3. 6.2 Git Review
4. 6.3 Get the Starting HTML and CSS
5. 6.4 Add the Home Page HTML
6. 6.5 Add the Home Page CSS
7. 6.6 Add the Home Page Images
8. 6.7 Routing
9. 6.8 More Details About Routing
10. 6.9 Add the Checkout Page HTML
11. 6.10 Add the Checkout Page CSS and Title
12. 6.11 Update the Links
13. 6.12 Add the Orders Page
14. 6.13 Separate the Header
15. 6.14 Link Component
16. 6.15 Conclusion and Exercises
1. Lesson 7 Links
2. 7.1 Generate the HTML
3. 7.2 Backend Review
4. 7.3 Add a Backend
5. 7.4 Data Fetching in React
6. 7.5 Axios
7. 7.6 Use Backend Data to Generate the HTML
8. 7.7 Fetch Cart from Backend
9. 7.8 Vite Server Proxy
10. 7.9 Fetch the Data for the Checkout Page
11. 7.10 Query Parameters, expand Parameter
12. 7.11 Generate the HTML for the Cart
13. 7.12 Fetch the Data for the Delivery Options
14. 7.13 Display Delivery Date and Price
15. 7.14 Replace name and checked Attributes
16. 7.15 Display the Selected Delivery Date
17. 7.16 Generate the HTML for PaymentSummary
18. 7.17 Fetch the Data for Orders Page
19. 7.18 Generate the HTML for Orders Page
20. 7.19 Separate HomePage into Smaller Components
21. 7.20 Separate the OrderSummary
22. 7.21 Separate the PaymentSummary
23. 7.22 Separate DeliveryOptions, Create orders Folder
24. 7.23 Use Async Await to Fetch the Data
25. 7.24 Conclusion and Exercises
1. Lesson 8 Links
2. 8.1 Data Mutation
3. 8.2 Reload the Cart
4. 8.3 Quantity Selector and Controlled Inputs
5. 8.4 Separate into Product Component
6. 8.5 Add Quantity to Cart and Clean Up Code
7. 8.6 Types of Requests GET, POST, PUT, DELETE
8. 8.7 Update Delivery Options with PUT /deliveryOptions
9. 8.8 Update the PaymentSummary
10. 8.9 Delete Cart Item with DELETE /cartItem
11. 8.10 Create Order with POST /orders
12. 8.11 Conclusions and Exercises
1. Lesson 9 Links
2. 9.1 Intro to Automated Testing
3. 9.2 Unit Tests
4. 9.3 Test Suites
5. 9.4 Integration Test Setup
6. 9.5 Integration Tests for Product
7. 9.6 Add More Checks for Product
8. 9.7 Test User Interactions
9. 9.8 Code Cleanup with beforeEach
10. 9.9 Mock Implementation
11. 9.10 Add MemoryRouter Around HomePage
12. 9.11 Check the HomePage
13. 9.12 within Function
14. 9.13 Conclusion and Exercises
1. Lesson 10 Links
2. 10.1 Intro to AWS
3. 10.2 Sign Up to AWS
4. 10.3 Intro to EC2 and Elastic Beanstalk
5. 10.4 Set Up Elastic Beanstalk
6. 10.5 Put the Backend on the Internet
7. 10.6 Put the Frontend on the Internet
8. 10.7 Vite Config Build
9. 10.8 Deploy Without a Backend
10. 10.9 Add a Load Balancer
11. 10.10 Separate Database with Amazon RDS
12. 10.11 Get a Domain Name
13. 10.12 Set Up Domain Name with AWS
14. 10.13 HTTPS and SSL Cert
15. 10.14 AWS Cleanup
16. 10.15 Conclusion and Exercises
1. Lesson 11 Links
2. 11.1 Changes in React 19
3. 11.2 React compiler, useMemo, useCallback, memo
4. 11.3 Set Up the React Compiler
5. 11.4 Check if React Compiler is Working
6. 11.5 Removal of PropTypes
7. 11.6 Set Up TypeScript with React
8. 11.7 Intro to TypeScript
9. 11.8 Type Inference
10. 11.9 Convert Ecommerce Project to TypeScript
11. 11.10 Move Files to the TypeScript Project
12. 11.11 Fix Errors and Run TypeScript Project
13. 11.12 Organize Project Folders
14. 11.13 Intro to TypeScript with React
15. 11.14 Type Aliases
16. 11.15 Conclusion and Exercises
1. React Final Test
2. Double check your completion & name before receiving your certificate!

About this course

$49.00
192 lessons
11.5 hours of video content

Unlock your superior learning experience NOW

Elevate your learning and support quality education today.

Certificate of Completion
Detailed course breakdown
Ad-free, easy-to-navigate content

React Full Course

Premium Highlights

Enhanced Learning Experience

Certificate of Completion

Detailed Course Breakdown

Support SuperSimpleDev

Certificate

Course curriculum

Introduction to React Full Course

1. React Basics, JSX

2. Components, Props, Start the Chatbot Project

3. State, Create the Chatbot Features

4. CSS, Hooks, Style the Chatbot

5. Proper React Setup

6. Routing, Git, Start the Ecommerce Project

7. Backend, Data Fetching, Async Await

8. Data Mutation, Finish the Ecommerce Project

9. Automated Tests in React

10. Deploy React to the Internet, Intro to AWS

11. React 19, TypeScript with React

Final Test

About this course

Unlock your superior learning experience NOW