Full-Stack React Development Online Training

This intermediate Full-Stack React Development training prepares learners to code and develop applications and webpages in ReactJS that make full use of the back-end and front-end.

ReactJS is Facebook's open-source JavaScript library that's particularly good for developing scalable applications with static user interfaces that can incorporate dynamic inputs. ReactJS is a front-end application, where you can build a framework that's easy to update and develop for. With this training, you'll learn how to incorporate back-end functionality and development into your ReactJS development.

Learn the JavaScript that makes ReactJS possible and how to manipulate it to increase performance, make better use of APIs and test and scale your code easily. Round out your familiarity with JavaScript libraries and ReactJS with this Full-Stack React Development training.

For supervisors, this React training can be used to onboard new developers, curated into individual or team training plans, or as a React reference resource.

Full-Stack React Development: What You Need to Know

This Full-Stack React Development training has videos that cover JavaScript full-stack libraries topics including:

Developing and writing applications on the front-end and back-end
Scaling an application up at need
Testing your code before implementation
Writing user interfaces that interact with live data feeds

Who Should Take Full-Stack React Development Training?

This Full-Stack React Development training is considered foundational-level React training, which means it was designed for someone with no React experience at all.

React training. This Full-Stack React Development course is important for non-technical professionals if you work with a site or any applications that are built on ReactJS. This course will familiarize you with all the terminology, technology and operations that are happening behind the scenes to make your app or page possible. With that level of understanding, you'll be equipped to take part in conversations about updates and modifications.

New or aspiring developers. Since ReactJS is a front-end user interface development javascript library, writing React is only one piece of the puzzle. Understanding how React interacts with its runtime environment, retrieves data from its databases and stays updated by your version control system are all key skills to keeping your applications running on the network. This Full-Stack React Development course will make sure a developer fully understands the inner workings of the applications and pages running on their networks.

Skill:
Firebase Auth Basics
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Creating Pages
  11 mins
- 4. Redirecting Unauthenticated Users
  12 mins
- 5. Signing In With Firebase Auth
  12 mins
- 6. Listening for Auth Changes
  12 mins
- 7. Conclusion
  1 min
Skill:
Load Server-Side Data in React
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Basic Full-stack Conversion Strategy
  6 mins
- 4. Full-stack Server Setup
  8 mins
- 5. "Read" Server Endpoints
  13 mins
- 6. Converting Pages to Use Server Data
  15 mins
- 7. Converting Context to Use Server Data
  11 mins
- 8. Conclusion
  1 min
Skill:
Create and Modify Server-Side Data in React
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. "Create" Server Endpoints
  10 mins
- 4. Making "Create" Requests from the Front-End
  8 mins
- 5. "Delete" Server Endpoints
  7 mins
- 6. Making "Delete" Requests from the Front-End
  7 mins
- 7. "Update" Server Endpoints
  8 mins
- 8. Making "Update" Requests from the Front-end
  6 mins
- 9. Conclusion
  1 min
Skill:
Account-Creation and Error Handling in Firebase Auth
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. The Firebase User Object
  9 mins
- 4. Create Firebase Auth Accounts
  12 mins
- 5. Auth Error Handling
  12 mins
- 6. Auth-Conscious Navigation Bars
  16 mins
- 7. Conclusion
  1 min
Skill:
Advanced Firebase Auth Patterns
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Creating Custom Hooks for Auth
  12 mins
- 4. Using Custom Hooks Inside Components
  14 mins
- 5. Functions Inside Custom Hooks
  8 mins
- 6. Creating Accounts In Custom Hooks
  6 mins
- 7. Logging Out In Custom Hooks
  5 mins
- 8. Conclusion
  1 min
Skill:
Firebase Auth in Full-Stack Apps
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Express Server Setup
  18 mins
- 4. React Front-end Setup
  9 mins
- 5. Making Requests with Auth Tokens
  20 mins
- 6. Conclusion
  1 min
Skill:
Endpoint Security with Firebase Auth
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Verifying Tokens with Firebase Admin
  12 mins
- 4. Protecting "Update" and "Delete" Endpoints
  9 mins
- 5. Protecting "Create" Endpoints
  11 mins
- 6. Using Auth Middleware
  12 mins
- 7. Conclusion
  1 min
Skill:
Add Firebase Auth to Existing React Apps
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Adding a Login Page to Existing Apps
  14 mins
- 4. Encapsulating Auth Logic with Context
  20 mins
- 5. Adding Auth to a Navigation Bar
  9 mins
- 6. Creating Custom Hooks for Context
  5 mins
- 7. Conclusion
  1 min
Skill:
Add Firebase Auth to Existing Express Servers
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Data Ownership on the Back-end
  26 mins
- 4. Automatically Including Tokens In Requests
  13 mins
- 5. Protecting User Data in Endpoints
  16 mins
- 6. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add Note-Sharing to the Back-end
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Add a "Share Note" Endpoint
  17 mins
- 4. Make "Share" Requests from the Front-end
  11 mins
- 5. Add "Unshare" Functionality
  8 mins
- 6. Load Shared Notes
  9 mins
- 7. Conclusion
  1 min
Skill:
Build A Note-Sharing App: Add User Permissions
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Hide Elements Based On Ownership
  7 mins
- 4. Add Permission Levels To the Back-end
  16 mins
- 5. Add Permission Levels To the Front-end
  10 mins
- 6. Allow Other Users to Edit Notes
  17 mins
- 7. Conclusion
  1 min
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. Updating Notes in Context
  5 mins
- 8. 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. Use Middleware to Reduce Repetition
  14 mins
- 8. Add More Middleware
  12 mins
- 9. 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. User Account Creation
  18 mins
- 5. Handle Login and Create Account Errors
  18 mins
- 6. 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. Use Web-Socket Rooms
  9 mins
- 7. 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. Update Client-Side Data Immediately
  16 mins
- 7. Conclusion
  1 min
Skill:
Essentials of the MERN Stack
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. Basic MERN Stack Structure
  5 mins
- 4. Front-end Setup
  7 mins
- 5. Back-end Setup
  11 mins
- 6. Building a React Front-end
  10 mins
- 7. Loading Data from the Back-end
  12 mins
- 8. Creating Resources
  8 mins
- 9. Updating and Deleting Resources
  7 mins
- 10. Conclusion
  1 min
Skill:
MERN Stack Database Basics
- 1. Overview
  1 min
- 2. Introduction
  1 min
- 3. MongoDB Basics
  13 mins
- 4. Development Flow Improvements
  12 mins
- 5. Connecting to MongoDB from Node
  6 mins
- 6. Loading Data from MongoDB
  5 mins
- 7. Inserting Data into MongoDB
  5 mins
- 8. Deleting Data in MongoDB
  5 mins
- 9. Updating Data in MongoDB
  3 mins
- 10. Conclusion
  1 min

Loading transcripts...

Overview

Access all premium content with a free week!

Start a free week

Course overview

1 HOURS OF TRAINING

SKILLS

VIDEOS

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

Full-Stack React Development FAQs: Cost, Training, Value

What will you learn in this full-stack React development training?

This course on full-stack React development will teach you how to code in React in a way that complements and aligns with the rest of the MERN stack. Well-written code doesn't just execute how it's supposed to, it also interacts with its databases, framework and web server smoothly.

Who should take this full-stack React development course?

Developers should take this full-stack React course. This course covers MongoDB, Express.js, React.js and Node.js, so if you're already using those at a junior level or you don't use them and need to learn them, this full-stack development course will elevate your dynamic web interface development.

Is this training in full-stack React development associated with any certifications?

No, this full-stack React course wasn't designed to help with any particular certifying exams. All of the MERN stack – React, Mongo DB, Express.js and Node.js – are open source, so there aren't many organizations that can call themselves the official certifying body for any or all of them.

What certification should you consider after taking this course in full-stack React development?

Recommending developer certifications is tough, since the most reputable certs are tied to specific operating systems (Microsoft Certified Solutions Developer) or a part of something bigger than just development (Certified Scrum Master). But knowing full-stack React development is good for your career and could help with many future certifying exams.

Why should you take this full-stack React development training?

You should take this full-stack React development training because the MERN stack's powerful architecture is a huge force multiplier for JSON-heavy, cloud-native projects. Are you working in workflow management, big data aggregation, interactive forums or product pages? Coding in the React.js stack makes all those projects better and easier.

Learn JavaScript Essentials

Learn React

What is it like to train with us?

Our learners say it best.

Full-Stack React Development FAQs: Cost, Training, Value

Let's chat!