How to Create a Full Stack React App Online Training

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.

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.

Skill:
Build a Note-Sharing App: Create a Simple React Front-End
- 1. Overview
  1 min
- 2. Introduction
  2 mins
- 3. Map Out the App
  11 mins
- 4. Create Pages and Set Up Routes
  12 mins
- 5. Build the Notes Page and List
  10 mins
- 6. Build the Note Detail Page
  16 mins
- 7. Conclusion
  1 min
Skill:
Build a Note-Sharing App: Front-end Data Management
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Store Note Data Inside A Context Provider
  12 mins
- 4. Add A Create Note Modal
  11 mins
- 5. Creating New Notes in Context
  9 mins
- 6. Deleting Notes in Context
  9 mins
- 7. Conclusion
  1 min
Skill:
Build a Note-Sharing App: Add Styling
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Add Styling to the App
  22 mins
- 4. Create A Reusable "X" Component
  16 mins
- 5. Create A Navigation Bar
  5 mins
- 6. Render Markdown in React
  3 mins
- 7. Conclusion
  1 min
Skill:
Build a Note-Sharing App: Create a Back-end with Node and Express
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Full-Stack Project Setup
  15 mins
- 4. Create a "Read" Endpoint And Load Data From the Client-Side
  14 mins
- 5. Add a "Create" Endpoint And Make Requests From the Client-Side
  7 mins
- 6. Add "Update" And "Delete" Endpoints
  10 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add a Database
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Add MongoDB to the Back-end
  6 mins
- 4. Convert Endpoints to Use MongoDB
  9 mins
- 5. Split Express Servers Into Multiple Files
  9 mins
- 6. Make MongoDB Available in Different Files
  10 mins
- 7. Rewrite Routes To Increase Performance
  11 mins
- 8. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add User Authentication to the Front-end
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Create Login and Create Account Forms
  19 mins
- 4. Add Login and Create Account Pages
  11 mins
- 5. Styling the Login and Create Account Pages
  6 mins
- 6. Add Firebase Auth to the Front-end
  10 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add User Authentication to the Back-end
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Install and Set Up Firebase Admin
  5 mins
- 4. How Should We Organize Our Database?
  19 mins
- 5. Convert Endpoints for Ownership
  10 mins
- 6. Data Ownership in Create and Delete Endpoints
  14 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Front-end Refactoring
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Subscribe to Auth State Changes
  12 mins
- 4. Protect Routes with Arbitrary Criteria
  10 mins
- 5. Create a useUser Hook
  6 mins
- 6. Include Users' Tokens in Requests
  18 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Protect Users' Data
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Protect Users' Data from Unwanted Access
  7 mins
- 4. Prevent Users From Deleting Other Users' Data
  9 mins
- 5. Prevent Unauthorized Data Modification
  7 mins
- 6. Add Protection to the Create Note Endpoint
  4 mins
- 7. Add More Middleware
  12 mins
- 8. Conclusion
  1 min
Skill:
Build A Note-Sharing App: User Account Management
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Data Segregation Demonstration
  8 mins
- 4. Handle Login and Create Account Errors
  18 mins
- 5. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add Note-Sharing to the Front-end
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Create a Page for Editing Sharing Settings
  16 mins
- 4. Create a Shared Emails List
  13 mins
- 5. Basic Front-end Sharing Logic
  16 mins
- 6. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Email Verification Basics
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Email Verification Basics
  7 mins
- 4. Create a "Please Verify Email" Page
  7 mins
- 5. Refactor the Create Account Flow
  12 mins
- 6. Send Emails From A Node Server
  19 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Advanced Email Verification
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Create an Email Verification Landing Page
  19 mins
- 4. Create an Email Verification Server Route
  8 mins
- 5. Protect Server Routes from Unverified Users
  14 mins
- 6. Prevent Unverified Users from Logging In
  13 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Link Sharing
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Create an Enable/Disable Section
  11 mins
- 4. Create an Endpoint for Enabling Link Sharing
  13 mins
- 5. Create an Endpoint for Disabling Link Sharing
  5 mins
- 6. Load Link-Shared Notes from the Server
  16 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Real-Time Communication
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Add Web-Sockets to Express
  6 mins
- 4. Add Web-Sockets to React
  8 mins
- 5. Send Data Through a Web-Socket
  7 mins
- 6. Convert "Load" Requests to Web-Sockets
  15 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Web-Socket Protection
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Create "User Can Edit Note" Middleware
  10 mins
- 4. Convert Express Middleware to Socket.io
  9 mins
- 5. Middleware for Individual Events
  8 mins
- 6. Handle Socket Errors on the Front-end
  8 mins
- 7. Create a Custom Hook for Web-Sockets
  13 mins
- 8. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Web-Socket Organization Strategies
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Organize Web-Socket Logic Effectively
  9 mins
- 4. Define Event Handlers in Separate Files
  15 mins
- 5. Define Initial Connection Logic
  6 mins
- 6. Add Socket Middleware
  17 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Web-Sockets In-Depth
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Keep Client Data In Sync
  7 mins
- 4. Prevent Infinite Socket Loops
  6 mins
- 5. Add Roles to Web-Socket Data
  14 mins
- 6. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Combine Web-Sockets and Endpoints
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Multiple Web-Socket Connection Types
  15 mins
- 4. Handle New Web-Socket Connections
  7 mins
- 5. Loading Data Via Web-Sockets
  9 mins
- 6. Conclusion
  1 min

Loading transcripts...

Introduction

Access all premium content with a free week!

Start a free week

Explore Features

Course overview

15 HOURS OF TRAINING

19 SKILLS

100 VIDEOS

0 VIRTUAL LABS

0 PRACTICE EXAMS

Shaun Wassell

Nugget trainer since 2021

Read the full bio

What is it like to train with us?

Our learners say it best.

Helps me learn the skills I need when I need them

THOMAS S. | SYSTEMS ENGINEER & CONSULTANT

Read Reviews

Create a Full Stack React App with the MERN Stack Tutorial FAQs: Cost, Training, Value

Is it worth it to learn how to build an app in the MERN stack?

Whether or not it's worth it for a developer to learn the MERN stack is dependent on a lot of different factors that you have to choose for yourself and your own career. But learning MERN provides you with a JavaScript-based, full-stack, wildly popular suite of components, which makes it worth it for most serious developers. If you want a versatile development stack that's scalable and enables rapid development, MERN is worth learning.

How hard is it to learn the MERN stack?

Like any technology, how hard it'll be to learn MERN comes down to your own prior experiences and background. That said, there's a lot that makes MERN pretty easy to learn. First, the entire MERN stack is JavaScript-based, so if you're already comfortable with JS, the rest of the stack is straightforward. MERN is also hugely popular, so resources and documentation are abundant, making it very easy to find help and answers to questions.

Are skills in developing for the MERN stack going to go out of date?

The app development scene is a rapidly evolving technology landscape, and MERN faces tough competition from other stacks, so it's always possible that MERN skills will go out of date. However, the large and active community of MERN stack developers provide it with regular updates, improvements and support. It's also backed by many major companies and enterprises because of its versatility. Skills with MERN will likely remain relevant for a long time.

Who should take this MERN stack development tutorial?

Since Mongo, Express, React and Node are integral to so much modern web development, the best audience for this MERN stack development training is web developers who want to develop their own integrated web apps. Front-end and back-end developers alike will also benefit from learning the MERN stack, especially because the components of the stack so seamlessly connect with one another across the database, back-end framework and server-side processing.

Is this MERN stack development training associated with any certifications?

No, this course on creating a full-stack app with MERN isn't designed to prepare you for any particular certification. That's partly because there's no single IT certification that's looked to by employers and developers alike as an industry leader for MERN skills. But also because certification prep courses have to spend a lot of time helping you memorize terminology and test objectives. This app development course is all about first-hand, real-world and practical experience with developing in the MERN stack.

Related Courses

Learn React

Learn JavaScript Essentials

Intermediate Angular Tutorial: How to Build an Angular Datepicker

What is it like to train with us?

Our learners say it best.

Create a Full Stack React App with the MERN Stack Tutorial FAQs: Cost, Training, Value

Let's chat!