How to Create a Full Stack React App Online Training

Focused View

Shaun Wassell

15:15:52

76 View

1. Introduction.mp4

02:10

2. Map Out the App.mp4

10:41

3. Create Pages and Set Up Routes.mp4

11:40

4. Build the Notes Page and List.mp4

09:47

5. Build the Note Detail Page.mp4

16:13

6. Introduction.mp4

00:52

7. Store Note Data Inside A Context Provider.mp4

12:15

8. Add A Create Note Modal.mp4

11:02

9. Creating New Notes in Context.mp4

08:48

10. Deleting Notes in Context.mp4

08:51

11. Updating Notes in Context.mp4

05:23

12. Introduction.mp4

01:01

13. Add Styling to the App.mp4

22:20

14. Create A Reusable X Component.mp4

15:54

15. Create A Navigation Bar.mp4

05:17

16. Render Markdown in React - How to Create a Full Stack React App with the MERN Stack.mp4

03:16

17. Introduction.mp4

00:49

18. Full-Stack Project Setup.mp4

15:10

19. Create a Read Endpoint And Load Data From the Client-Side.mp4

14:24

20. Add a Create Endpoint And Make Requests From the Client-Side.mp4

06:44

21. Add Update And Delete Endpoints.mp4

09:57

22. Introduction.mp4

00:48

23. Add MongoDB to the Back-end.mp4

06:32

24. Convert Endpoints to Use MongoDB.mp4

09:24

25. Split Express Servers Into Multiple Files.mp4

09:20

26. Make MongoDB Available in Different Files.mp4

09:37

27. Rewrite Routes To Increase Performance.mp4

11:33

28. Introduction.mp4

00:52

29. Create Login and Create Account Forms.mp4

18:52

30. Add Login and Create Account Pages.mp4

11:14

31. Styling the Login and Create Account Pages.mp4

06:18

32. Add Firebase Auth to the Front-end.mp4

10:31

33. Introduction.mp4

00:52

34. Install and Set Up Firebase Admin.mp4

05:23

35. How Should We Organize Our Database.mp4

18:49

36. Convert Endpoints for Ownership.mp4

09:58

37. Data Ownership in Create and Delete Endpoints.mp4

13:45

38. Introduction.mp4

00:49

39. Subscribe to Auth State Changes.mp4

12:15

40. Protect Routes with Arbitrary Criteria.mp4

10:00

41. Create a useUser Hook.mp4

05:35

42. Include Users Tokens in Requests.mp4

18:07

43. Introduction.mp4

01:06

44. Protect Users Data from Unwanted Access.mp4

07:20

45. Prevent Users From Deleting Other Users Data.mp4

09:22

46. Prevent Unauthorized Data Modification.mp4

07:07

47. Add Protection to the Create Note Endpoint.mp4

03:54

48. Use Middleware to Reduce Repetition.mp4

13:41

49. Add More Middleware.mp4

11:56

50. Introduction.mp4

01:01

51. Data Segregation Demonstration.mp4

08:23

52. User Account Creation.mp4

18:24

53. Handle Login and Create Account Errors.mp4

17:57

54. Introduction.mp4

00:51

55. Create a Page for Editing Sharing Settings.mp4

16:14

56. Create a Shared Emails List.mp4

13:16

57. Basic Front-end Sharing Logic.mp4

16:21

58. Introduction.mp4

00:59

59. Email Verification Basics.mp4

07:08

60. Create a Please Verify Email Page.mp4

06:46

61. Refactor the Create Account Flow.mp4

12:13

62. Send Emails From A Node Server.mp4

18:38

63. Introduction.mp4

00:54

64. Create an Email Verification Landing Page.mp4

18:53

65. Create an Email Verification Server Route.mp4

07:39

66. Protect Server Routes from Unverified Users.mp4

14:12

67. Prevent Unverified Users from Logging In.mp4

13:01

68. Introduction.mp4

01:02

69. Create an EnableDisable Section.mp4

11:28

70. Create an Endpoint for Enabling Link Sharing.mp4

13:19

71. Create an Endpoint for Disabling Link Sharing.mp4

04:49

72. Load Link-Shared Notes from the Server.mp4

16:11

73. Introduction.mp4

01:27

74. Web-Socket Basics.mp4

08:14

75. Add Web-Sockets to Express.mp4

06:09

76. Add Web-Sockets to React.mp4

07:46

77. Send Data Through a Web-Socket.mp4

07:24

78. Convert Load Requests to Web-Sockets.mp4

15:18

79. Introduction.mp4

00:49

80. Create User Can Edit Note Middleware.mp4

10:16

81. Convert Express Middleware to Socket.io.mp4

09:17

82. Middleware for Individual Events.mp4

08:19

83. Handle Socket Errors on the Front-end.mp4

08:27

84. Create a Custom Hook for Web-Sockets.mp4

13:12

85. Introduction.mp4

01:19

86. Organize Web-Socket Logic Effectively.mp4

08:44

87. Define Event Handlers in Separate Files.mp4

14:41

88. Define Initial Connection Logic.mp4

05:42

89. Add Socket Middleware.mp4

17:11

90. Introduction.mp4

01:05

91. Keep Client Data In Sync.mp4

07:30

92. Prevent Infinite Socket Loops.mp4

05:51

93. Add Roles to Web-Socket Data.mp4

14:04

94. Use Web-Socket Rooms.mp4

08:46

95. Web-Socket Data Protection.mp4

09:16

96. Introduction.mp4

00:57

97. Multiple Web-Socket Connection Types.mp4

14:47

98. Handle New Web-Socket Connections.mp4

07:14

99. Loading Data Via Web-Sockets.mp4

08:54

100. Update Client-Side Data Immediately.mp4

16:00

Description

This intermediate React tutorial prepares software developers to develop an full-stack application in React that connects seamlessly with the rest of the MERN stack for optimal efficiency and stability.

Even if you haven't used it up to this point in your career, you've almost certainly heard of React. It's the flexible, easy, highly supported, free JavaScript library that makes building user interfaces incredibly simple. The fact that it's used by millions of developers only adds to its prestige and attractiveness.

More details

This course shows you not just how to develop a great app in React, but how to make sure it's built from the first step with the rest of the MERN stack in mind. When your app is finished it'll seamlessly connect with your database, server and web framework.

For anyone who manages their React training, this open source training can be used to onboard new software developers, curated into individual or team training plans, or as an open source reference resource.

Building a Full React App Tutorial: What You Need to Know

For any software developer looking to improve their proficiency with programming best practices, this open source course covers topics such as:

Adding a MongoDB database
Creating a backend with Node and Express
Creating custom hooks for web sockets
Creating and rendering React apps

Who Should Take Building a React App Training?

This React and MERN Stack tutorial is considered specialist-level open source training, which means it was designed for software developers. This React skills course is designed for software developers with three to five years of experience with programming best practices.

New or aspiring software developers. It's always a good idea for a new software developer to lean heavily into a particular stack, and someone getting started in app development could do a lot worse than the MERN stack. This course will show you how to write robust applications with great UIs that dovetail perfectly with MongoDB, Express.js and Node.js.

Experienced software developers. If you've been working in software development for a few years, you should take this course if you're considering getting more experience with other stacks. Maybe you've been a LAMP stacker for years or you've been focused on Ruby on Rails. This course can quickly show you the MERN ropes and get you started on your next stack.

User Reviews

Rating

average 0

Total votes0

Focused display

React

Node.Js

Full Stack Web Development

MongoDB

Shaun Wassell

Instructor's Courses

"I love seeing people go from earning peanuts to being able to comfortably take their families on multiple vacations — just because they were willing to learn something 'nerdy!'"

Shaun brings nearly 10 years of software development experience to his training. Prior to joining CBT Nuggets, he was a senior full-stack developer. His interest in technology started as a child because he wanted to create video games and his parents bought him GameMakerStudio. When Shaun isn’t creating training, he enjoys gardening, distance running, investing, and learning foreign languages.

Certifications: None

Areas of expertise: Web development, programming, data science

CBT Nuggets

View courses CBT Nuggets

CBT Nuggets is renowned for providing innovative training that's informative, meaningful, and engaging. We provide a variety of training, primarily in IT, project management, and office productivity topics. Our comprehensive library contains thousands of training videos ranging from Cisco networking to Microsoft Word. Whether you want to pass a certification exam, increase your skills, or simply learn new things, we've got you covered! All of our training is delivered through high-quality online streaming video. Subscribers can train 24 hours a day, seven days a week, from the convenience of a computer or mobile device. CBT Nuggets trainers are the rock stars of training, renowned for their expertise, industry-wide credibility, and engaging personalities. They enable CBT Nuggets to deliver accurate, up-to-date training, using a laid-back whiteboard presentation style. There are no scripts, EVER. Our trainers love to teach, and it shows! CEO and founder Dan Charbonneau was a Microsoft trainer when he began recording CBT Nuggets' very first training videos back in the 1990s. He wanted to help provide large organizations, small teams and individuals with comprehensive and budget-conscious training, and he realized it couldn't be done in a classroom. From the CBT Nuggets World Headquarters in Eugene, Oregon, Dan and his team promise each video will be informative, comprehensive, accurate, and fun to watch.