React Tutorial and Projects Course

React Tutorial and Projects Course
React Tutorial and Projects Course
English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 45.5 Hours | 21.5 GB

Step by Step Learn React.js and Create Interesting Projects

React was released by Facebook’s web development team in 2013 as a view library. React is one of the best choices for building modern web applications. React has a slim API, a robust and evolving ecosystem and a great community. In this course we will be learning React by creating various projects.If you want to learn more than just same old tutorial and instead create interesting projects using React.js this course is for you.

All Project Intros are available for preview.

Project Nr 1 – Person List Project

Project Nr 2 – City Tours Project

Project Nr 3 – React To Do Project

Project Nr 4 – Beachwalk Resort Project

Project Nr 5 – Tech Store E-commerce Project

REACT HOOKS PROJECTS

Project Nr 6 – Budget Calculator Project

Project Nr 7 – CocktailDB API Project

Project Nr 8 – Vintage Tech Project

REDUX PROJECTS

Project Nr 9 – Counter/Tutorial Project

What you’ll learn

  • Make Great Projects Using React
Table of Contents

Introduction and Setup
1 What is React
2 Video Blur Fix
3 Course Review
4 Course Structure
5 Course Requirements
6 Javascript ES6 Module
7 Dev Environment Setup
8 Text Editor Setup

Install create-react-app
9 Command Line Basics
10 NPM Basics
11 What is Create-react-app, Babel, Webpack
12 Install Create-react-app
13 Create-react-app Folder Structure

React Basics Tutorial
14 First React Component
15 More Props and Destructuring
16 Children Props
17 Resource Download
18 First React Component In Detail
19 React JSX Rules
20 Nested Components and ES6
21 Mini Book Project
22 CSS in React
23 Javascript in JSX
24 Props

Person List Project
25 Intro
26 Main Project
27 Project Files

React Basics Tutorial Continued
28 Import and Export (ES6 Modules)
29 Passing Methods to Children Components to Work with State
30 Conditionals in JSX
31 Class Based Components in React
32 Functional VS Class Based Components
33 State
34 Alternative State Syntax
35 Book Mini Project
36 Events
37 this.setState
38 Passing Methods and Prop Drilling

City Tours Project
39 Intro
40 Tour Component Styling
41 Tour Info Toggle
42 Tour Component Delete
43 Deploy on Netlify with Drag and Drop
44 Deploy on Netlify with Continuous Deployment (Github, Git)
45 Font Awesome Update
46 Install and Setup
47 Font Awesome Update!
48 Navbar Component Logic
49 Navbar Component SASS
50 Main Project Structure
51 TourList Component
52 Tour Component Logic

React Basics Tutorial Continued
53 PropTypes
54 isRequired and defaultProps
55 PropTypes Object Shape
56 Controlled Inputs and Form Submission
57 Controlled Inputs Use Case
58 Uncontrolled Inputs with ref
59 React Fragment and this.setState() Asynchronous

Todo List Project
60 Project Intro
61 Todo List Component
62 Todo Item Component
63 Clear List and Delete Method
64 Edit Method
65 Finished Application
66 Font Awesome Update!
67 Setup
68 Font Awesome Update!
69 Bootstrap and Folder Structure
70 Github and Netlify Pipeline
71 App Component
72 Input Component
73 Handle Change and HandleSubmit

Beach Resort Project
74 Project Intro
75 Services Section
76 Local Data
77 Context Api Setup
78 Format Data
79 Loading Component Setup
80 Featured Rooms Component
81 Room Component
82 GetRoom Function
83 Single Room Setup
84 Single Room Hero
85 Setup Files and CSS
86 Styled-Hero
87 Single Room Complete
88 Room Container
89 Room List
90 Room Filter Setup
91 Type Filter
92 Capacity Filter
93 Price Filter
94 Size-Checkbox Filter
95 Contentful Interface
96 Scaffold React Application
97 Content Model
98 Content
99 Consume Content
100 Deploy On Netlify
101 Project Setup
102 Page Setup
103 Router Setup
104 Navbar Component
105 Hero Component
106 Banner Component

OPTIONAL PROJECT!
107 OPTIONAL PROJECT

Tech Store
108 Project Intro
109 Context API Intro
110 Context API Setup
111 Navbar Context API
112 Navbar Component
113 Sidebar Component
114 SideCart Component
115 Hero Component
116 Main Link Class
117 Default Page
118 About Page and Title Component
119 Setup and Installs
120 Contact Page
121 Formspree
122 Footer
123 Home Page Services Section
124 Products Data Intro
125 Setup State in Context
126 SetProducts
127 Image Url Fix
128 Featured Products Section
129 Product Component
130 Google Fonts, CSS Variables and App.css
131 All Products Section
132 AddToCart Method
133 AddTotals Method
134 SyncStorage Method
135 SetSingle Product Method
136 SetSingleProduct Page
137 SideCart Component
138 Cart Page Method Placeholders
139 CartPage Component Setup
140 CartPage Setup
141 Github – Netlify Pipeline
142 Cart Columns Component
143 Cart Totals Component
144 Cart List Component
145 Cart Item Component
146 Increase Method Logic
147 Remove Item Logic
148 Clear Cart and Decrease Method Logic
149 Filter Products Context Setup
150 Filter Products Product Component Setup
151 Product Filter Component
152 React-Icons Intro
153 Select Input Logic
154 Handle Change Method Logic
155 Sort Data Method Logic
156 Finished Project Before Adding Contentful
157 Contentful Intro
158 Contentful Interface
159 Setting Up Content Model
160 Adding Content
161 Retrieving Content
162 Setting Up Environment Variables and Netlify Build Variables
163 Styled-Components Intro
164 Image Fix
165 Paypal Button Setup
166 React Router Netlify Fix
167 Finished Project
168 Folder and Page Structure
169 React Router Setup
170 Navbar-Sidebar-Sidecart-Footer

React Hooks
171 Intro

React Hooks Budget Calculator
172 Intro
173 Expense Form
174 Controlled Inputs
175 Handle Submit Function
176 Alert Component
177 Clear Expenses
178 Delete Single Item
179 Edit Single Item
180 localStorage API
181 useEffect
182 Project Setup Files
183 Bootstrap Application
184 Folder Structure
185 Initial List
186 UseState Setup
187 App Component Return
188 Expense List
189 Expense Item

CocktailDB Project
190 Intro
191 About Page
192 Error Page
193 Home Page Setup
194 UseEffect and API Setup
195 UseEffect Second Argument
196 GetCocktails
197 CocktailList Component
198 Cocktail Component
199 Single Cocktail HTTP Request
200 Single Cocktail JSX
201 Starter Project
202 Search Form Component
203 Complete Application
204 Starter Project
205 Folder Structure
206 React Router Dom Install and Basic Setup
207 First Pages
208 Error Page
209 Single Cocktail Setup – Url Parameters
210 Navbar

Vintage Tech Project
211 Intro
212 Error Page
213 About Page
214 Hero Component
215 Context API Intro
216 Product Context Setup
217 Setting Values using useState
218 Url Value
219 Axios – Url – Response
220 UseEffect Setup
221 UseEffect Second Argument
222 Vintage Tech Intro
223 Loading Component
224 Product List and Product
225 Featured Products
226 Single Product
227 Cart Context Setup
228 Empty Cart
229 Cart Page
230 Single Cart Item
231 Calculate Cart Total and Cart Items
232 Remove Item
233 Starter Application
234 Increase Amount
235 Decrease Amount
236 AddToCart and ClearCart
237 localStorage
238 CartLink
239 Info
240 Strapi Install
241 Strapi Basics
242 Content Type
243 Add Products
244 Folder Structure
245 API Access
246 Image Problem
247 Local Image Fix
248 Claudinary Image Fix
249 CartItem Image Fix
250 Login Page Setup
251 Login Page JSX
252 Login Page Initial Functionality
253 Strapi Auth Info
254 Register User Function
255 Router Setup
256 Login User Function
257 User Context Setup
258 User Context Complete
259 Alert Functionality
260 Alert Component
261 Using Alert
262 Hide Submit
263 Restrict Access
264 Restrict Checkout Page
265 Checkout Page Setup
266 Basic Routes
267 Checkout Page JSX
268 Stripe Account and API Keys
269 Install react-stripe-elements
270 Integrate Stripe Elements
271 Get Stripe Token
272 Create Order Content Type
273 Submit Order Setup
274 Submit Order Complete
275 Strapi Backend
276 Deployment Info
277 Error Page
278 Heroku Sign Up
279 Heroku Deployment
280 Setup Production App
281 Deploy FrontEnd
282 Additional Features
283 Scroll Button Component
284 Scroll Functionality
285 Prop Types Intro
286 FlattenProducts Bug Fix
287 Product PropTypes
288 Product Details Page
289 General useReducer Intro
290 Quick useReducer Info
291 useReducer Setup
292 Remove Item
293 Rest of the Cart Functionality
294 Actions as Variables
295 useReducer Recap
296 Header

Redux
297 Intro
298 Rest of the Actions
299 Separate Logic
300 Connect To Redux
301 Access Dispatch
302 Mutation Example
303 mapDispatchToProps
304 Install Redux DevTools
305 Multiple Reducers Info
306 Setup Multiple Reducers
307 Modal Component
308 Quick Redux Info
309 Modal Reducer
310 Connect Modal to Redux
311 Action Creators
312 Redux Thunk Install and Setup
313 Products Reducer
314 Products Component
315 Complete Project
316 Starter App
317 App Intro
318 Starter Application Folder Structure
319 Create App using only React
320 Redux – Initial Setup
321 createStore and reducer
322 First Action

Javascript ES6
323 VAR, LET, CONST
324 Array Destructuring
325 Swap Variables
326 Object Destructuring
327 Destructuring Function Parameters
328 New String Methods
329 for-of Loop
330 Spread Operator Basics
331 Spread Operators With Objects
332 Spread Operator With DOM Elements
333 Spread Operator with Function Arguments
334 Function Scoped VS Block Scoped
335 REST Operator
336 Array.of
337 Array.from – Strings and Function Arguments Objects
338 Array.from – NodeList
339 Template Strings – String Concatenation
340 Template Strings – Dynamic HTML
341 Tagged Template Literals
342 Arrow Functions
343 Arrow Functions – this Object Example
344 Arrow Function – this Select Elements
345 Default Parameters and Hoisting Gotchas