The React practice course, learn by building projects.

43h 45m 48s
English
Paid

Course description

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.

Read more about the course

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

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 209 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing

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

0:00
/
#1: Introduction

All Course Lessons (209)

#Lesson TitleDurationAccess
1
Introduction Demo
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

Unlock unlimited learning

Get instant access to all 208 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

MobX In Depth With React(Hooks+TypeScript)

MobX In Depth With React(Hooks+TypeScript)

Sources: udemy
This is the most extensive course about MobX you will find online, After a few years of using MobX, I'm really passionate about it and really love it, I decided
2 hours 25 minutes 54 seconds
Electron From Scratch: Build Desktop Apps With JavaScript

Electron From Scratch: Build Desktop Apps With JavaScript

Sources: udemy, Brad Traversy
Create 3 useful desktop applications with web technologies using Electron. This is a hands on, project based course on learning how to build and package cross-platform desktop a...
5 hours 48 minutes 24 seconds
React Front To Back 2022

React Front To Back 2022

Sources: udemy, Brad Traversy
This course is for anyone that wants to learn React and also for React developers looking to build some projects and sharpen their skills. The first project (Feedback App) is st...
19 hours 57 minutes 45 seconds