React Formula - Learn Frontend Development

23h 47m 37s
English
Paid

Course description

Learn to create modern interfaces using React, Tailwind CSS, and other tools. Most React tutorials are not designed for real beginners and do not help achieve true mastery. They assume that you are already familiar with frontend development and offer only a few random projects. But what if you are a complete beginner? React Formula offers you the chance to start with the basics and gradually deepen your understanding so that nothing is overlooked. By the end of the course, you will confidently create your own React applications and possess the skills needed for frontend development work.

Watch Online

This is a demo lesson (10:00 remaining)

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

View Pricing

Watch Online React Formula - Learn Frontend Development

0:00
/
#1: Course Welcome

All Course Lessons (228)

#Lesson TitleDurationAccess
1
Course Welcome Demo
00:42
2
Why Learn React?
02:45
3
Meet the Instructor
02:04
4
Effective Learning
02:58
5
Workspace Tour
04:46
6
Your First App
05:30
7
Rendering Components
07:55
8
Passing Props
10:00
9
Passing Props II
08:48
10
Passing Props III
08:26
11
Alvin's Favorite Keybindings
06:54
12
Alvin's Favorite Keybindings 2
07:18
13
Intro to Tailwind CSS Lecture
04:37
14
Tailwind CSS Basics
10:16
15
Padding and Margin Lecture
03:26
16
Button Style Exercise
11:10
17
No Dynamic Class Names
05:24
18
Button Component Exercise
09:42
19
Flexbox Lecture
05:06
20
Flex Exercise
04:48
21
Flex Col Lecture
02:52
22
Flex Exercise II
04:05
23
Analyzing Layouts Lecture
05:30
24
Tailwind Documentation
04:14
25
Analyzing Layouts Exercise 1
10:51
26
Analyzing Layouts Exercise 2
09:23
27
Analyzing Layouts Exercise 3
06:02
28
Search Page Design 1
00:55
29
Search Page Design 2
09:33
30
Search Page Design 3
10:54
31
Search Page Design 4
05:36
32
Events and State Lecture
07:16
33
Click Event Exercise 1
00:39
34
Click Event Exercise 2
02:53
35
Click Event Exercise 3
11:27
36
Conditional Rendering Exercise 1
00:53
37
Conditional Rendering Exercise 2
10:46
38
Conditional Rendering Exercise 3
03:42
39
Conditional Rendering Exercise 4
02:05
40
Counter 1
00:37
41
Counter 2
04:45
42
Counter 3
04:39
43
Light Switch 1
00:44
44
Light Switch 2
05:35
45
Light Switch 3
12:39
46
Image Carousel 1
00:55
47
Image Carousel 2
09:52
48
Image Carousel 3
08:36
49
Cat Carousel 1
00:49
50
Cat Carousel 2
14:24
51
Cat Carousel 3
04:34
52
Cat Carousel 4
04:32
53
More State Welcome
00:48
54
Stacker 1
00:33
55
Stacker 2
04:08
56
Stacker 3
08:25
57
Checkered Grid 1
00:36
58
Checkered Grid 2
11:18
59
Checkered Grid 3
04:14
60
Centered Responsive Lecture
05:39
61
Simple Dark Mode 1
00:59
62
Simple Dark Mode 2
09:27
63
Simple Dark Mode 3
09:08
64
Modal 1
00:38
65
Modal 2
06:11
66
Modal 3
11:21
67
Playing Card 1
00:39
68
Playing Card 2
14:10
69
Playing Card 3
06:09
70
Map Lecture
06:54
71
Map Exercise 1
00:43
72
Map Exercise 2
08:47
73
Song List 1
00:37
74
Song List 2
14:00
75
Property Listings 1
00:57
76
Property Listings 2
10:43
77
Testimonial Carousel 1
00:47
78
Testimonial Carousel 2
13:03
79
Testimonial Carousel 3
05:57
80
Testimonial Carousel 4
05:14
81
Testimonial Carousel 5
06:50
82
Pagination 1
01:00
83
Pagination 2
10:28
84
Pagination 3
11:58
85
Munch Central 1
00:29
86
Munch Central 2
10:54
87
Furniture Pagination 1
00:46
88
Furniture Pagination 2
11:04
89
Inputs and Forms Lecture
04:00
90
Text Input Exercise 1
00:28
91
Text Input Exercise 2
08:51
92
Sign In Form 1
00:35
93
Sign In Form 2
11:19
94
Sign In Form 3
05:17
95
Word Filter 1
00:49
96
Word Filter 2
14:01
97
Message Project 1
00:40
98
Message Project 2
04:30
99
Message Project 3
13:34
100
Checkbox Input Exercise 1
00:31
101
Checkbox Input Exercise 2
10:25
102
Number Input Exercise 1
00:58
103
Number Input Exercise 2
10:07
104
Select Exercise 1
00:48
105
Select Exercise 2
09:05
106
Cat Directory 1
01:07
107
Cat Directory 2
11:26
108
Cat Directory 3
06:07
109
Cat Directory 4
02:38
110
Integrating with Backends
04:43
111
Using Fetch 1
00:52
112
Using Fetch 2
02:53
113
Using Fetch 3
11:44
114
Random Joke 1
00:50
115
Random Joke 2
08:35
116
Random Joke 3
07:44
117
Use Effect Lecture
04:30
118
Use Effect Exercise 1
00:50
119
Use Effect Exercise 2
03:02
120
Teammates Project 1
00:59
121
Teammates Project 2
14:35
122
Loading Spinner Exercise 1
00:47
123
Loading Spinner Exercise 2
05:06
124
Stocks Project 1
00:52
125
Stocks Project 2
06:53
126
Stocks Project 3
12:54
127
Async Await Exercise 1
00:25
128
Async Await Exercise 2
04:19
129
Weather Forecast 1
00:51
130
Weather Forecast 2
08:27
131
Weather Forecast 3
03:47
132
Error Handling 1
00:40
133
Error Handling 2
11:48
134
States Project 1
00:43
135
States Project 2
10:12
136
States Project 3
03:25
137
CRUD Welcome
03:03
138
Message Board 1
00:48
139
Message Board 2
05:30
140
Message Board 3
08:27
141
Deleting Furni 1
00:41
142
Deleting Furni 2
03:01
143
Deleting Furni 3
05:56
144
Deleting Furni 4
04:45
145
Updating Furni 1
00:58
146
Updating Furni 2
06:53
147
Updating Furni 3
05:46
148
Todo List Part 1 1
00:39
149
Todo List Part 1 2
12:24
150
Todo List Part 1 3
09:14
151
Todo List Part 2 1
00:46
152
Todo List Part 2 2
05:23
153
Todo List Part 2 3
15:08
154
React Router Welcome
01:17
155
Frontend Routing 1
01:25
156
Frontend Routing 2
04:28
157
Frontend Routing 3
08:56
158
Frontend Routing II 1
01:04
159
Frontend Routing II 2
10:18
160
Frontend Routing II 3
13:41
161
Refs Project 1
01:12
162
Refs Project 2
06:42
163
Refs Project 3
02:28
164
Refs Project 4
02:25
165
Intro to React Context 1
00:39
166
Intro to React Context 2
14:05
167
Theme Context 1
01:11
168
Theme Context 2
10:58
169
Use Callback 1
00:33
170
Use Callback 2
04:48
171
Use Callback 3
03:17
172
Applying Use Callback 1
00:15
173
Applying Use Callback 2
05:40
174
Use State Function Default Lecture
06:17
175
Use State Functional Setter Lecture
03:43
176
Use Effect Clean Up 1
00:19
177
Use Effect Clean Up 2
06:08
178
Responsive Design Welcome
01:03
179
Local Environment Setup
04:25
180
Screen Size Breakpoints 1
01:12
181
Screen Size Breakpoints 2
09:40
182
Screen Size Breakpoints 3
10:48
183
Mobile Responsive Design 1
01:28
184
Mobile Responsive Design 2
08:55
185
Mobile Responsive Design 3
15:00
186
Mobile Responsive Design 4
09:28
187
Mobile Responsive Design 5
10:51
188
Mobile Responsive Design 6
11:49
189
Capstone Project Welcome
03:12
190
Getting Started 1
00:56
191
Getting Started 2
11:50
192
Creating the AuthForm 1
01:05
193
Creating the AuthForm 2
19:48
194
Designing the Sign In 1
01:20
195
Designing the Sign In 2
13:31
196
API Integration
13:28
197
Sign Up Feature 1
01:30
198
Sign Up Feature 2
22:20
199
Improving Imports
06:19
200
Sign In Feature 1
01:31
201
Sign In Feature 2
18:18
202
Managing the Session Token
21:06
203
Basic Navbar 1
00:54
204
Basic Navbar 2
16:59
205
Sign Out Button 1
00:58
206
Sign Out Button 2
10:34
207
Sign Out Button 3
10:34
208
Fetching Plants 1
00:48
209
Fetching Plants 2
07:25
210
Plant List Page Design 1
00:51
211
Plant List Page Design 2
06:01
212
Plant List Page Design 3
11:26
213
Plant List Page Design 4
14:14
214
Plant Show Page Design 1
00:55
215
Plant Show Page Design 2
21:54
216
Pot Color Purchase Option 1
00:34
217
Pot Color Purchase Option 2
21:21
218
Adding to the Cart 1
00:34
219
Adding to the Cart 2
15:28
220
Cart Modal 1
00:46
221
Cart Modal 2
27:13
222
Cart Item Removal 1
01:00
223
Cart Item Removal 2
22:03
224
Mobile Menu 1
01:04
225
Mobile Menu 2
23:08
226
Finishing Touches 1
00:34
227
Finishing Touches 2
17:24
228
Congratulations
00:43

Unlock unlimited learning

Get instant access to all 227 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

React Query: Server State Management in React

React Query: Server State Management in React

Sources: udemy
React Query has become the go-to solution for server state management in React apps, and for good reason! This smart, comprehensive solution makes it easy to ke
7 hours 39 minutes 49 seconds
Data fetching with React Server Components

Data fetching with React Server Components

Sources: Build UI
Since its release 10 years ago, React's core APIs have remained surprisingly stable. The original component boundary that supports state and lifecycle methods still works to thi...
1 hour 15 minutes 56 seconds
Fullstack React with Typescript

Fullstack React with Typescript

Sources: fullstack.io
Fullstack React with TypeScript is the complete guide to using TypeScript with React. Learn TypeScript patterns with React additional ecosystem advice (testing, redux, SSR) by b...
10 hours 16 minutes 46 seconds
Django with React | An Ecommerce Website

Django with React | An Ecommerce Website

Sources: Brad Traversy
Build an eCommerce platform from the ground up with React, Redux, Django & Postgres. In this course, we will build a completely customized eCommerce / shopping cart application ...
18 hours 6 minutes 7 seconds
The interactive way to master modern React - react.gg (FULL COURSE)

The interactive way to master modern React - react.gg (FULL COURSE)

Sources: ui.dev (ex. Tyler McGinnis)
OPTIMIZED FOR AHA! We’re obsessed with helping you reach your aha! moments. Our text sections help you master the “why” behind React concepts and include fun, i
7 hours 53 minutes 34 seconds