React + Typescript: Essential Training
Published 5/2024
MP4 | Video: h264, 1920x1080 | Audio: AAC, 44.1 KHz
Language: English
| Duration: 8h 3m
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.
Free search engine download: React TypeScript Essential Training
