React Formula - Learn Frontend Development
23h 47m 37s
English
Paid
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 React Formula - Learn Frontend Development
Join premium to watch
Go to premium
| # | Title | Duration |
|---|---|---|
| 1 | Course Welcome | 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 |
Similar courses to React Formula - Learn Frontend Development
React Testing Library and Jest: The Complete GuideudemyStephen Grider
Category: React.js
Duration 7 hours 40 minutes 24 seconds
Course
Building Large Scale Web Apps | A React Field GuideAddy OsmaniHassan Djirdeh
Category: React.js
Duration
Book
Learn React 19 with Epic React v2Kent C. Dodds
Category: TypeScript, React.js
Duration 26 hours 51 minutes 3 seconds
Course
Zero to Full Stack Heropapareact.com
Category: JavaScript, React.js, Others, CSS, Node.js, GraphQL, Firebase
Duration 101 hours 29 minutes 59 seconds
Course
FULL Authentication WITH REACT JS NEXT JS TYPESCRIPTudemy
Category: TypeScript, React.js, Next.js
Duration 6 hours 52 minutes 28 seconds
Course
React Router v5ui.dev (ex. Tyler McGinnis)
Category: React.js
Duration 3 hours 38 minutes 49 seconds
Course
Master Custom React Hooks with TypeScriptfullstack.io
Category: TypeScript, React.js
Duration 2 hours 21 minutes 3 seconds
Course
Complete guide to building an app with .Net Core and Reactudemy
Category: React.js, C Sharp (C#)
Duration 32 hours 10 minutes 45 seconds
Course
Django with React | An Ecommerce WebsiteBrad Traversy
Category: React.js
Duration 18 hours 6 minutes 7 seconds
Course
Crack the Frontend Interview with Reactzerotomastery.io
Category: React.js, Preparing for an interview
Duration 1 hour 6 minutes 53 seconds
Course