SkillUp September Flat 10% OFF, Use Code: SKILL10

Home Coding Ground Jobs Free Library Articles Corporate Training Teach w

0
Search courses, ebooks and Certifications...

React + TypeScript: Essential

Training
Modern Web Development: Mastering
Components, Forms, Routing, and API Integration
using React with TypeScript
Updated on Sep, 2024 Language - English Glenn Raya

Development , Web Development, Typescript

Lectures - 88 Resources - 13 Duration - 8 hours Lifetime Access 4.1 ★★★★ ★

Course Description
ReactJS + TypeScript: Essential Training is your beginner-friendly entrance into the exciting world
of web development, specifically tailored to make learning React with 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. 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 learn 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 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₹379.00
with external data
and services.
Start Learning
Deploying your application ₹4,079.74
might seem daunting, but we'll walk you through the process step-
30-days Money-Back Guarantee
by-step, ensuring you're ready to launch your project with confidence. 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 React with TypeScript, equipped with
the skills to embark on your development projects. ReactJS + 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.

Goals

In this course, I aim to equip students with a solid foundation in React and TypeScript, enabling
them to develop robust and scalable applications swiftly and efficiently. By focusing on the
essential aspects of React paired with TypeScript, I aim to deliver a comprehensive learning
experience without compromising on critical topics. Throughout this eight-and-a-half-hour
course, students will gain practical knowledge and hands-on experience, preparing them to
tackle real-world challenges confidently.

Prerequisites

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)

Show Less

Curriculum
Check out the detailed breakdown of
what’s inside the course
 Introduction ₹379.00
2 Lectures
₹4,079.74
30-days Money-Back Guarantee

Welcome Preview 01:34

Prerequisites Preview 01:07

Getting Started
5 Lectures

1. What is React Preview 02:20

Setting Up The Development Environment Preview 02:44

Creating Your First React App Preview 03:43

Project Structure 02:51

React Under The Hood 02:59

React Components
14 Lectures

Introduction Preview 01:11

Creating React Components 05:19

React Fragments 04:13

Display List of Data 06:46
₹379.00
₹4,079.74
Conditional Rendering 04:01
30-days Money-Back Guarantee

Handling DOM Events 07:57

Working on Component State 07:57

Passing Data Via Props 06:11

Passing Functions Via Props 05:15

The Difference Between State and Props 02:15

Passing Children To A Component 04:03

Introducing the React Dev Tools 02:11

Exercise - Build An Alert Banner 06:36

Optional Props and Setting Default Prop Values 06:35

Styling A Component
8 Lectures

Introduction Preview 00:38

Vanilla CSS and Organizing Stylesheets 07:00

Fixing Style Conflicts with CSS Modules 05:01

Applying Inline Styles₹379.00 02:09

₹4,079.74
30-days Money-Back Guarantee
Styled Components in JavaScript 05:59

Using CSS Frameworks 09:15

React Icons and Other Assets 06:42

Exercise - Styling Cards 05:21

Managing Component State

13 Lectures

Introduction Preview 00:57

Understanding State Hook 03:31

State Structure 04:01

Pure Components 03:19

Strict Mode 02:02

Updating Object States Preview 02:58

Updating Nested Objects 03:01

Updating Arrays 02:38

Updating Arrays of Objects 02:49

Sharing State Between Components 07:42
₹379.00
₹4,079.74
Extracting Interface Props 30-days Money-Back Guarantee 03:26

Using Immer To Simplify State Updates 06:30

Exercise - Update Object, Nested Object, Arrays 08:46

Building Forms In React

9 Lectures

Introduction Preview 00:41

Building Forms and Handling Form Submissions 06:36

Accessing Input Fields Preview 09:21

Using useState Hook and onChange Event to Handle Input Fields 05:16

Quickly Build Forms Using React Hook Form 06:34

Validating Form Inputs 07:07

Schema-Based Validation with Zod 10:52

Enabling Form Controls When Validated 05:29

Exercise - Login Form Validation 08:11

 ₹379.00
Project - Journaling App
12 Lectures
₹4,079.74
30-days Money-Back Guarantee

Preview - Journaling App Preview 03:42

Scaffolding the App, Setting Up TailwindCSS Auto-Class Sorting 08:30

Building the Tab Component 08:52

Building the Add Journal Entry Form Using DaisyUI

Preview 07:41
Components

Adding Input Validations to the Journal Entry Form 13:38

Store the Journal Entry to the LocalStorage 10:35

Show A Success Dialog After Publish 04:40

Showing the Journal Entries on Grids, Plus Using the useEffect Hook 10:47

Improve Journal List User-Experience and Use Custom Font 07:43

View Journal Entry 07:41

View Journal Entry Part 2 07:43

Delete Journal 06:52

The React Router - Client Side Navigation

6 Lectures
Introduction ₹379.00 Preview 02:42
₹4,079.74
30-days Money-Back Guarantee

Setting Up React Router 06:09

Building Router Navigation Preview 09:36

Route Parameters 06:53

Managing Document Head 08:23

Using React Helmet For Document Head 05:02

Connecting To A Back-End API

17 Lectures

Introduction Preview 01:14

Understanding the useEffect Hook 04:07

The useEffect Dependencies 10:23

The useEffect Clean Up 03:25

Fetching Data From Remote API Preview 09:07

Understanding HTTP Requests 03:19

Handling Errors 02:59

 Async and Await ₹379.00 04:07

₹4,079.74
30-days Money-Back Guarantee
Cancelling An HTTP Request 03:47

Show A Page Loader 05:14

Deleting Data 06:58

Create Data with POST Request 08:13

Updating Data with PUT/PATCH Request 06:20

Creating A Reusable API Client 05:04

Creating A User Service 10:14

Creating A Global HTTP Service Preview 11:46

Creating A Custom Hook For Data Fetching 06:23

Deploying To Production
2 Lectures

Introduction Preview 03:59

Deploying To Vercel 11:53

Instructor Details