Course Description

The Best React Course to Learn by Building (Practice) Projects

The Complete React Web Developer Course Syllabus

Module 1 - Introduction to Full Stack Web Development Concepts

• Introduction
• What is MERN?
• What is SPA?
• How does MERN stack work?
• Installing Node js for React
• Installing the IDE

Module 2 - HTML, CSS AND JS (ES6 functions)

• Introduction to HTML
• Semantic HTML5 Elements
• Introduction to CSS
• CSS Design Pattern
• Introduction to JavaScript
• Javascript ES6 Functions

Module 3 - Basics Of React JS

• What is React JS?
• Setting up Starting Project
• Understanding the JSX
• Understanding Components
• Working with Multiple Components
• Using Props to pass Data between Components
• Rendering Lists of Data
• Handling Events
• Child Parent Communication
• Working with State

Module 4 - Frontend Development with React JS

• Starting Setup, Routes and Pages
• Adding a Userlist and UserItem Component
• Styling our Components
• Adding a Main Header
• Adding Navlinks
• Implementing Basic Desktop and Mobile Application
• Understanding Portals
• Handling Drawer State
• Rendering User Places & Dynamic Route Segments
• Getting Route Params
• Adding a Modal
• Implementing the Form Components
• Implementing the Custom Form Hook

Module - 5 Setting up a Node.js development environment for project

• Module Introduction
• Require and Module Exports
• Asynchronous Non-Blocking Code
• Creating Node and Angular
• What is REST API?
• Adding the Node Backend
• Adding the Express Framework
• Serving Static Files
• Exploring MiddleWare
• Using the express router
• Improving the Server.js code
• Fetching Initial Post
• Using the Angular HTTP Client
• Understanding CORS
• Adding the POST Backend Point
• Adding Angular

MODULE- 6 Working with MongoDB

• Module Introduction
• What is MongoDB?
• Comparing SQL and NoSQL
• Connecting React to MongoDB
• Setting Up MongoDB
• Adding Mongoose
• Understanding Mongoose Schemas and Models
• Creating a POST Instance
• Connecting Our Node Express App to MongoDB
• Storing Data in the DB
• Fetching Data from the DB
• Transforming Response Data
• Deleting Documents
• Updating the Frontend after Deleting Posts
• Adding Posts with the ID

Module 7 - Enhancing the App

• Module Introduction
• Adding Routing
• Styling Links
• Client Side vs Server Side Routing
• Implementing the EDIT form Feature
• Updating Post on the Server
• Re-Organizing the Backend Routes
• Adding Loading Spinners

Module 8 - User Authentication

• Adding Auth Page and Login Form
• Adding Auth Context For App Wide State Management
• Adding Authenticated and Unauthenticated Routes
• Hashing the User Password
• Generating Tokens on the Backend
• Backend Route Protection with Auth Middleware
• Using & Attaching JWT Tokens in React
• Using Tokens to Update and delete Places
• Adding Authorization
• Authorization on Delete Places
• Adding Auto Login
• Managing the Token Expiration Date
• Finishing Auto Login and Auto Logout
• General App Improvements

Module 9 - Errors Handling

• Module Introduction
• Testing Different Places to Handle Errors
• Testing Different Places to Handle Errors
• The Error Interceptor
• Displaying the Basic Error Dialog
• Adding an Error Dialog
• Returning Error Messages on the Server
• Finishing Touches

Module 10 - App Deployment

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