The React practice course, learn by building projects.

43h 45m 48s
English
Paid
April 8, 2024

Including three full practice project, a landing page, a Firebase project and a fullstack with Mongo DB and Node. Do you want to practice your React coding or just to learn it by creating webpages ?. This is the course for you. Because sometimes the best way to learn its by practicing and because most of the courses teach you the just the basics and give you a todo app, I wanted to create something different. We will create Three real life projects,  so we can practice our react coding in a more real environment.

More

If you don’t know much of React, no worries. We will start simple with a static landing page , then we will go to a much more compete project with authentication and DB and last but not least we will create am e-commerce style project with user cart, PayPal, not only that we will create our own server to handle all the requests.

If you know nothing about React, don’t worry, I added a bonus section with a tiny React course so you can understand the basics and how react works. So you can start from there and then go to the practice projects.

To sum everything up, this what we will be creating in this course:

Project one ”The venue”:

  • How to create a project with React CLI

  • Creation of components

  • Using third party libraries

  • Creating transitions on reveal and carrousel.

  • Using parts of Material UI to make our app better.

  • Deployment of a static webpages to SURGE.

Project two “M City”:

  • Creating of routes to navigate our project

  • More complex animations and transitions

  • Rendering components using data from a server

  • We will use authentication and create an Admin endpoint

  • Firebase uploads and storage

  • Add a database on a server to work with

  • Deployment of the project to Firebase

Project three “Waves”:

  • E-Commerce style application

  • Creation of dynamic routes

  • Using REDUX as store.

  • Authentication, user dashboard and admin dashboard

  • Create a server with Node JS and express

  • Add database to our Project with Mongo DB

  • Creating different routes to process the requests

  • Add cart items to user account

  • Complete checkout with Paypal

  • Deployment to Heroku

And as a bonus just like tiny React course, you will get additional React components to the projects.

Requirements:
  • A little bit of ES5 and ES6.
Who this course is for:
  • From beginners to intermediate.
What you'll learn:
  • Gain more knowledge to build better or more complex websites.

Watch Online The React practice course, learn by building projects.

Join premium to watch
Go to premium
# Title Duration
1 Introduction 01:53
2 First Project Overview 01:21
3 Second Project overview 02:08
4 Third Project overview 02:33
5 Installing NODE Js - MAC 02:14
6 Installing NODE Js - WINDOWS 02:42
7 Project setting up 05:48
8 Creating the Header 11:43
9 Header sidedrawer 16:03
10 Finishing the Header 06:37
11 Slider section 12:34
12 Adding a countdown 08:00
13 Finishing countdown 09:45
14 Venue NFO component 09:59
15 Highlight section 15:53
16 Button reusable component 08:08
17 Adding prices 14:35
18 Footer and Location section 07:43
19 Adding a Scroll To 10:21
20 Deployment to Surge 05:56
21 Project setting up 08:04
22 Adding a Header 13:57
23 Finishing Header, adding Footer 13:03
24 Home: featured Animation 11:53
25 Home: featured Animation...continued 17:45
26 Home: Finishing featured Animation 17:02
27 Tags RC 13:06
28 Adding Firebase 13:28
29 Home: Adding the Match blocks component 14:54
30 Home: Finishing the Match blocks component 12:49
31 Home: Meet the players component 11:43
32 Home: Finishing player card 12:05
33 Home: Finishing player card...continued 07:08
34 Home: Enroll reveal component 07:23
35 Home: Enroll, starting with form fields 16:43
36 Home: Enroll and form fields 2 18:13
37 Home: Enroll and form fields 3 14:58
38 Home: Finishing Enroll and form fields 15:18
39 Auth: Login component 11:53
40 Auth: Finishing Login 06:35
41 Auth: Creating a Dashboard 16:50
42 Auth: Private Routes 16:39
43 Auth: Public Routes 08:51
44 Admin: Matches endpoint 18:45
45 Admin: Edit Match - creating the form 14:11
46 Admin: Edit Match - creating the form 2 19:17
47 Admin: Adding functions 18:39
48 Admin: Finishing Edit matches 10:38
49 Admin: Add Match 05:46
50 Admin: Players Endpoint 09:38
51 Admin: Add players - creating the form 17:43
52 Admin: Players fileuploader 20:23
53 Admin: Players fileuploader ..continued 14:06
54 Admin: Finshing add players 14:15
55 Admin: Edit player 15:41
56 Creating The Team component 23:36
57 The matches: Creating the component 18:19
58 The matches: Adding transitions 16:43
59 The matches: Filters 14:45
60 The matches: Finishing filters 04:51
61 Adding a 404 PAGE 04:59
62 DEPLOY to production. 10:52
63 Installing Mongo DB - MAC 07:28
64 Installing Mongo DB - WINDOWS 08:25
65 installing Robo 3T - MAC 03:08
66 Installing Robo 3T - WINDOWS 03:11
67 SERVER: initial setup 10:59
68 SERVER: .env and middleware 07:55
69 SERVER: User model 08:51
70 SERVER: Registering users 08:33
71 SERVER: Hashing passwords 09:54
72 SERVER: Login users and creating tokens 22:11
73 SERVER: Auth route 17:48
74 SERVER: Logout 05:03
75 SERVER: Brand model and routes 15:58
76 SERVER: Woods model and routes 08:36
77 SERVER:Adding products 19:56
78 SERVER: Getting products by ID 12:36
79 SERVER: Getting product by order. 10:04
80 CLIENT: Starting with the client 13:37
81 CLIENT: Header anf footer 19:22
82 CLIENT: Setting Redux up. 13:01
83 CLIENT: Adding a Register login component 13:07
84 CLIENT:Creating the login 14:00
85 CLIENT:Creating the login 2 20:10
86 CLIENT:Creating the login 3 10:10
87 CLIENT: Finishing the login 14:44
88 CLIENT: Creating the Register 15:20
89 CLIENT: Finishing register 16:18
90 CLIENT: Creating the dashoard 12:50
91 CLIENT: Preventing routes 25:33
92 CLIENT: Header links 16:53
93 CLIENT: Finishing Header links 13:48
94 CLIENT:Home slider promotions 18:54
95 CLIENT:Home cards 13:37
96 CLIENT: Home cards 2 17:01
97 CLIENT: Finishing home cards 12:39
98 CLIENT: Startting the Shop component 17:52
99 CLIENT: Shop checkboxes 20:20
100 CLIENT: Finishing checkboxes 24:15
101 CLIENT: Adding Radio options 22:03
102 SERVER: Crating the shop route 21:16
103 SERVER: Finishing the shop route 07:07
104 CLIENT: Showing Shop cards 11:09
105 CLIENT: Shop loadmore button 11:57
106 CLIENT: Shop grids 06:29
107 ADMIN: Add products form 15:18
108 ADMIN: Add products form 2 09:13
109 ADMIN: Add products form 3 18:50
110 ADMIN: Finishing the Add products form 21:19
111 ADMIN: Adding the File Upload 19:37
112 ADMIN: Adding the File Upload 2 19:21
113 ADMIN: Finishing the File Upload 14:31
114 ADMIN: Manage Brands component 22:26
115 ADMIN: Finish Manage Brands. 15:38
116 CLIENT: Adding the Product Detail component 22:09
117 CLIENT: Product Info detail 11:35
118 CLIENT: Product detail, images section 18:00
119 CLIENT: Finishing the detail, adding Lightbox 16:24
120 CLIENT: Quick fix to Prod detail 02:35
121 CLIENT: Adding items to Cart 22:36
122 CLIENT: Finish the add to cart 12:44
123 ADMIN: Cart component 20:15
124 ADMIN: Creating the cart blocks. 13:51
125 ADMIN: Calculating the total. 10:56
126 ADMIN: Removing cart items. 19:35
127 ADMIN: Adding the Paypal btn 21:12
128 ADMIN: Finishing Paypal. 10:44
129 ADMIN: Creating the SUCCESS BUY route 17:01
130 ADMIN: Finishing the SUCCESS BUY route 16:22
131 ADMIN: Creating the Action and dispatching 12:40
132 ADMIN: User History 06:58
133 ADMIN: Updating personal info 15:44
134 ADMIN: Finishing Update personal info 12:58
135 ADMIN: Creating the Site Info 16:10
136 ADMIN: Getting the Site Info 17:07
137 ADMIN: Finishing Site info 14:42
138 GIT and GITHUB 16:54
139 Adding SSH keys - MAC USERS 07:17
140 Adding SSH keys - WINDOWS USERS 07:16
141 Adding Heroku to the mix 05:11
142 Deploying the project 15:45
143 Deploying the project 2 23:35
144 EMAILS: Using Nodemailer 11:36
145 EMAILS: Sending a welcome Email 16:32
146 NOT FOUND: Adding not found route. 03:44
147 ORDER ID: Adding custom PO 12:10
148 ORDER ID: Sending email with PO 13:39
149 FILE UPLOAD: Uploading files 19:37
150 FILE UPLOAD: Uploading files 2 13:26
151 FILE DOWNLOAD: Downloading files 04:05
152 PASSWORD: Adding forgot password 17:03
153 PASSWORD: Adding forgot password 2 14:38
154 PASSWORD: Adding forgot password 3 15:40
155 PASSWORD: Finishing forgot password 08:31
156 Boilerplate 05:27
157 Bundle and structure 06:51
158 Rendering 09:39
159 JSX 06:52
160 Structure and exporting 09:46
161 Dynamic data 04:50
162 Functional and class based components 07:47
163 Adding some style 10:22
164 Events 13:39
165 A little bit more of classes 07:13
166 React state 11:00
167 Using props 10:14
168 Using props 2 04:41
169 Using props 3 06:49
170 Children props 04:16
171 More on styles 15:37
172 Using CSS modules 13:51
173 Filtering state 17:45
174 Routes: installing it 06:26
175 Routes: Adding routes 13:47
176 Routes: Linking 08:28
177 Routes: Params and URL's 12:26
178 Routes: Switch 04:44
179 Routes: Redirections 08:03
180 React Lifecycles 07:06
181 React Lifecycles ..continued 13:34
182 Conditional rendering 07:41
183 Pure components 05:10
184 Returning arrays 06:26
185 HOC's 10:45
186 HOC's ...continued 09:54
187 React transitions 16:26
188 React transitions 2 09:29
189 CSS transitions 07:42
190 Transition group 10:14
191 Proptypes 18:19
192 Proptypes 2 03:59
193 Refs 05:17
194 Controlled and uncontrolled 18:30
195 Form template 18:30
196 Form template 2 14:56
197 Form template 3 15:50
198 Adding textarea and select 11:45
199 Validation 15:59
200 Validation 2 14:21
201 REDUX: Installing and connecting 12:27
202 REDUX: Reducers 17:34
203 REDUX: Action creators 15:47
204 REDUX: Dispatch 10:06
205 REDUX: Containers 05:19
206 REDUX PRACTICE: Intro and setup 11:44
207 REDUX PRACTICE: Adding redux to home 17:03
208 REDUX PRACTICE: Finishing home and adding the artist view 19:39
209 REDUX PRACTICE: Fixing issues 05:02

Similar courses to The React practice course, learn by building projects.

Full-Stack Web Developer Bootcamp with Real Projects

Full-Stack Web Developer Bootcamp with Real Projectsudemy

Duration 22 hours 11 minutes 13 seconds
Python/Django + React QR Digital Menu Builder

Python/Django + React QR Digital Menu BuilderPythonYoga

Duration 10 hours 49 minutes 22 seconds
MERN Invoice Web App with Docker,NGINX and ReduxToolkit
React and NestJS: A Practical Guide with Docker

React and NestJS: A Practical Guide with Dockerudemy

Duration 6 hours 54 minutes 20 seconds
Build Product Hunt with ReactJS and Firebase
MERN 2024 Edition - MongoDB, Express, React and NodeJS
Node.js for Beginners - Become a NodeJs Developer + Project
The complete React Fullstack course ( 2021 edition )

The complete React Fullstack course ( 2021 edition )udemy

Duration 76 hours 58 minutes 6 seconds
Solidity & Ethereum in React (Next JS): The Complete Guide