Welcome to the course "React + TypeScript: Essential Training,” your safe and sure guide to creating great web applications. Whether you're a newbie or have some coding background, this course is for you and successfully introduces React and TypeScript without many technicalities.
In React + TypeScript: Essential Training, you will begin with the basics of creating components, which is the essence of making your dead web projects come alive. From laying out attractive and interesting looks to incorporating engaging touches, you will start with the tools to create attractive user-induced applications. Go beyond the basics and proceed to handling component states; enhance your form construction to produce app-friendly solutions.
That is not all; simplify the navigation through your applications with React Router, integrate with backend APIs for real-time data, and discover how to deploy projects without hesitation. If you are scared when hearing TypeScript, do not be, in this article, we will introduce you to what TypeScript is, how developers can apply it to their work, and how it will make your work easier as well as making your applications reliable. By the end of this course, "React + TypeScript: Essential Training,” you will acquire the knowledge of React and TypeScript necessary to dive into the world of Web Development.
React + TypeScript: Essential Training Table of Contents:
- Welcome (01:34)
- Prerequisites (01:07)
- What is React (02:20)
- Setting up the Development Environment (02:44)
- Creating your First React App (03:43)
- Overview of Project Structure (02:51)
- React Under The Hood (02:59)
- Introduction (01:11)
- Create A React Component (05:19)
- React Fragments (04:13)
- Displaying List of Data (06:46)
- Conditional Rendering (04:01)
- 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 Props and State (02:15)
- Passing Children To A Component (04:03)
- Introducing the React Dev Tools (02:11)
- Optional Props and Setting Default Prop Values (06:35)
- Introduction (00:38)
- Styling with Vanilla CSS and Organizing Stylesheets (07:00)
- Fixing Style Conflicts with CSS Modules (05:01)
- Applying Inline CSS (02:09)
- Styled Components in React (05:59)
- Using CSS Frameworks (09:15)
- React Icons and Other Assets (06:42)
- Exercise - Styling Cards (05:21)
- Introduction (00:57)
- Understanding the State Hook (03:31)
- State Structures (04:01)
- Pure Components (03:19)
- React Strict Mode (02:02)
- Working with State - Updating Objects (02:58)
- Article: Spread Operator in JavaScript (01:05)
- Working with State - Updating Nested Objects (03:01)
- Working with State - Updating Arrays (02:38)
- Working with State - Updating Array of Objects (02:49)
- Sharing States with Other Components (07:42)
- Extracting Interface Props (03:26)
- Using Immer To Simplify State Updates (06:30)
- Exercise - Updating Object, Nested Object, Array (08:46)
- Introduction (00:41)
- Building Forms and Handling Form Submissions (06:36)
- Accessing Form Input Fields (09:21)
- Using the State Hook to Handle Input Fields (05:16)
- Quickly Build Forms Using React Hook Form (06:34)
- Validating Form Inputs (07:07)
- Schema-based Validation using Zod (10:52)
- Enabling Form Controls When Validated (05:29)
- Exercise - Login Form Validation (08:11)
- Preview - Journaling App (03:42)
- Scaffolding the App, Setting Up TailwindCSS Auto-Class Sorting (08:30)
- Building the Tab Component (DaisyUI Tab Component) (08:52)
- Building the Add Journal Entry Form Using DaisyUI Components (07:41)
- Adding Input Validations to the Journal Entry Form (13:38)
- Storing the Journal Entry to LocalStorage (10:35)
- Showing a Success Dialog After Publish (04:40)
- Displaying Journal Entries in a Grid Format (10:47)
- Improving Journal List User-Experience and Using Custom Font (07:43)
- View the Journal Entry - Part 1 (07:41)
- View the Journal Entry - Part 2 (07:43)
- Delete the Journal Entry (06:52)
- Introduction (02:42)
- Installing and Setting Up React Router (06:09)
- Building Router Navigation (09:36)
- Route Parameters (06:53)
- Managing Document Head, Title and Meta Tags (08:23)
- Using React Helmet For Document Head (05:02)
- Introduction (01:14)
- Understanding the Effect Hook (04:07)
- The useEffect Dependencies (10:23)
- useEffect Clean Up (03:25)
- Fetching Data From Remote API (09:07)
- Understanding HTTP Requests (03:19)
- Error Handling (02:59)
- Async and Await (04:07)
- Cancelling An HTTP Request (03:47)
- Show A Page Loader (05:14)
- Delete Data with HTTP DELETE Request (06:58)
- Creating Data with POST Request (08:13)
- Updating Data with PATCH Request (06:20)
- Creating A Reusable API Client (05:04)
- Creating A User Service (10:14)
- Creating a Global HTTPS Service (11:46)
- Creating A Custom Hook For Data Fetching (06:23)
Who is this course for?
- Those new in front-end development but who have an interest in developing with React.
- The students who want to add TypeScript to their React projects.
- Such people can be those who want to grasp the fundamentals of React and begin building apps in a few hours.
Click on the links below to Download React + TypeScript: Essential Training!
در حال پاسخ به :