ReactJS-The Beginner Master Class
  • React In the Beginning
    • Lesson 1 - Demo: Build a Simple React App - Fast
    • Lesson 2 - HTML Review
    • Lesson 3 - CSS Review
    • Lesson 4 - Modern JavaScript (JSX) Patterns
    • Lesson 5 - Set up Dev Environment
    • Hands-on Practice
  • React Fundamentals
    • Lesson 1 - Understanding Old vs New Way of Building Web Apps - SPAs
    • Lesson 2 - Motivation for Using React as the Solution to Vanilla JS
    • Lesson 3 - What is ReactJS - How it Works
    • React Code Along from Scratch
    • Lesson 4 - Create and Run a React Project with Vite - Full Overview
    • Lesson 5 - Create Hook by State Management in React
    • Lesson 6 - React Project File and Folder Walkthrough
    • Lesson 7 - JSX and How React Treats the DOM & JSX Compilation(by Babeljs) - Overview
    • Lesson 8 - Understanding the Main Files - App.jsx and main.jsx
    • Lesson 9 - Props and One-Way Data Flow - Overview
    • Lesson 10 - Google Bookshelf App - Ver 1.0
    • Hands-on Practice I
    • Hands-on Practice II
  • React State and Styling
    • Lesson 1 - Pulling Book Data from a Different Data File
    • Lesson 2 - Overview of How State Works in React
    • Lesson 3 - RandomQuote App
    • Lesson 4 - Lifting State Up - React Pattern Overview
    • Hands-On - Simple Counter
  • Forms and Interactivity - Grocery List App
    • Lesson 1 - Setup a Simple Form and Input
    • Lesson 2 - Build Form Profile App Using Multi-input Form Data
    • Hands-on : Build a Grocery List App
  • Connecting to the Backend - Consuming APIs - UseEffect Hook
    • Lesson 1 - Connecting to the Back End - Understanding Side Effects, Hooks and useEffect - Overview
    • Lesson 2 - Fetching Data from the Backend the Right Way with useEffect Hook
    • Lesson 3 - Setting Up Loading State
    • Hands-on :Use Dependency Array and Adding Values that Control Side Effects
  • Solo Project 1
  • RESTful APIs :Build a BookSearch App -Ver 2.0
    • Lesson 1: Build and test RESTful APIs with Postman
    • Lesson 2 - BookShelf App Structure
    • Lesson 3 - Create NavBar.jsx Component
    • Lesson 4 - Create Footer Component
    • Lesson 5 - Create BookList.jsx Component
    • Lesson 6 - Create BookCard.jsx Component
    • Lesson 7 - Creating Custom Hooks - useBooks and api-client
    • Lesson 8 - Controlling Network Activities in React with AbortController
    • Lesson 9 - Show Book Details in a Modal - Working
    • Lesson 10 - Bookshelf App Summary
  • Multi-Page Applications (MPAs)
    • Build a Multi-Page React Application
    • Multi-Page React Application
    • Hands-on Practice
  • Backend Frameworks-NEXT.JS
    • Migrating from React to Next.js
    • Lesson 1: Key Concepts of NodeJS and Express for Backend Web Development
    • Lesson 2: How to set up a new Next.js project
    • Lesson 3: How to create Layouts and Pages
    • Hands-on Practice 1
    • Hands on Practice 2
      • New Project & Folder Structure
      • File-Based Routing
      • Server vs Client Components & Router Hooks
      • Start On The Navbar
      • Navbar Links, Dropdowns & React Icons
      • Active Links & Conditional Rendering
      • Homepage Components
      • Properties Page
      • Property Card Dynamic Data
      • Home Property Listings
      • Custom Not Found & Loading Pages
  • Git and GitHubs
    • Git Installation
    • Git Commands
    • GitHub Repository
    • Hands-on Practice
  • Database in Application
    • React Supabase CRUD
    • Hands-on: Note Taking App
  • NoSQL Database
    • Installing MongoDB Community Edition
    • System Env Path Setting
    • How to use MongoDB Shell
    • How to Connect and Use Mongosh in VS Code via MongoDB Extension
    • MongoDB Guide
  • Solo Project 2
  • Deployment and Web Hosting
    • Lesson 1. React+Vite+TS+Shadcn Project
    • Lesson 2. Deploying a React Vite App to Vercel from Vercel CLI
    • Lesson 3 Connecting to GitHub Repo and Automate Deployment
  • Solo Project 3
  • Final Term Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 1 Team Project
    • Level 2 Team Project
    • Level 2 Team Project
    • Level 3 Team Project
    • Level 3 Team Project
Powered by GitBook
On this page
  • Introduction to Node.js:
  • Introduction to Express:
  • 2. Building Web Applications with Express:
  • Routing in Express:
  • Middleware in Express:
  • 3. REST API Development with Express:
  1. Backend Frameworks-NEXT.JS

Lesson 1: Key Concepts of NodeJS and Express for Backend Web Development

Introduction to Node.js:

  • What is Node.js? An open-source, cross-platform JavaScript runtime environment that executes JavaScript code outside a browser.

  • Why Node.js for Backend?

    • Non-blocking, event-driven architecture for efficient performance.

    • Single language (JavaScript) for both frontend and backend.

    • Large ecosystem via npm (Node Package Manager).

Core Concepts in Node.js:

  • Event Loop: Handles asynchronous operations.

  • Modules: Built-in (fs, http) and custom modules.

  • npm Packages: Managing dependencies using package.json.

Introduction to Express:

  • What is Express? A minimal and flexible Node.js web application framework.

  • Features:

    • Simplifies routing and middleware management.

    • Facilitates REST API development.

    • Easily integrates with databases.

2. Building Web Applications with Express:

Setting Up an Express Application:

  1. Initialize Node Project:

    mkdir express-app && cd express-app
    npm init -y
    npm install express
  2. Create a Basic Server:

    • Create index.js:

      const express = require('express');
      const app = express();
      const PORT = 3000;
      
      app.get('/', (req, res) => {
        res.send('Hello, World!');
      });
      
      app.listen(PORT, () => {
        console.log(`Server running on http://localhost:${PORT}`);
      });
  3. Run the Server:

    node index.js
    • Visit http://localhost:3000 in your browser to see "Hello, World!"

Routing in Express:

  • Define Routes:

    app.get('/about', (req, res) => {
      res.send('About Page');
    });
    
    app.post('/contact', (req, res) => {
      res.send('Contact Form Submitted');
    });

Middleware in Express:

  • Using Middleware:

    app.use(express.json());  // To parse JSON bodies
    app.use((req, res, next) => {
      console.log(`${req.method} request for '${req.url}'`);
      next();
    });

3. REST API Development with Express:

Create a Simple REST API:

  1. Sample Data:

    let users = [
      { id: 1, name: 'Alice' },
      { id: 2, name: 'Bob' },
    ];
  2. CRUD Operations:

    • GET (Retrieve All Users):

      app.get('/users', (req, res) => {
        res.json(users);
      });
    • GET (Retrieve Single User):

      app.get('/users/:id', (req, res) => {
        const user = users.find(u => u.id == req.params.id);
        if (user) res.json(user);
        else res.status(404).send('User not found');
      });
    • POST (Add New User):

      app.post('/users', (req, res) => {
        const newUser = { id: users.length + 1, ...req.body };
        users.push(newUser);
        res.status(201).json(newUser);
      });
    • PUT (Update User):

      app.put('/users/:id', (req, res) => {
        const index = users.findIndex(u => u.id == req.params.id);
        if (index !== -1) {
          users[index] = { id: parseInt(req.params.id), ...req.body };
          res.json(users[index]);
        } else res.status(404).send('User not found');
      });
    • DELETE (Remove User):

      app.delete('/users/:id', (req, res) => {
        users = users.filter(u => u.id != req.params.id);
        res.status(204).send();
      });

PreviousMigrating from React to Next.jsNextLesson 2: How to set up a new Next.js project

Last updated 4 months ago