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

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