
React Tutorial and Projects Course | |
Step by Step Learn React.js and Create Interesting Projects |
|
Created by | John Smilga |
Language | English |
React Tutorial and Projects Course

React Tutorial and Projects Course | |
Step by Step Learn React.js and Create Interesting Projects |
|
Created by | John Smilga |
Language | English |
1. Introduction and Setup
- 1. What is React 00:05:42
- 2. Goals 00:01:59
- 3. Structure 00:00:56
- 4. Course Requirements 00:01:59
- 5. Dev Environment Setup 00:04:41
- 6. Text Editor Setup 00:01:54
- 7. Video Blur Fix 00:01:37
- 8. Course Review 00:00:32
2. Install create-react-app
- 1. Command Line Basics 00:06:40
- 2. NPM Basics 00:10:07
- 3. What is Create-react-app Babel Webpack 00:01:58
- 4. Install Create-react-app 00:06:14
- 5. Folder Structure 00:09:05
- 6. Remove Boilerplate 00:01:35
3. React Basics Tutorial
- 1. First Component 00:10:13
- 2. Text Editor Setup 00:08:16
- 3. First Component in Detail 00:06:49
- 4. JSX Rules 00:09:37
- 5. Nested Components and Tools 00:05:55
- 6. Mini Book Project 00:08:09
- 7. CSS 00:11:42
- 8. JSX - CSS 00:06:50
- 9. JSX - Javascript 00:07:59
- 10. Props 00:16:11
- 11. Props - Destructuring 00:04:03
- 12. Props - Children 00:06:29
- 13. Simple List 00:08:59
- 14. Proper List 00:07:37
- 15. Key Prop and Spread Operator 00:06:03
- 16. Event Basics 00:12:20
- 17. Import and Export Statements 00:12:13
- 18. Free Hosting 00:04:57
4. React Hooks and Advanced Topics
- 1. Intro 00:02:19
- 2. Starter Project .html
- 3. Install Starter 00:02:07
- 4. Starter Overview 00:05:16
- 5. useState - Simple Use Case 00:09:43
- 6. useState - Basics 00:12:02
- 7. General Rules of Hooks 00:02:51
- 8. useState - Array Example 00:13:47
- 9. useState - Object Example 00:05:32
- 10. useState - Multiple State Values 00:03:16
- 11. Simple Counter 00:05:52
- 12. Functional Update Form 00:12:44
- 13. useEffect - Basics 00:10:09
- 14. useEffect - Conditional 00:03:52
- 15. useEffect - Dependency List 00:05:32
- 16. useEffect - Cleanup Function 00:12:10
- 17. useEffect - Fetch Data 00:12:04
- 18. Multiple Returns - Basics 00:05:39
- 19. Multiple Returns - Fetching Example 00:14:57
- 20. Short-Circuit Evaluation 00:10:42
- 21. Ternary Operator 00:08:39
- 22. ShowHide Component 00:08:44
- 23. Form Basics 00:08:38
- 24. Controlled Inputs 00:09:16
- 25. Add Item to the List 00:12:23
- 26. Multiple Inputs 00:15:57
- 27. useRef 00:09:51
- 28. useReducer - useState Setup 00:13:32
- 29. useReducer - Refactor 00:07:23
- 30. useReducer - Add Item 00:15:59
- 31. useReducer - Remove Item 00:07:42
- 32. Prop Drilling 00:13:40
- 33. Context API useContext 00:11:46
- 34. Custom Hooks - useFetch 00:11:47
- 35. PropTypes - Setup 00:09:39
- 36. PropTypes - Images 00:08:00
- 37. PropTypes - Default Values 00:04:53
- 38. React Router Intro 00:05:11
- 39. React Router - Basic Setup 00:09:58
- 40. React Router - Error and Switch Component 00:03:01
- 41. React Router - Links 00:04:31
- 42. React Router - Url Params and Placeholder 00:14:29
- 43. React Optimization Warning!!!! 00:03:30
- 44. React.memo 00:08:29
- 45. useCallback 00:08:10
- 46. useMemo 00:06:15
- 47. useCallback - Fetch Example 00:03:27
5. Basic Projects
- 1. Info .html
6. API Projects
- 1. Info .html
7. Search Github Users
- 1. Info .html
8. E-Commerce Project
- 1. Info .html
9. React Basics Tutorial
- 1. Old Content .html
- 2. First React Component 00:10:39
- 2.1 11-first-component .zip
- 3. Text Editor Setup 00:08:16
- 4. First React Component In Detail 00:06:49
- 5. React JSX Rules 00:09:37
- 6. Nested Components and React Developer Tools 00:05:55
- 7. Mini Book Project 00:10:29
- 7.1 15-book-mini-project .zip
- 8. CSS in React 00:11:58
- 8.1 16-css-in-react .zip
- 9.1 17-javascript-in-jsx .zip
- 10. Props 00:14:31
- 10.1 18-props .zip
- 11. More Props and Destructuring 00:13:05
- 11.1 19-props-destructuring .zip
- 12. Children Props 00:05:25
- 12.1 20-children-prop .zip
10. Person List Project
- 1. Intro 00:00:56
- 2. Main Project 00:24:25
- 2.1 22-PERSON LIST PROJECT .zip
- 3. Project Files 00:00:32
- 3.1 22-PERSON LIST PROJECT .zip
11. React Basics Tutorial Continued
- 1. Import and Export (ES6 Modules) 00:26:33
- 1.1 23-imports-exports .zip
- 2. Class Based Components in React 00:07:32
- 2.1 24-CLASS BASED COMPONENTS .zip
- 3. Functional VS Class Based Components 00:03:28
- 4. State 00:30:40
- 4.1 25-STATE .zip
- 5. Alternative State Syntax 00:06:06
- 5.1 26-ALTERNATIVE-STATE-SYNTAX .zip
- 6. Book Mini Project 00:10:15
- 6.1 29-Book-mini-project .zip
- 7. Events 00:09:33
- 7.1 30-EVENTS-REACT .zip
- 8. this.setState 00:10:31
- 8.1 31-THISSETSTATE .zip
- 9. Passing Methods and Prop Drilling 00:12:31
- 9.1 32-PROP DRILLING .zip
- 10. Passing Methods to Children Components to Work with State 00:14:42
- 10.1 33-PASSING DOWN METHODS .zip
- 11. Conditionals in JSX 00:10:47
- 11.1 34-JSX CONDITIONAL RENDERING .zip
12. City Tours Project
- 1. Intro 00:03:06
- 2. Font Awesome Update .html
- 3. Install and Setup 00:13:59
- 3.1 36-setup .zip
- 4. Font Awesome Update! .html
- 5. Navbar Component Logic 00:07:31
- 6. Navbar Component SASS 00:07:14
- 6.1 38-navbar-sass .zip
- 7. Main Project Structure 00:09:23
- 7.1 39-project-folder-structure .zip
- 8. TourList Component 00:11:17
- 8.1 40-tour-component-js .zip
- 9. Tour Component Logic 00:09:35
- 9.1 40-tour-component-js .zip
- 10. Tour Component Styling 00:11:24
- 10.1 42-Tour-CSS .zip
- 11. Tour Info Toggle 00:03:54
- 11.1 43-tour-info-toggle .zip
- 12. Tour Component Delete 00:04:54
- 12.1 44-delete-tour .zip
- 13. Deploy on Netlify with Drag and Drop 00:03:56
- 14. Deploy on Netlify with Continuous Deployment (Github Git) 00:09:28
13. React Basics Tutorial Continued
- 1. PropTypes 00:13:19
- 1.1 47-propTypes .zip
- 2. isRequired and defaultProps 00:05:10
- 2.1 48-props-isrequired-defaultProps .zip
- 3. PropTypes Object Shape 00:09:19
- 3.1 49-propTypes-object-shape .zip
- 4. Controlled Inputs and Form Submission 00:26:34
- 4.1 50-controlled-inputs .zip
- 5. Controlled Inputs Use Case 00:02:03
- 5.1 50.5-controlled-inputs-usecases .zip
- 6. Uncontrolled Inputs with ref 00:08:47
- 6.1 51-uncontrolled-inputs .zip
- 7. React Fragment and this.setState() Asynchronous 00:19:38
- 7.1 52-react-fragment-functional-thisSetState .zip
14. Todo List Project
- 1. Project Intro 00:01:31
- 2. Font Awesome Update! .html
- 3. Setup 00:06:35
- 4. Font Awesome Update! .html
- 5. Bootstrap and Folder Structure 00:12:29
- 5.1 57-todo-github-netlify .zip
- 6. Github and Netlify Pipeline 00:07:09
- 6.1 57-todo-github-netlify .zip
- 7. UUID Update! .html
- 8. App Component 00:14:48
- 8.1 58-todo-app-structure .zip
- 9. Input Component 00:08:10
- 9.1 59-input-component .zip
- 10. Handle Change and HandleSubmit 00:10:31
- 10.1 60-todo-handleChange-hanldeSubmit .zip
- 11. Todo List Component 00:08:11
- 11.1 61-todo-itemList .zip
- 12. Todo Item Component 00:07:35
- 12.1 62-todo-item-component .zip
- 13. Clear List and Delete Method 00:03:42
- 13.1 63-todo-clearList-delete-item .zip
- 14. Edit Method 00:15:04
- 14.1 64-todo-handle-edit .zip
- 15. Finished Application 00:02:35
- 15.1 65-finished-application .zip
15. Beach Resort Project
- 1. Project Intro 00:05:39
- 2. Setup Files and CSS 00:02:18
- 2.1 beach-resort-setup-files .zip
- 3. Scaffold React Application 00:04:44
- 4. Project Setup 00:09:17
- 5. Page Setup 00:04:38
- 6. Router Setup 00:10:19
- 7. Navbar Component 00:16:07
- 8. Hero Component 00:07:45
- 9. Banner Component 00:10:58
- 10. Services Section 00:13:23
- 11. Local Data 00:06:30
- 12. Context Api Setup 00:19:50
- 13. Format Data 00:15:58
- 14. Loading Component Setup 00:04:58
- 15. Featured Rooms Component 00:05:33
- 16. Room Component 00:14:42
- 17. GetRoom Function 00:04:40
- 18. Single Room Setup 00:10:40
- 19. Single Room Hero 00:08:47
- 20. Styled-Hero 00:15:49
- 21. Single Room Complete 00:14:25
- 22. Room Container 00:23:36
- 23. Room List 00:06:17
- 24. Room Filter Setup 00:07:37
- 25. Type Filter 00:28:36
- 26. Capacity Filter 00:07:14
- 27. Price Filter 00:08:29
- 28. Size-Checkbox Filter 00:09:50
- 29. Contentful Interface 00:07:45
- 30. Content Model 00:08:01
- 31. Content 00:09:11
- 32. Consume Content 00:18:19
- 33. Deploy On Netlify 00:10:32
- 33.1 finished project .zip
16. React Hooks
- 1. Intro 00:02:47
17. React Hooks Budget Calculator
- 1. Intro 00:03:18
- 2. Project Setup Files .html
- 2.1 setup-files-react-budget-calculator .zip
- 3. Bootstrap Application 00:03:00
- 4. Folder Structure 00:07:50
- 5. Initial List 00:03:59
- 5.1 6-inital-list .zip
- 6. UseState Setup 00:05:19
- 6.1 7-useState-intro .zip
- 7. App Component Return 00:04:39
- 7.1 8-app-returns .zip
- 8. Expense List 00:06:48
- 8.1 9-expense-list .zip
- 9. Expense Item 00:04:49
- 9.1 10-expense-item .zip
- 10. Expense Form 00:05:14
- 10.1 11-expense-form .zip
- 11. Controlled Inputs 00:13:12
- 11.1 12-controlled-inputs .zip
- 12. Handle Submit Function 00:09:10
- 12.1 13-handle-submit .zip
- 13. Alert Component 00:14:24
- 13.1 14-alert-component .zip
- 14. Clear Expenses 00:09:29
- 14.1 15-clear-expenses .zip
- 14.2 15-clear-expenses .zip
- 15. Delete Single Item 00:04:18
- 15.1 16-handle-delete .zip
- 16. Edit Single Item 00:18:00
- 16.1 17-handle-edit .zip
- 17. localStorage API 00:04:27
- 17.1 18-getLocalstorage-item .zip
- 18. useEffect 00:06:49
- 18.1 19-useEffect .zip
18. CocktailDB Project
- 1. Intro 00:03:13
- 2. Starter Project .html
- 3. Starter Project 00:00:34
- 4. Folder Structure 00:04:03
- 5. React Router Dom Install and Basic Setup 00:03:42
- 6. First Pages 00:05:11
- 7. Error Page 00:03:10
- 8. Single Cocktail Setup - Url Parameters 00:05:15
- 9. Navbar 00:06:06
- 10. About Page 00:01:59
- 11. Error Page 00:01:44
- 12. Home Page Setup 00:06:33
- 13. UseEffect and API Setup 00:05:58
- 14. UseEffect Second Argument 00:05:00
- 15. GetCocktails 00:10:02
- 16. CocktailList Component 00:06:27
- 17. Cocktail Component 00:05:16
- 18. Single Cocktail HTTP Request 00:14:09
- 19. Single Cocktail JSX 00:08:40
- 20. Search Form Component 00:11:51
- 21. Complete Application .html
19. Search Github Users
- 1. Intro 00:04:11
- 2. Starter Project Link .html
- 3. Starter Project 00:02:50
- 4. Setup Info 00:10:03
- 5. React Router Setup 00:06:51
- 6. React Router Error 00:02:36
- 7. Error Page 00:03:33
- 8. Login Page 00:04:37
- 9. Context API 00:08:45
- 10. Mock Data 00:13:39
- 11. Info Component 00:14:58
- 12. Card Component 00:13:13
- 13. Followers Component 00:05:25
- 14. Repos Setup 00:02:49
- 15. Fusion Charts Info 00:01:35
- 16. First Chart 00:03:46
- 17. Fusion Charts API 00:09:55
- 18. Fusion Charts - Configuration Options 00:02:30
- 19. Fusion Charts - Pie Chart 00:07:13
- 20. Calculate Most Used Language 00:18:43
- 21. Fusion Charts - Responsive 00:04:55
- 22. Fusion Charts - Doughnut Chart 00:05:08
- 23. Calculate Most Popular Language 00:08:00
- 24. Fusion Charts - Column and Bar Charts 00:04:35
- 25. Stars and Forks - Functionality 00:07:48
- 26. Search Component 00:10:15
- 27. Requests 00:14:41
- 28. Error 00:07:14
- 29. Search User 00:11:36
- 30. Loading Spinner 00:07:26
- 31. Repos and Followers 00:08:59
- 32. Promise.allSettled() 00:12:57
- 33. Auth0 Info 00:01:35
- 34. Auth0 Setup 00:13:27
- 35. Login - Logout 00:17:39
- 36. Private Route 00:10:15
- 37. Wrapper 00:06:37
- 38. Local Storage 00:02:57
- 39. Deploy Gotchas 00:03:26
- 40. Deploy Project 00:07:09
- 41. Finished Project .html
20. Vintage Tech Project
- 1. Intro .html
- 2. Vintage Tech Intro 00:07:48
- 3. Starter Application .html
- 4. Folder Structure 00:07:19
- 5. Router Setup 00:05:17
- 6. Basic Routes 00:05:36
- 7. Error Page 00:03:24
- 8. Product Details Page 00:07:34
- 8.1 8-react-router-complete .zip
- 9. Header 00:07:50
- 10. Error Page 00:02:23
- 11. About Page 00:01:48
- 12. Hero Component 00:05:47
- 12.1 12-everything-up-to-context .zip
- 13. Context API Intro 00:05:11
- 14. Product Context Setup 00:12:13
- 15. Setting Values using useState 00:05:58
- 16. Url Value .html
- 17. Axios - Url - Response 00:04:01
- 18. UseEffect Setup 00:05:02
- 19. UseEffect Second Argument 00:02:57
- 20. Loading Component 00:05:07
- 21. Product List and Product 00:11:20
- 22. Featured Products 00:09:31
- 23. Single Product 00:11:34
- 23.1 22-products-complete .zip
- 24. Cart Context Setup 00:07:48
- 25. Empty Cart 00:05:22
- 26. Cart Page 00:04:27
- 27. Single Cart Item 00:09:04
- 28. Calculate Cart Total and Cart Items 00:11:56
- 29. Remove Item 00:03:44
- 30. Increase Amount 00:03:27
- 31. Decrease Amount 00:03:25
- 32. AddToCart and ClearCart 00:10:29
- 33. localStorage 00:04:50
- 34. CartLink 00:03:31
- 34.1 33-ready-for-strapi .zip
- 35. Info 00:01:39
- 36. Strapi Install 00:03:44
- 37. Strapi Basics 00:02:32
- 38. Content Type 00:04:42
- 39. Add Products 00:04:13
- 40. API Access 00:03:23
- 41. Image Problem 00:03:39
- 42. Local Image Fix 00:10:20
- 43. IMPORTANT UPDATE !!! .html
- 44. Claudinary Image Fix 00:04:26
- 45. CartItem Image Fix 00:00:53
- 46. Login Page Setup 00:06:56
- 47. Login Page JSX 00:11:54
- 48. Login Page Initial Functionality 00:10:43
- 49. Strapi Auth Info 00:05:24
- 50. Register User Function 00:09:00
- 51. Login User Function 00:05:18
- 52. User Context Setup 00:03:58
- 53. User Context Complete 00:12:16
- 54. Alert Functionality 00:06:17
- 55. Alert Component 00:08:17
- 56. Using Alert 00:03:51
- 57. Hide Submit 00:03:06
- 58. Restrict Access 00:10:54
- 59. Restrict Checkout Page 00:09:06
- 60. Checkout Page Setup 00:08:31
- 61. Checkout Page JSX 00:11:17
- 62. Stripe Account and API Keys 00:01:01
- 63. Install react-stripe-elements 00:03:31
- 64. Integrate Stripe Elements 00:05:34
- 65. Get Stripe Token 00:06:52
- 66. Create Order Content Type 00:04:16
- 67. Submit Order Setup 00:06:18
- 68. Submit Order Complete 00:08:12
- 69. Strapi Backend 00:10:10
- 70. Deployment Info 00:01:26
- 71. Heroku Sign Up 00:02:26
- 72. Heroku Deployment 00:13:47
- 73. Setup Production App 00:07:58
- 74. Deploy FrontEnd 00:03:29
- 75. Additional Features 00:00:21
- 76. Additional Features CSS .html
- 77. Scroll Button Component 00:08:00
- 78. Scroll Functionality 00:08:17
- 79. Prop Types Intro 00:02:44
- 80. FlattenProducts Bug Fix 00:02:03
- 81. Product PropTypes 00:07:28
- 82. General useReducer Intro 00:01:39
- 83. Quick useReducer Info 00:02:00
- 84. useReducer Setup 00:05:21
- 85. Remove Item 00:06:39
- 86. Rest of the Cart Functionality 00:10:05
- 87. Actions as Variables 00:05:47
- 88. useReducer Recap 00:02:48
- 89. Paginate and Filter Intro 00:03:19
- 90. Add Fields Products 00:08:05
- 91. Products Context Setup 00:07:08
- 92. Paginate Function Placeholder 00:02:24
- 93. Filters and PageProducts Components 00:06:02
- 94. Paginate Function - Splice Method 00:10:46
- 95. Paginate Function - Slice Method 00:05:30
- 96. Display New Sorted Array 00:07:24
- 97. Page Buttons 00:10:45
- 98. Prev and Next Buttons 00:07:45
- 99. Filters Form Setup 00:19:21
- 100. updateFilters Function 00:10:05
- 101. Filters Logic Setup 00:05:16
- 102. Filters Logic Complete 00:12:29
- 103. Complete Project .html
21. Redux
- 1. Intro 00:01:14
- 2. Quick Redux Info 00:03:19
- 3. Starter App .html
- 4. App Intro 00:02:16
- 5. Starter Application Folder Structure 00:01:53
- 6. Create App using only React 00:03:18
- 7. Redux - Initial Setup 00:04:30
- 8. createStore and reducer 00:09:32
- 9. First Action 00:09:21
- 10. Rest of the Actions 00:05:46
- 11. Separate Logic 00:07:10
- 12. Connect To Redux 00:08:18
- 13. Access Dispatch 00:03:37
- 14. Mutation Example 00:02:36
- 15. mapDispatchToProps 00:06:34
- 16. Install Redux DevTools 00:04:42
- 17. Multiple Reducers Info 00:01:13
- 18. Setup Multiple Reducers 00:13:53
- 19. Modal Component 00:03:54
- 20. Modal Reducer 00:03:57
- 21. Connect Modal to Redux 00:10:14
- 22. Action Creators 00:09:50
- 23. Redux Thunk Install and Setup 00:08:30
- 24. Products Reducer 00:01:43
- 25. Products Component 00:11:52
- 26. Complete Project .html