Skip to content

About

React Web Development Course - LongNDT

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

13 forks
Report repository
BranchesTags

Repository files navigation

React Course - LongNDT

Course Overview

This course teaches React with Typescript development using industry-standard practices through hands-on examples.

Format Theory, hands-on practice, and project-based learning

If you are not familiar with TypeScript or prefer to learn React with JavaScript

➡️ Switch to JavaScript ⬅️

Prerequisites

  • HTML and CSS fundamentals

  • TypeScript basics (types, interfaces, generics)

  • Basic programming concepts (variables, functions, loops, objects)

  • Command line operations

  • Optional but helpful: Basic understanding of HTTP and APIs (will be taught in Lesson 3)

  • Optional but helpful: Familiarity with backend concepts (covered in Lessons 3-5)

What You Will Learn

  • Build modern React applications with TypeScript and functional components
  • Understand React fundamentals and component-based architecture
  • Master TypeScript syntax for type-safe UI components
  • Create strongly-typed, reusable component libraries with props and interfaces
  • Manage application state with multiple patterns
  • Implement client-side routing with authentication
  • Handle forms, validation, and user interactions with type safety
  • Integrate React frontend with REST APIs using typed interfaces
  • Implement JWT-based authentication
  • Build real-time features with WebSockets
  • Use modern development tools
  • Write tests for React components
  • Deploy applications to production
  • Implement accessibility best practices with ARIA attributes
  • Use TypeScript strict mode for enhanced type safety
  • Follow modern React 19 patterns and best practices

Course Structure

Lesson 0: TypeScript Prerequisites

  • TypeScript essentials for React development

  • Interfaces, generics, and utility types

  • Lab: TypeScript practical exercises

Lesson 1: React Fundamentals & Project Setup

  • Setting up development environment with Vite

  • Understanding React basics and TSX syntax

  • Creating your first functional components

  • Basic styling and project structure

  • Lab: Build a simple welcome page with components

Lesson 2: Component Architecture & React Hook

  • Component composition and props with TypeScript

  • State management with TypeScript

  • Custom hooks with proper typing

  • Form handling with type safety

  • Building reusable component libraries

  • Lab: Build a data management interface with CRUD operations

Lesson 3: API Integration & Data Management

  • Connecting React to Node.js/Express backend & MongoDB database

  • RESTful API consumption and error handling

  • Lab: CRUD application with API integration

Lesson 4: Routing & Authentication

  • React Router and JWT authentication

  • Protected routes and advanced React patterns

  • Lab: Authentication system with protected routes

Lesson 5: Full-Stack Integration & Production Deployment

  • Full-stack architecture with MERN stack

  • File uploads, WebSockets, and deployment

  • Lab: Complete application deployment

📁 Lesson Structure

Each lesson follows a standardized structure designed for effective learning:

lesson-topic/
├──  reference/          # Quick reference codes
├──  example/            # Working code examples
├──  theory/             # Comprehensive documentation
├──  lab/                # Hands-on exercises
└──  quiz/               # Knowledge assessment

How to run quizzes Use Live Server extension in VS Code

  • Right-click quiz file → "Open with Live Server"
  • Or click "Go Live" button in bottom status bar
  • Quiz opens in browser with interactive features

🗺️ Visual Diagrams

Quick links to key diagrams:

📚 How to Study This Course Effectively

Step 1: Start with Reference Guide

Goal Get a quick overview of what you'll learn

  • Skim through main topics and code examples
  • Don't try to understand everything deeply yet
  • Focus on: "What concepts will I learn?"
  • Mental preparation for the lesson ahead

Step 2: Explore Working Example

Goal See concepts in action before diving into theory

  • Run the example project first
  • Play with the UI, test different features
  • Open browser DevTools to inspect components
  • Look at the code structure (don't read line-by-line yet)
  • Ask yourself: "How does this work?"

Step 3: Read Theory as Reference

Goal Understand concepts deeply when needed

  • DON'T read cover-to-cover like a novel

  • DO read sections related to what you're coding

  • Read concept → Go to example code → See it in action → Return to theory

  • Use Ctrl+F to search for specific topics

  • Bookmark important sections for later reference

Step 4: Code Along with Reference

Goal Build muscle memory and understanding

  • Create a new project or use example as base
  • Type every line yourself (even if you don't understand yet)
  • Run code frequently to see results
  • Make small changes to experiment
  • Compare your code with example/ when stuck

Step 5: Complete Lab

Goal Apply knowledge to real-world scenarios

  • Read requirements carefully

  • Plan before coding (sketch components, data flow)

  • Code incrementally (one feature at a time)

  • Test each feature before moving to next

  • Get stuck? → Check reference/ → Review example code → Read relevant theory section

  • Still stuck? → Review example code more carefully → Try different approach

  • Compare your solution with example/ after completion

Step 6: Take the Quiz

Goal Verify you're ready for next lesson

  • Answer all questions honestly (no peeking!)
  • Score below 70%? → Review weak areas → Retake quiz
  • Score above 80%? → You're ready for next lesson!
  • Use quiz results to identify what to review

Step 7: Review and Reflect

Goal Solidify learning before moving forward

  • Review your lab code vs. example code
  • What did you learn?
  • What was challenging?
  • What would you do differently?
  • Write notes for future reference
  • Create a personal cheat sheet

🚀 Getting Started

Step 1: Check and Install Development Environment

📋 First, ensure you have all required software installed:

Go to Environment Setup Guide for detailed setup instructions

Make sure you have installed:

  • Node.js (version 18 or higher)
  • Visual Studio Code
  • Git
  • Required VS Code extensions

Having installation or setup issues?

Check Troubleshooting Guide for common problems and solutions

Step 2: Install Markdown Reading Support Extension

📖 For the best documentation reading experience:

  1. Open VS Code
  2. Go to Extensions (Ctrl+Shift+X)
  3. Search and install: "Markdown Preview Enhanced"
  4. After installation, you can:
    • Press Ctrl+K V to open markdown preview
    • Or click the "Open Preview to the Side" icon when viewing .md files

Step 3: Clone Repository

git clone https://github.com/longndt/react-course
cd react-course

Step 4: Recommended Learning Path

Follow this exact order for the best learning experience:

1⃣ Start with Prerequisites (If needed)

2⃣ Learn Lessons 1-5 (In sequence)

3⃣ Continue with Advanced Materials (Optional)

Quick links to key advanced topics:

Step 5: Start Learning

# Start with Lesson 0 (if you need to review fundamentals)
cd lesson0-typescript-basics

# Or start directly with Lesson 1
cd lesson1-fundamentals-setup

💡 Learning Tips

  • Use Markdown Preview Enhanced for better reading experience

  • Read the readme of each lesson carefully before starting

  • Complete all labs to solidify your understanding

  • Follow the example folder to see complete example

  • Check the Troubleshooting Guide for quick solutions

About

React Web Development Course - LongNDT

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

13 forks
Report repository

Releases

Packages

Contributors

Languages