Introduction

• Introduction to MERN, Single Page Application (SPA)
• Introduction to NodeJS
• Installing Node, React and MongoDB
• Working with VSCode
• Creating an React Project
• Understanding Project Structure

REACT

Introduction

• Introduction to Web Design, Single Page Web Apps and React Web Apps
• Installation of NodeJS and React
• Creating the First App
• Understanding the requirements of a React App

 

Modern JavaScript (ES6)

• Introduction to Modern JavaScript and ES6 standards
• Running JS on Node
• Understanding “let” and “const”
• Arrow Function
• Exports and Imports
• Classes and Methods
• Spread and Rest Operators
• Destructuring
• Working with Arrays and Functions
  

React Features and Syntax

• Understanding the Folder Structure
• Understanding Component
• Understanding JSX and its Restrictions
• Creating a Functional Component
• Working with Components & Re-Using Them
• Working with Props
• Working with State
• Handling Events with Methods
• Manipulating the State
• Using the useState() Hook for State Manipulation
• Stateless vs Stateful Components
• Passing Method References Between Components
• Adding Two Way Binding
• Adding Styling with Stylesheets
  

Lists and Conditionals

• Rendering Content Conditionally
• Handling Dynamic Content
• Working with Lists & State
• Updating State Immutably
• Lists & Keys
• Flexible Lists
  

Styling React Components and Elements

• Setting Styles Dynamically
• Setting Class Names Dynamically
• Working with Styled Components
• More on Styled Components
• Styled Components & Dynamic Styles
• Working with CSS Modules & Media Queries
  

React Internal Concepts

• Optimizing the Project Structure
• Splitting an App Into Components
• Comparing Stateless and Stateful Components
• Class-based vs Functional Components
• class Component Lifecycle
• Component Creation Lifecycle
• Component Update Lifecycle (for props Changes)
• Component Update Lifecycle (for state Changes)
• Working with useEffect() in Functional Components
• Cleaning up with Lifecycle Hooks & useEffect()
• Using shouldComponentUpdate for Optimization
• Optimizing Functional Components with React.memo()
• Using PureComponents instead of shouldComponentUpdate
• Understanding How React Updates the DOM
• Rendering Adjacent JSX Elements
• Using React.Fragment
• Higher Order Components (HOC)
• Passing Unknown Props
• Setting State Correctly
• Using PropTypes
• Using Refs
• Refs with React Hooks
• Understanding Prop Chain Problems
• Using the Context API
• contextType & useContext()
  

HTTP, AJAX and Axios

• Understanding Http Requests in React
• Introducing Axios
• Creating a Http Request to GET Data
• Rendering Fetched Data to the Screen
• Transforming Data
• Making a Post Selectable
• Fetching Data on Update
• POSTing Data to the Server
• Sending a DELETE Request
• Setting a Default Global Configuration for Axios
• Creating and Using Axios Instances
  

Module 8 - Working on a Project 

Routing in SPA and Multi-Page App

• Routing and SPAs
• react-router vs react-router-dom
• Switching Between Pages
• Using Links to Switch Pages
• Using Routing-Related Props
• The "withRouter" HOC & Route Props
• Absolute vs Relative Paths
• Styling the Active Route
• Passing Route Parameters
• Extracting Route Parameters
• Parsing Query Parameters & the Fragment
• Using Switch to Load a Single Route
• Navigating Programmatically
• Understanding Nested Routes and Dynamic Nested Routes
• Redirecting Requests
• Conditional Redirects
• Using the History Prop to Redirect (Replace)
• Working with Guards
• Handling the 404 Case (Unknown Routes)
• Loading Lazy Routes
• Lazy Loading with React Suspense
• Routing and Server Deployment
  

Forms and Form Validation

• Creating a Custom Dynamic Input Component
• Setting Up a JS Config for the Form
• Dynamically Create Inputs based on JS Config
• Adding a Dropdown Component
• Handling User Input
• Handling Form Submission
• Adding Custom Form Validation
• Adding Validation Feedback
• Showing Error Messages
• Handling Overall Form Validity
• Working on an Error
  

Working on a Project

 

NodeJS and ExpressJS

• What is a RESTful API?
• Adding the Node Backend
• Adding the Express Framework
• Improving the server.js Code
• Fetching Initial Posts
• Using the React HTTP Client
• Understanding CORS
• Adding the POST Backend Point
• Adding React

 

MongoDB

• What is MongoDB?
• Comparing SQL & NoSQL
• Connecting React to a Database
• Setting Up MongoDB
• Using MongoDB Atlas & IP Whitelist
• Adding Mongoose
• Understanding Mongoose Schemas & Models
• Creating a POST Instance
• Connecting our Node Express App to MongoDB
• Storing Data in a Database
• Fetching Data From a Database
• Transforming Response Data
• Deleting Documents
• Updating the Frontend after Deleting Posts
• Adding Posts with an ID

 

User Authentication & Authorization

• Adding the Login Input Fields
• Handling User Input
• Adding the Signup Screen
• Creating the User Model
• Creating a New User Upon Request
• Connecting React to the Backend
• Understanding SPA Authentication
• Implementing SPA Authentication
• Sending the Token to the Frontend
• Adding Middleware to Protect Routes
• Adding the Token to Authenticate Requests
• Improving the UI Header to Reflect the Authentication Status
• Improving the UI Messages to Reflect the Authentication Status
• Connecting the Logout Button to the Authentication Status
• Redirecting Users
• Adding Route Guards
• Reflecting the Token Expiration in the UI
• Saving the Token in the Local Storage
• Adding a Reference to the Model
• Adding the User ID to Posts
• Protecting Resources with Authorization
• Passing the User ID to the Frontend
• Using the User ID on the Frontend

 

Project Deployment

• Deployment Options
• Deploying the REST API
• Deploying the REST Api
• Deploying React
• React Deployment - Finishing the Two App Setup
• Using the Integrated Approach