React + TypeScript: Essential Training

Focused View

Glenn Raya

8:01:40

728 View

1 - Introduction

1 - Welcome.mp4

01:34

2 - Prerequisites.mp4

01:07

2 - Getting Started

3 - What is React.mp4

02:20

4 - Setting Up the Development Environment.mp4

02:44

4 - Sublime Text.txt

4 - Visual Studio Code.txt

5 - Create a React App Using Vite.txt

5 - Create a fresh React Project Using CRA Create React App.txt

5 - Creating Your First React App.mp4

03:44

6 - Overview of Project Structure.mp4

02:51

7 - React Under The Hood.mp4

02:59

3 - React Components Essential Lessons

1 - React Components Quiz.html

8 - Introduction.mp4

01:11

9 - Create A React Component.mp4

05:19

9 - creating-react-component.zip

10 - React Fragments.mp4

04:13

10 - react-fragment.zip

11 - Displaying List of Data.mp4

06:46

11 - display-list-data.zip

12 - Conditional Rendering.mp4

04:01

12 - conditional-rendering.zip

13 - Handling DOM Events.mp4

07:57

13 - handling-dom-events.zip

14 - Working On Component State.mp4

07:58

14 - app.zip

14 - component-state.zip

15 - Passing Data Via Props.mp4

06:11

15 - component-state.zip

16 - Passing Functions Via Props.mp4

05:15

16 - passing-functions-via-props.zip

17 - Props.txt

17 - States.txt

17 - The Difference Between Props and State.mp4

02:15

18 - Passing Children To A Component.mp4

04:03

19 - Introducing the React Dev Tools.mp4

02:11

20 - Optional Props and Setting Default Prop Values.mp4

06:35

20 - begin-optional-props.zip

20 - final-optional-props.zip

21 - Exercise Build an Alert Banner Starting Project.html

21 - begin-exercise-message-box.zip

22 - Exercise Build an Alert Banner Solution.mp4

06:36

22 - final-exercise-message-box.zip

4 - Adding Styles To Components

23 - Introduction.mp4

00:38

24 - Styling with Vanilla CSS and Organizing Stylesheets.mp4

07:00

24 - begin-vanilla-css.zip

24 - final-vanilla-css.zip

25 - Fixing Style Conflicts with CSS Modules.mp4

05:01

25 - final-css-modules.zip

26 - Applying Inline CSS.mp4

02:09

26 - final-inline-css.zip

27 - Styled Components in React.mp4

05:59

27 - final-styled-components-react.zip

27 - start-styled-components-react.zip

28 - Using CSS Frameworks.mp4

09:15

28 - final-css-frameworks.zip

29 - React Icons and Other Assets.mp4

06:43

29 - final-react-icons-assets.zip

29 - start-react-icons-assets.zip

30 - Exercise Styling Cards.mp4

05:21

30 - final-exercise-styling-cards.zip

30 - start-exercise-styling-cards.zip

5 - State Management

31 - Introduction.mp4

00:57

32 - Understanding the State Hook.mp4

03:31

33 - State Structures.mp4

04:01

34 - Pure Components.mp4

03:19

35 - React Strict Mode.mp4

02:02

36 - Working with State Updating Objects.mp4

02:58

36 - final-updating-object.zip

37 - Article Spread Operator in JavaScript.html

38 - Working with State Updating Nested Objects.mp4

03:01

38 - final-state-management-update-nested-object.zip

38 - start-state-management-update-nested-object.zip

39 - Working with State Updating Arrays.mp4

02:38

39 - final-updating-array.zip

39 - start-updating-array.zip

40 - Working with State Updating Array of Objects.mp4

02:50

40 - final-update-array-objects.zip

40 - start-update-array-objects.zip

41 - Sharing States with Other Components.mp4

07:42

41 - final-sharing-component-state.zip

41 - start-sharing-component-state.zip

42 - Extracting Interface Props.mp4

03:26

42 - final-extracting-interface-props.zip

43 - Using Immer To Simplify State Updates.mp4

06:31

43 - final-immer-state-update.zip

43 - start-immer-state-update.zip

44 - Exercise Updating Object Nested Object Array.mp4

08:46

44 - start-exercise-update-array.zip

44 - start-exercise-update-array-object.zip

44 - start-exercise-update-nested-object.zip

44 - start-exercise-update-object.zip

6 - Working with Forms in React

45 - Introduction.mp4

00:41

46 - Building Forms and Handling Form Submissions.mp4

06:36

46 - final-react-forms.zip

46 - start-react-forms.zip

47 - Accessing Form Input Fields.mp4

09:21

47 - final-accessing-input-fields.zip

48 - Using the State Hook to Handle Input Fields.mp4

05:16

48 - final-useState-onChange.zip

49 - Quickly Build Forms Using React Hook Form.mp4

06:34

49 - final-react-hook-form.zip

50 - Validating Form Inputs.mp4

07:07

50 - final-validating-input-fields.zip

51 - SchemaBased Validation Using Zod.mp4

10:53

51 - final-validation-zod.zip

52 - Enabling Form Controls When Validated.mp4

05:29

52 - final-enabling-form-controls-validated.zip

53 - Exercise Login Form Validation.mp4

08:11

53 - final-login-form-validation.zip

53 - start-login-form-validation.zip

7 - Project Building A Journaling App

54 - Preview Journaling App.mp4

03:42

55 - Scaffolding the App Setting Up TailwindCSS AutoClass Sorting.mp4

08:30

56 - Building the Tab Component DaisyUI Tab Component.mp4

08:52

57 - Building the Add Journal Entry Form Using DaisyUI Components.mp4

07:42

58 - Adding Input Validations to the Journal Entry Form.mp4

13:38

59 - Store the Journal Entry to the LocalStorage.mp4

10:35

60 - Show A Success Dialog After Publish.mp4

04:40

61 - Displaying Journal Entries in a Grid Format.mp4

10:47

62 - Improve Journal List UserExperience and Use Custom Font.mp4

07:43

63 - View the Journal Entry Part 1.mp4

07:42

64 - View the Journal Entry Part 2.mp4

07:43

65 - Delete the Journal Entry.mp4

06:52

65 - Finished Journal App Github Repo.txt

8 - React Router Building A Single Page Application SPA

66 - Introduction.mp4

02:42

66 - Single Page Application SPA Example.txt

67 - Installing and Setting Up React Router.mp4

06:09

68 - Building Router Navigation.mp4

09:36

69 - Route Parameters.mp4

06:53

70 - Managing Document Head Title and Meta Tags.mp4

08:23

71 - Using React Helmet For Document Head.mp4

05:02

9 - Connecting to a BackEnd API

72 - Introduction.mp4

01:14

73 - Understanding the Effect Hook.mp4

04:08

74 - The useEffect Dependencies.mp4

10:23

75 - useEffect Clean Up.mp4

03:25

76 - Fetching Data From Remote API.mp4

09:07

77 - Understanding the HTTP Requests.mp4

03:19

78 - Error Handling.mp4

02:59

79 - Async and Await.mp4

04:07

80 - Cancelling An HTTP Request.mp4

03:47

81 - Show A Page Loader.mp4

05:14

81 - loader.zip

82 - Delete Data with HTTP DELETE Request.mp4

06:58

82 - starting-files-deleting-user.zip

83 - Creating Data with POST Request.mp4

08:13

83 - starting-files.zip

84 - Updating Data with PATCH Request.mp4

06:21

85 - Creating A Reusable API Client.mp4

05:05

86 - Creating A User Service.mp4

10:14

87 - Creating A Global HTTP Service.mp4

11:46

88 - Creating A Custom Hook For Data Fetching.mp4

06:23

Description

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

What You'll Learn?

Fundamentals of React with 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

Who is this for?

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.

A beginning ReactJS developer who want to utilize TypeScript to make their codebase less error prone.

What You Need to Know?

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)

More details

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 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 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. 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.
Who this course is for:
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.
A beginning ReactJS developer who want to utilize TypeScript to make their codebase less error prone.

User Reviews

Rating

average 0

Total votes0

Focused display

With nearly 14 years of experience as a full-stack web developer and a degree in Computer Science, I bring a wealth of expertise to the table. My skill set includes proficiency in Laravel, PHP, React, Vue, CSS, API Development, and UI/UX design.Over the years, I've actively participated in numerous projects, spanning from small-scale endeavors to enterprise-grade web applications. Additionally, I have extensive experience as a web designer, contributing to the aesthetic appeal and functionality of various digital platforms.Furthermore, I excel in managing and maintaining clients' VPS servers, ensuring optimal performance and security for their online assets.In summary, my comprehensive background and hands-on experience make me a valuable asset in developing, designing, and managing web projects of varying complexities.

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.