React Mega Course - Learn React and then build 6 projects

Focused View

Fast & Easy Programming

19:02:48

11 View

1. Introduction

1. Introduction.mp4

01:32

2.1 course files.zip

2. VS Code and Chrome extensions, course files and git repos.mp4

06:26

2. React for beginners

1. 01 Create react app with Vite.mp4

02:31

2. Clean up and add bootstrap.mp4

05:25

3. JSX.mp4

06:20

4. Functions are components.mp4

06:44

5. Extracting into separate components.mp4

03:28

6. Variables, inputs and inline styling.mp4

06:40

7. Props.mp4

07:19

8. Children.mp4

03:38

9. State.mp4

10:23

10. More efficient useState.mp4

02:42

11. Returning objects and spread in state.mp4

02:49

12. Looping in jsx.mp4

05:53

13. Add Customer.mp4

10:17

14. If and else if in jsx.mp4

02:45

15. useEffect.mp4

08:59

16. Routing ( adding components ).mp4

03:40

17. Routes and Links.mp4

06:30

18. useParams and useSearchParams.mp4

03:47

19. useNavigate and NavLink.mp4

03:12

20. redux toolkit and store setup.mp4

03:43

21. counterSlice and useSelector.mp4

04:32

22. Actions and useDispatch.mp4

03:18

23. useDispatch with payload.mp4

02:43

24. productSlice.mp4

03:27

25. ProductDetails.mp4

05:24

26. extraReducers.mp4

05:49

27. Custom actions.mp4

02:15

3. Project 1 Counter

1. Project intro.mp4

00:43

2. Initial project setup.mp4

01:55

3. App jsx and bootstrap theme.mp4

04:32

4. Separate into components.mp4

05:32

5. Card refactor.mp4

01:00

6. Count state and prop.mp4

02:45

7. Reset counter.mp4

01:04

8. Reusable Button component.mp4

03:52

9. Limit counter, change subtitle and reset icon.mp4

04:28

10. Spacebar to increment.mp4

04:42

4. Project 2 Wordlytics

1. Project intro.mp4

00:39

2. Initial project setup.mp4

01:37

3. App jsx and css.mp4

03:19

4. Separate into components.mp4

03:31

5. Controlled textarea and basic validation.mp4

04:20

6. Number of characters (lifting up the state).mp4

02:01

7. Other stats.mp4

03:03

8. class below 0 and constants.mp4

02:52

5. Project 3 TO-DO list

1. Project intro.mp4

01:15

2. Initial project setup.mp4

02:05

3. App jsx and css.mp4

09:48

4. Separate into components.mp4

04:33

5. initialItems and better organization.mp4

05:13

6. AddTask and useRef.mp4

08:06

7. handleAddItem in App.mp4

03:41

8. Handle other button events.mp4

05:32

9. Toggle checkbox.mp4

04:28

10. Delete item.mp4

01:48

11. Counter and no tasks message.mp4

02:33

12. Sorting items.mp4

09:20

13. localStorage.mp4

04:56

14. useMemo.mp4

02:58

15. Public path fix.mp4

00:34

6. Project 4 Customer-Management

1. Project intro.mp4

00:57

2. Initial project setup (customer-management).mp4

02:16

3. CustomerList.mp4

02:40

4. store and apiSlice.mp4

05:36

5. customersApiSlice.mp4

14:04

6. Routing.mp4

02:50

7. AddCustomer component.mp4

05:17

8. Outlet.mp4

03:13

9. AddCustomer functionality.mp4

05:06

10. How RTK Query caching works.mp4

07:27

11. Toast notifications.mp4

01:38

12. EditCustomer endpoints and routing.mp4

04:58

13. EditCustomer.mp4

08:36

14. Loading and throttling.mp4

02:51

15. Delete customer.mp4

06:29

16. Styling.mp4

03:05

7. Project 5 Easy Recipes

1. Project intro.mp4

06:00

2. Create React and Express apps.mp4

08:37

3. Concurrently.mp4

04:19

4. Mongoose, models and connect to DB.mp4

08:45

5. Seed data.mp4

11:06

6. Refactor DB Connection.mp4

03:13

7. dotenv.mp4

06:54

8. Recipes route.mp4

04:34

9. API CRUD routes.mp4

17:00

10. App JSX.mp4

03:17

11. Routing.mp4

02:06

12. store and apiSlice.mp4

03:12

13. List recipes.mp4

09:21

14. AddRecipe (slice and form).mp4

07:17

15. AddRecipe categories.mp4

04:45

16. AddRecipe functionality (no image upload).mp4

10:56

17. Upload image.mp4

12:29

18. Image preview.mp4

03:31

19. Loader component.mp4

06:45

20. ProductDetails.mp4

06:45

21. Search 1.mp4

06:20

22. searchSlice and Filters component.mp4

06:16

23. Search 2.mp4

02:35

24. Filter by category.mp4

09:44

25. Checkbox filter 1.mp4

04:32

26. Checkbox filter 2.mp4

09:28

27. User model and register route.mp4

07:04

28. Login route.mp4

04:21

29. JWT and Logout.mp4

06:24

30. Auth middleware.mp4

07:04

31. authSlice and usersApiSlice.mp4

03:36

32. PrivateRoute.mp4

02:58

33. Login.mp4

14:01

34. Logout.mp4

05:19

35. Register.mp4

11:29

36. Adding a wysiwig.mp4

04:02

37. Add user with recipe and use HTML Parser.mp4

07:06

38. Styling.mp4

08:49

39. Display author and difficulty and more styling.mp4

05:12

40. Add all recipes.mp4

07:51

8. Project 6 Shirts & Fruit ( CMS and E-Commerce )

1. Project intro.mp4

07:34

2. React express and concurrently.mp4

05:43

3. Connect to DB (shirtsandfruit).mp4

03:54

4. Models and seeding.mp4

11:33

5. Categories controller and get all route.mp4

03:34

6. Products CRUD routes.mp4

14:57

7. Pages CRUD routes.mp4

07:26

8. Header Footer and App Markup.mp4

05:01

9. Routing and store setup.mp4

06:22

10. Nav page links.mp4

05:42

11. Display page body.mp4

09:23

12. List categories.mp4

03:15

13. Products by category 1.mp4

04:53

14. Products by category 2.mp4

06:41

15. ProductDetails.mp4

04:18

16. User model and seed admin.mp4

07:13

17. Login form.mp4

08:31

18. Login form validation.mp4

09:32

19. Users controller and auth middleware.mp4

12:07

20. Login and Register components and slices.mp4

07:06

21. Log in and register.mp4

14:07

22. AdminHeader.mp4

06:15

23. Logout.mp4

04:09

24. AdminRoute.mp4

03:29

25. Admin Pages.mp4

04:48

26. Admin Pages Sorting 1.mp4

12:00

27. Admin Pages Sorting 2.mp4

08:54

28. Admin AddPage component.mp4

06:17

29. Admin AddPage wysiwig.mp4

09:04

30. Admin AddPage functionality.mp4

02:17

31. Admin EditPage.mp4

08:33

32. Delete page.mp4

01:37

33. Admin Products.mp4

08:31

34. AddProduct form.mp4

08:26

35. AddProduct validation.mp4

08:28

36. AddProduct image validation and preview.mp4

06:57

37. AddProduct.mp4

12:12

38. EditProduct.mp4

16:14

39. Modify seeder to create and remove gallery folders.mp4

05:52

40. MultipleImageUpload validation.mp4

11:10

41. MultipleImageUpload upload images.mp4

15:29

42. MultipleImageUpload List images.mp4

07:57

43. MultipleImageUpload Delete gallery image.mp4

07:46

44. Delete product.mp4

10:47

45. Lock down routes and clear admin cookie.mp4

12:51

46. ProductGallery.mp4

13:33

47. cartSlice and component.mp4

04:21

48. Add to cart.mp4

08:48

49. SmallCart improvement.mp4

03:29

50. Cart 1.mp4

10:32

51. Cart 2.mp4

14:37

52. Log in to checkout.mp4

04:55

53. Login and Register username focus.mp4

04:04

54. Order model and route and OrderPlaced.mp4

06:50

55. Place order.mp4

07:45

56. Profile and PrivateRoute and html parser.mp4

04:37

57. Profile 1.mp4

14:35

58. Rating.mp4

05:31

59. Rating model and routes.mp4

10:14

60. ratings slice and UserRating.mp4

12:18

61. refetch and caching recap.mp4

08:17

62. Pagination.mp4

08:14

63. AI Pagination component.mp4

11:52

64. Bug fixing.mp4

02:46

65. Adding proper data.mp4

07:11

66. Styling.mp4

06:22

Description

Master React and Redux with RTK Query from scratch with one course. Build 6 projects and become a React developer.

What You'll Learn?

Learn React from scratch
Redux and RTK Query
Use free AI tools to boost productivity
Express
MongoDB
Build projects
Become able to build your own React projects and APIs

Who is this for?

Anyone with some JavaScript and general web dev skills looking to master React and Redux

What You Need to Know?

JavaScript

Basic web-development skills

More details

Description
Master React with Redux with this one course. You don't need anything else. As simple as that.

Learn how to use React properly and much more than that. Use Vite to create React projects and also learn how to build your own APIs to be consumed by your React apps using Node, Express, MongoDB and Mongoose.

Don't just learn bits and pieces, learn React with Redux and RTK Query properly from scratch and become an able React developer.

How is the course structured ?
IÂ will first teach you React with Redux from absolute scratch (you do not need any prior experience with react) and then will build 6 projects together that get increasingly more complex.

This is a very practical course where you will mostly learn by building actual projects.

What is exactly is covered in the course?

React
Redux
RTK Query
Routing
JSX
Vite
Props
Children
State
All relevant hooks (useParams, useSearchparams, useNavigate, useDispatch, useMemo, useRef etc.)
JSONÂ server
JSONÂ web tokens
File upload
Image gallery
Node
Express
MongoDB
Compass
Mongoose
Bootstrap and various bootstrap themes
and much more

Projects:

Counter - put everything you have learn in the React for beginners section of the course and create a fancy counter
Wordlytics - Use more of what you already know to create a great little app that gives info about text input
TO-DO list - Learn how to use checkboxes and select lists and create a TO-DO list that uses local storage to persists data
Customer-management - Get started with RTK Query and create a basic CRUD application that uses JSON server for the backend (lightweight database)
Easy Recipes - With all the knowledge gained thus far it is time for a more serious project. In this one we will create both the React frontend and Node/Express/MongoDB backend APIÂ to create an app that can add and filter through recipes and user registration and authorization using JSONÂ web tokens
CMS and E-Commerce - the biggest project in the course, create a full CMS and E-Commerce web app with users and an admin area, again using Node/Express/MongoDB for the API. This project covers it all and much more and will enable you to basically create any type of web app with React.
I have put a lot into this course to really make it the only course you need to master React, don't miss out and enroll now risk free!
Who this course is for:
Anyone with some JavaScript and general web dev skills looking to master React and Redux

User Reviews

Rating

average 0

Total votes0

Focused display

React

Fast & Easy Programming

Instructor's Courses

Fast & Easy Programming offers practical, concise and to the point video courses that cover a wide range of programming topics, mostly web development related.Learn practical programming skills with our thorough yet concise video teaching. In our educational videos we strive to teach as much as possible in the shortest amount of time possible, but without sacrificing thorough explanations.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.