React + TypeScript: Essential Training

A brief introduction to what React is and how it helps front-end developers create modern reusable interfaces.

In this lesson, we will setup our development environment by installing NodeJS and choosing a suitable code editor, and some code editor recommendations at the end.

In this lesson, students will learn how to create their first React app using two options, the official Create React App, made by the React team, or using Vite, a modern, highly efficient build tool and development server for web projects.

In this lesson, viewers will explore the fundamental structure of a React project, including key files and directories like public, src, App.tsx, and main.tsx, package.json and others.

In this lesson, students will learn a simplified overview of how React works.

Introduction for React Components section.

Discover the basics of React by learning how to create your very first component, an essential building block for any React application.

Learn how React Fragments helps you keep your code clean and efficient by grouping elements without adding unnecessary HTML tags.

In this lesson, students will learn how to render a list of data using the map() JavaScript function.

In this lesson, we will explore how to render content on a page based on specific conditions in React.

In this lesson, we'll delve into managing DOM events in React, focusing on the widely utilized click event, a fundamental aspect across JavaScript frameworks.

Managing component state in React is the key to making any React applications handle interactive and dynamic data. In this lesson, we will take a look at how to setup and manage component states.

In this lesson, we will learn the basics of passing data to child components via props. This is an essential topic, as it is the foundation of building dynamic components in React.

In the last lecture, we learned about passing data via props which the child components can use. In this lesson, we are going to pass functions as props to the child components, and notify the parent component about the events that took place and respond to those events.

In this lesson, we are going to take a quick look at the differences between props and states in React. Since both hold data, it is essential to know the difference between the two.

In this tutorial, learners will delve into the process of transferring HTML elements into a component using the concept of "children". We will employ the ReactNode class, which enables the passing of various elements, beyond just simple data types like strings, into a component. This approach allows a child component to receive data that includes other HTML elements from its parent, facilitating the rendering of the HTML structure on the page.

This lesson will quickly introduce the React DevTools. A very useful browser extension that is used for inspecting and debugging React applications.

In this lesson, we are going to talk about making a prop optional and providing a default value for a prop if none was provided by the consumer or the parent component. Making our application more reliable.

Here is the solution to the Build an Alert Banner exercise. You can follow along as I show you my solution to the problem.

A brief introduction about the topics we are going to cover in this section.

In this lesson, we are going to talk about how to style your components with the classic Vanilla CSS methods and will quickly take a look at organizing your stylesheet files.

In this lecture, we will explore how can we fix style conflicts, a common CSS problem when working on vanilla CSS or just plain CSS.

This lesson will quickly demonstrate how you can add inline styles to React components.

In this lesson, we are going to learn how we can use CSS in JavaSscript, particularly using the styled-components library to make this process easier.

In this video, we are going to take a look at a couple of well-known CSS frameworks and libraries which you can use to quickly style your React components.

In this lesson, we will learn how to use the free and open-source SVG icons library called React Icons. We will also cover loading assets from the /public and /src/assets folder.

An introduction to the state management section.

Let's spend some time to understand React's state hook, the recommended approach when working with states in React and more.

In this lesson, we'll explore the best practices when structuring your state hooks, the things you need to be aware of, and some things you should avoid.

In this lesson, students will learn what is "pure functions" or "pure components" an essential concept in computer science in general which is also applied when working on React projects.

This lesson will quickly talk about the importance of strict mode during development to help catch potential problems in our application.

In this lesson, we will explore how to update an object in React and some good practices.

In this lesson, we will learn how to update nested objects and some things you need to consider when structuring your object state.

In this lecture, we will explore how we can manipulate an array state.

In this lesson, we are going to tackle updating an array of objects, a little more complicated state structure than simple arrays and object.

In this lesson, we are going to learn how to share a component's state with other components that need the same data. We are also going to tackle how to notify the parent component about an event that happens from its child components.

In this lesson, we are going to improve what did in the last lesson by extracting the interface props to its own dedicated file for reusability.

In this lesson, we are going to take a look at an alternative way to update an object or a nested object using Immer, a third-party library to make updating states easier and more readable.

Now it's time to put what we learned from this section into practice, this video is composed of three exercises in one, do your best to complete each exercise on your own, and if ever you get stuck, you can always follow me along as I solve the problems.

An introduction to Working with Forms in React section.

In this lesson, we will create a basic form, then we will tackle handling the form submissions in React.

In this lesson, we are going to discuss how we can access the value of our form input fields, as well as tackle another useful hook in React called useRef.

In this lesson, we are going to use the state hook (useState) to store the input values to the state and use another form event called onChange() function to bind the input's value to our state.

In this lesson, we are going to take a look at how we can simplify the handling of our form input fields by using a package called "React Hook Form".

In this lesson, we are going to learn how to validate our input fields using React Hook Form.

In this video, we will learn how to improve our form validation by using a schema-based validation technique using Zod.

In this lesson, we are going to learn how to enable the form input fields only when certain validation requirements are met, like disabling the button if the form hasn't been validated yet.

In this exercise, try to create the validation logic for a login form. The exercise files are provided for this in the resources download section, or you can create your own if you prefer.

This is the preview of the journaling app that we are going to create from scratch. In this section we will be applying all of the techniques and concepts that you have learned so far, plus of course, some new topics to cover.

In this lesson, we are going to build the tab component for our journaling app. We are going to integrate DaisyUI to help us build our UI quickly.

In this video, we will construct our journal entry form, again, using DaisyUI's form control templates.

In this video, we are going to implement form validation using Zod.

In this lesson, we are going to persist the journal entry to the browser's local storage so the data will still be accessible after page refresh. We will also quickly learn how to use the reset() function of the useForm hook to reset the form after successful submission.

In this lesson we are going to make some UX improvements and will fix the tab switching issue.

In this video, we will create a functionality where we can view the actual journal entry when we click one of the grid boxes.

In this video, we will further improve the journal app by displaying the emotions icon at the top right side and putting the functionality where we can close the journal and return to the list of journals.

In this video, we'll demonstrate how to remove entries from our journal list object, save the updated list back to local storage, and display a notification when there are no published journal entries.

An introduction to Single Page Application or SPA, in this video, we will take a look at client-side routing using React Router and will take a quick tour of practical client-side routing example.

In this video, we are going to install and setup React Router, and will create our initial routes.

In this video, we are going to build the dedicated navigation bar and use the NavLink component provided by React Router fo client-side routing.

In this lesson, we will learn how to modify the page title and other data within the document head of our web pages.

In this lesson, we are going to use a package called React Helmet to make it easier to manage our document head data.

An introduction to Connection To A Backend API section.

In this lecture, we will explore the functionalities and significance of the useEffect hook to enhance our understanding of its pivotal role in React development.

In this lesson, we will explore React effect dependencies within the useEffect hook. We'll learn how to effectively manage and optimize component behaviors in response to changes in state or props. The lesson will cover how to specify dependencies correctly, the impact of different dependency array configurations, and common pitfalls to avoid. By understanding these dependencies, you'll gain the skills to build more efficient and reliable React applications.

In this lesson, we'll explore the React effect cleanup function, a crucial tool for preventing memory leaks and unnecessary re-renders in React components. You will learn how to properly use useEffect to handle side effects and implement cleanup processes to ensure your application remains efficient and bug-free.

In this lesson, we are going to learn how to request data from a remote API from the useEffect hook. We will also use a popular third-party promised-based HTTP client called Axios.

In this lesson, you'll grasp the fundamentals of HTTP requests, exploring how web browsers communicate with servers to retrieve and send data.

In this lesson, we are going to talk about how we can handle HTTP request errors when the request fails, and display the error on the page.

Learn how to effectively manage asynchronous operations in React using the async and await keywords, enabling you to write cleaner and more readable code for handling asynchronous tasks such as fetching data or making API calls.

In this lesson, we are going to utilize the AbortController class, which is built into every modern browser, to facilitate the cancellation of an HTTP request. This feature proves useful, for instance, when the user closes the page where the request is initiated, thereby conserving valuable resources that are no longer required.

In this lesson, we'll enhance our example by incorporating a loading spinner to indicate to users that a request is in progress. This way, they'll have visual feedback while waiting for the requested data to load.

In this lesson, we'll dive into executing HTTP DELETE requests on a remote API. Additionally, we'll explore two key strategies for handling updates: optimistic and pessimistic. These approaches offer distinct methods for managing data integrity and user experience in web applications.

In this lesson, we are going to create a new user by performing a POST request to our remote API. We will take a look at resetting the list of users back to its original state when something goes wrong with our request.

In this lesson, we are going to learn how to send an update to our remote API using the HTTP Patch request to update user data.

In this lesson, we are going to refactor our code. We will extract our API calls to an external service to make it reusable.

In this lesson, we will extract our user-specific functions to their own dedicated service class to further enhance our code's reusability. This approach will enable us to utilize the user service class in other components of our application if necessary.

In this lesson, we're enhancing our HTTP service class to be more versatile and reusable. By allowing it to accept any API endpoint, not just user-specific ones, we're making our code more adaptable to various scenarios. This improvement streamlines our development process, promotes code efficiency, and enhances the scalability of our applications. Let's dive in and create a robust global HTTP service class that empowers us to interact with any API endpoint effortlessly.

In this lesson, we are going to create our own custom hook to reuse the logic for fetching data from an API, so we can reuse it in as many components as needed instead of rewriting the same logic every time. This would drastically improve the reusability of our code.

In this introductory video, you will see a preview of the project we are going to publish on Vercel and Digital Ocean, so everyone from around the world can use the apps you have built.

In this video, we will deploy our example project to Vercel. First, we will learn how to deploy our project to Vercel using the command line interface, then towards the end using Vercel's import git repository feature.