WD301 content

This repository contains the WD301 course content.

License

This work is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.

© Pupilfirst Pvt. Ltd.

L1. React Fundamentals

Introduction to React

• Introduction to course
• Why React?

React Components

• Introduction to Components

Setting up Development Environment

• Node.JS Environment setup
• React Dev Tools browser extension

CRA - Create React App

• Generating a CRA project
• Why CRA?

Introduction to JSX

• What is JSX?
• Using JS Variables in JSX

Component Nesting & Props

• Component reuse
• Component nesting
• Props in React

DOM and Virtual DOM

• What is virtual DOM?
• Difference between virtual and real DOM (merged as one conent)

Basic Styling with Tailwind CSS

• Adding basic styling
• Adding Tailwind to React app

Milestone

• Milestone

L2. Introduction to Typescript

Typescript Overview

• Introduction
• Executing TS code

What is Type System?

• Type System
• Datatypes in Typescript

Type annotations

• Type annotations and Inference

Typed arrays

• Arrays and Tuples in TS

Interface

• TS Interfaces and functions

Add TypeScript to React Application

• Adding TypeScript

Milestone

L3. State management and handling user inputs with forms

Component Lifecycle

• Introduction to Class-based components

• Introduction to Lifecycle methods

Introduction to React State

• State initialization through constructor
• Updating state in class based components

Handling user inputs with Forms

• Designing a basic form component

• Creating event handlers and form submission

• Creating a production build and deploying a React App on the Cloud

• Deploying React app to GitHub

Milestone

• Milestone

L4. React Hooks

Introduction to React Hooks

• Introduction

Introducing useState

• Understanding useState, Setter functions
• Using setState for text inputs

Introducing useEffect

• Understanding useEffect
• Async code with useEffect

Introducing localStorage

Custom Hooks

• Overview of custom hooks
• Building and using custom hooks

Milestone

• L4 milestone

L5. React Router

React Router

• Introducing React Router
• Always visible components
• Path parameters
• Programmatic Navigation

Milestone

L6. Making API Request with React

• Introduction to our API Service

Making API calls

• Fetching data
• Handling Request with Async Await
• Submit Form data to API

Add user authentication

• User sign up
• User sign in
• Persisting user session
• Managing current user

Implementing a conditional render

• Public and private pages using react-router

Milestone

• Milestone specification

L7. React Context and Application state management

Revamping the app UI

• Headless UI and designing layout
• Redefining app routes

Using Context

• Introduction to Context
• Creating our first context
• Changing values in context

Using useReducer

• Introduction to useReducer
• The reducer function
• Action types

Creating a project and using React hook form

• Create a project
• Intro to React hook form

Application state modelling

• App state vs. component state
• Designing the application state - planning
• Designing the application state using Context and useReducer - implementation

Milestone

• Milestone specification

L8. Handling advanced UI events

Adding tasks to the project

• Add routes for task feature
• Display project details
• Create a Task
• Model API response and add reducers
• Categorising tasks and showing them in column layout
• Drag-and-drop Tasks from one state to another
• Fetch list of Tasks
• Delete a Task
• View Task details & In-place editing task details
• Assign task to a user

Milestone

• Milestone specification

L9. Creating Production Ready React Apps

Best Practices

• Exploring popular npm packages for routing
• Exploring popular npm packages for UI
• Ideal folder structure for large applications

Creating Production Ready React Apps

• Production Checklist with Vite
• Suspense and lazy loading
• PWA config for Vite

Milestone

• Milestone specification

Capstone Project