React + Typescript: Essential Training

Unlocking Modern Web Development: Mastering Components, Forms, Routing, and API Integration with React and TypeScript

What you'll learn

Fundamentals of React and TypeScript

Create modern, responsive web user-interfaces and web apps using React

Managing states in React

Respond or request to a back-end API in React

Respond to DOM events in React

Learn to use TypeScript along with a React project.

Creating and managing React components

Use TailwindCSS For Styling

Creating real-world production ready web apps

Defining data types with TypeScript

Creating and interacting with forms in React

Form validations in React

Error handling and debugging

Using third-party NPM libraries to extend the functionality of your app

Persist data in browser's local storage

Deploy a React app into production (Vercel)

Deploy a React app into production (Self-Manged VPS server)

Create Single Page Applications (SPA) in React

Create App Routes Using React Router

Requirements

This course requires students to have a basic knowledge of HTML, CSS, and JavaScript.

Familiarity with TypeScript is nice to have, but NOT required.

A stable internet connection to create a fresh React project and install third-party packages.

A Mac or Windows Computer (Laptop or Desktop)

Description

React + TypeScript: Essential Training is your beginner-friendly entrance into the exciting world of web development, specifically tailored to make learning React and TypeScript approachable and fun. This course is crafted to guide beginners through the essentials of building dynamic web applications, ensuring a gentle learning curve without overwhelming technical jargon.Starting with React, the heart of this course, you'll dive into creating components—the fundamental elements that bring your web applications to life. Through engaging, hands-on lessons, you'll learn how to design these components, imbuing them with style and interactivity, ensuring your applications are both beautiful and user-centric.We place a strong emphasis on practical skills, such as managing component states, which is crucial for creating responsive and interactive user experiences. You'll also master the art of building forms in React, a vital skill for gathering user input and feedback.Navigation within your application won't be a mystery for long; with React Router, you'll effortlessly add sophisticated navigation and routing capabilities, significantly enhancing the user experience. Connecting your application to backend APIs will open up a new world of possibilities, allowing your applications to interact with external data and services.Deploying your application might seem daunting, but we'll walk you through the process step-by-step, ensuring you're ready to launch your project with confidence. And when it comes to TypeScript, we introduce its fundamentals in a straightforward, easy-to-understand manner, highlighting how it can make your development process more efficient and your applications more reliable.By the end of this course, you'll have a solid foundation in both React and TypeScript, equipped with the skills to embark on your development projects. React + TypeScript: Essential Training is not just a course; it's your first step into a broader world of web development, ready to open doors to endless possibilities.

Overview

Section 1: Introduction

Lecture 1 Welcome

Lecture 2 Prerequisites

Section 2: Getting Started

Lecture 3 What is React?

Lecture 4 Setting Up the Development Environment

Lecture 5 Creating Your First React App

Lecture 6 Overview of Project Structure

Lecture 7 React Under The Hood

Section 3: React Components: Essential Lessons

Lecture 8 Introduction

Lecture 9 Create A React Component

Lecture 10 React Fragments

Lecture 11 Displaying List of Data

Lecture 12 Conditional Rendering

Lecture 13 Handling DOM Events

Lecture 14 Working On Component State

Lecture 15 Passing Data Via Props

Lecture 16 Passing Functions Via Props

Lecture 17 The Difference Between Props and State

Lecture 18 Passing Children To A Component

Lecture 19 Introducing the React Dev Tools

Lecture 20 Optional Props and Setting Default Prop Values

Lecture 21 Exercise: Build an Alert Banner - Starting Project

Lecture 22 Exercise: Build an Alert Banner - Solution!

Section 4: Adding Styles To Components

Lecture 23 Introduction

Lecture 24 Styling with Vanilla CSS and Organizing Stylesheets

Lecture 25 Fixing Style Conflicts with CSS Modules

Lecture 26 Applying Inline CSS

Lecture 27 Styled Components in React

Lecture 28 Using CSS Frameworks

Lecture 29 React Icons and Other Assets

Lecture 30 Exercise - Styling Cards

Section 5: State Management

Lecture 31 Introduction

Lecture 32 Understanding the State Hook

Lecture 33 State Structures

Lecture 34 Pure Components

Lecture 35 React Strict Mode

Lecture 36 Working with State - Updating Objects

Lecture 37 Article: Spread Operator in JavaScript

Lecture 38 Working with State - Updating Nested Objects

Lecture 39 Working with State - Updating Arrays

Lecture 40 Working with State - Updating Array of Objects

Lecture 41 Sharing States with Other Components

Lecture 42 Extracting Interface Props

Lecture 43 Using Immer To Simplify State Updates

Lecture 44 Exercise - Updating Object, Nested Object, Array

Section 6: Working with Forms in React

Lecture 45 Introduction

Lecture 46 Building Forms and Handling Form Submissions

Lecture 47 Accessing Form Input Fields

Lecture 48 Using the State Hook to Handle Input Fields

Lecture 49 Quickly Build Forms Using React Hook Form

Lecture 50 Validating Form Inputs

Lecture 51 Schema-Based Validation Using Zod

Lecture 52 Enabling Form Controls When Validated

Lecture 53 Exercise - Login Form Validation

Section 7: Project - Building A Journaling App

Lecture 54 Preview - Journaling App

Lecture 55 Scaffolding the App, Setting Up TailwindCSS Auto-Class Sorting

Lecture 56 Building the Tab Component (DaisyUI Tab Component)

Lecture 57 Building the Add Journal Entry Form Using DaisyUI Components

Lecture 58 Adding Input Validations to the Journal Entry Form

Lecture 59 Store the Journal Entry to the LocalStorage

Lecture 60 Show A Success Dialog After Publish

Lecture 61 Displaying Journal Entries in a Grid Format

Lecture 62 Improve Journal List User-Experience and Use Custom Font

Lecture 63 View the Journal Entry - Part 1

Lecture 64 View the Journal Entry - Part 2

Lecture 65 Delete the Journal Entry

Section 8: React Router - Building A Single Page Application (SPA)

Lecture 66 Introduction

Lecture 67 Installing and Setting Up React Router

Lecture 68 Building Router Navigation

Lecture 69 Route Parameters

Lecture 70 Managing Document Head, Title and Meta Tags

Lecture 71 Using React Helmet For Document Head

Section 9: Connecting to a Back-End API

Lecture 72 Introduction

Lecture 73 Understanding the Effect Hook

Lecture 74 The useEffect Dependencies

Lecture 75 useEffect Clean Up

Lecture 76 Fetching Data From Remote API

Lecture 77 Understanding the HTTP Requests

Lecture 78 Error Handling

Lecture 79 Async and Await

Lecture 80 Cancelling An HTTP Request

Lecture 81 Show A Page Loader

Lecture 82 Delete Data with HTTP DELETE Request

Lecture 83 Creating Data with POST Request

Lecture 84 Updating Data with PATCH Request

Lecture 85 Creating A Reusable API Client

Lecture 86 Creating A User Service

Lecture 87 Creating A Global HTTP Service

Lecture 88 Creating A Custom Hook For Data Fetching

This course is for beginners in front-end development who are eager to learn React as their preferred JavaScript library/framework..,Students who wants to learn how to leverage TypeScript in their React apps.,For learners eager to quickly master the core principles of React, aiming to begin developing React applications within just a few hours of instruction.