React Front to Back [Updated for 2021]

Video description

Understand the concepts of React 16.8, Mongo DB, Express, React, Node (MERN), and Redux and apply your learnings to build a full-stack MERN application

About This Video

  • Get up to speed with Modern React 16.8 and the role it plays in application development
  • Learn how to build a full-stack Mongo DB, Express, React, and Node (MERN) application
  • Become familiar with Redux with the help of interesting projects

In Detail

Are you looking to leverage the capabilities of React to build interactive elements for a website? Making the process of learning the latest version of React practical, this course is the best for you.

The course starts with an introduction to React and explains the process of installing it on your system. Next, you will become familiar with React components, states, props, and router and then understanding how to use hooks and context. Moving along, you will go through the process of setting up MongoDB Atlas and Express Server and learn how to build a custom application programming interface (API) with JSON Web Token (JWT) authentication. Next, you will create a client-side setup and use React and Express for user registration and authentication. Finally, you will create a Contact API integration and deploy it to Heroku and get to grips with Redux with the help of an interesting project.

By the end of this course, you will be well-versed with modern React 16.8 and will have developed the skills to build a full-stack Mongo DB, Express, React, Node (MERN) application with a custom Express backend API.


If you are a software developer, who is looking to learn Modern React 16.8 and the concepts of Mongo DB, Express, React, Node (MERN), and Redux, this course is for you. To get started with this course, you should have a good understanding of JavaScript ES6.

Publisher resources

Download Example Code

Table of contents

  1. Chapter 1 : Course Introduction
    1. Welcome to the Course
    2. What is React?
    3. Setting up the Environment
  2. Chapter 2 : Project 1: Starting (GitHub Finder) and Setting up React
    1. Project Introduction
    2. Creating a React Application and Viewing the File Structure
    3. Create React App (CRA) Cleanup and Preparation
    4. Introduction to JavaScript Syntax Extension (JSX) and Fragments
    5. Expressions and Conditionals in JavaScript Syntax Extension (JSX)
  3. Chapter 3 : Components, States, and Props
    1. Components, Props and Prop Types
    2. Getting Started with Component States
    3. Lists and Passing a State with Props
    4. Stateless Functional Components
    5. Handling Hypertext Transfer Protocol (HTTP) Requests and Updating States
    6. Spinner Component and Refactoring
    7. Environment Variables
  4. Chapter 4 : Events, Passing Props, React Router, and More
    1. Events and Search Components
    2. Passing Props up and Searching Users
    3. Clearing Users from Your State
    4. Setting up an Alert State and Component
    5. Setting up a React Router
    6. Adding a Single User Component and Data
    7. Creating a User Component User Interface (UI) and Layout
    8. Repos and the RepoItem Component
  5. Chapter 5 : Refactoring Hooks and Context API
    1. Overview of Hooks and Context Application Programming Interface (API)
    2. Using a Search Class to Function with the useState Hook
    3. Using a User Class to Function with the useEffect Hook
    4. App Class Function Component
    5. Implementing the Context Application Programming Interface (API) and Using the Reducer
    6. Creating Reducers
    7. Moving User State to the Context Application Programming Interface (API)
    8. Moving Repos State to the Context Application Programming Interface (API)
    9. Creating an Alert Context Workflow
    10. Creating the Home and NotFound Components
    11. Preparing and Deploying to Netlify
  6. Chapter 6 : Project 2 (Contact Keeper – Mongo DB, Express, React, and Node (MERN)) and Setting up an Express Server
    1. Project Introduction
    2. Setting up MongoDB Atlas
    3. Creating Dependencies and a Basic Express Server
    4. Setting up Backend Routes
    5. Connecting MongoDB to the Application
  7. Chapter 7 : Backend Users, Contacts, and JSON Web Tokens (JWT) Authentication
    1. User Model and Validation
    2. Hashing Passwords and Registering Routes
    3. Creating and Responding with a JavaScript Object Notation (JSON) Web Token
    4. Creating an Authentication Route
    5. Authenticating Middleware and Protecting Routes
    6. Creating a Contact Model and Getting the Contacts Route
    7. Adding a Contact Route
    8. Updating Contacts and Deleting Routes
  8. Chapter 8 : Setting up Your Client and Contacts User Interface (UI)
    1. Setting up React and Concurrently
    2. Setting up Cleanup, Navbar, and a Router
    3. Creating Contacts, Context, and a Global State
    4. Creating the Contacts and ContactItem Components
    5. Creating the ContactForm Component
    6. Deleting a Contact from the User Interface (UI)
    7. Setting and Clearing Current Contacts
    8. Adding Actions for Editing and Updating Contacts
    9. Creating a Contact Filter Form and State
    10. Creating a Basic Add and Delete Animation
  9. Chapter 9 : React/Express Authentication
    1. Creating Authentication Context and Initial State
    2. Creating Register and Login Forms
    3. Creating Alert Context, States, and Components
    4. Creating a User Registration Form
    5. Loading a User and Setting a Token
    6. Creating User Login
    7. Creating the Logout and Navbar Components
    8. Creating the PrivateRoute Component
  10. Chapter 10 : Integrating and Deploying the Contacts Application Programming Interface (API)
    1. Adding Contacts to the Database
    2. Getting and Clearing Contacts
    3. Deleting Contacts
    4. Updating Contacts
    5. Preparing and Deploying to Heroku
  11. Chapter 11 : Project 3 – Start (IT Logger – Redux) - Components and User Interface
    1. Project Introduction
    2. Setting up React and the JavaScript Object Notation (JSON) Server
    3. Setting up Materialize Cascading Style Sheets (CSS)
    4. Creating the SearchBar and Logs Components
    5. Creating the LogItem and Preloader Components
    6. Creating the AddBtn and AddLogModal Components
    7. Adding the Edit and Tech Modal Components
  12. Chapter 12 : Redux for State Management
    1. Setting up the Redux Store and Provider
    2. Setting up Logs Reducer, Actions, and Types
    3. Connecting Redux to a Component
    4. Adding Logs
    5. Deleting Logs
    6. Updating Logs
    7. Searching Logs
  13. Chapter 13 : Technicians State and Its Components
    1. Techs Reducer, Actions, and Components
    2. Using the Select Component
    3. Adding Technicians
    4. Deleting Technicians

Product information

  • Title: React Front to Back [Updated for 2021]
  • Author(s): Brad Traversy
  • Release date: January 2021
  • Publisher(s): Packt Publishing
  • ISBN: 9781838645274