React Tutorials

Hi there, welcome to LabEx! In this first lab, you'll learn the classic 'Hello, World!' program in React.

Welcome to the React documentation! This lab will give you an introduction to writing markup with JSX.

Welcome to the React documentation! This lab will give you an introduction to using hooks.

Welcome to the React documentation! This lab will give you an introduction to updating the screen.

Welcome to the React documentation! This lab will give you an introduction to responding to events.

Welcome to the React documentation! This lab will give you an introduction to rendering lists.

Welcome to the React documentation! This lab will give you an introduction to creating and nesting components.

Welcome to the React documentation! This lab will give you an introduction to conditional rendering.

In this lab, we will learn how to use the useWindowSize hook in React to track the dimensions of the browser window. This hook enables us to create responsive designs and adjust the layout of our components based on the size of the user's screen. By the end of this lab, you will have a better understanding of how to use hooks in React and how to create more user-friendly applications.

In this lab, we will explore the useUnload hook in React, which allows us to handle the beforeunload window event. The purpose of this lab is to demonstrate how to use this hook to create a callback function that will be triggered when the user tries to close the window. We will also learn how to perform cleanup after the component is unmounted. By the end of this lab, you will have a better understanding of how to manage window events in React.

In this lab, we will explore the use of the useUpdate hook in React. This hook allows us to force a component to re-render when called, which can be useful for updating the UI with new data or changes. By the end of this lab, you will have a better understanding of how to implement this hook in your React projects to improve the performance and functionality of your applications.

In this lab, we will explore how to implement the setTimeout() function in a declarative manner using the useTimeout custom hook in React. This hook allows us to set up a timeout and clean it up easily, while also remembering the latest callback function. We will also see an example of using the useTimeout hook to create a one-second timer that updates the state of a component every second.

In this lab, we will explore the useToggler hook in React. This hook provides a simple and efficient way to create a boolean state variable that can be toggled between its two states. By the end of this lab, you will have a better understanding of how to use this hook in your React applications to create toggle functionality for your components.

In this lab, we will explore the use of the useSSR hook in React. This hook allows us to check whether our code is running on the browser or the server, and provides additional information about the environment such as the availability of workers, event listeners, and viewport. By the end of this lab, you will have a better understanding of how to write React code that is optimized for different environments.

In this lab, we will explore how to create a stateful Set object in a React component using the useSet hook. This hook provides a simple and efficient way to manipulate a set of values in a component and can be customized to fit the specific needs of the application. By the end of this lab, you will have a better understanding of how to implement and use this powerful hook in your React projects.

In this lab, we will learn how to use the useTitle hook in React to dynamically set the title of a web page. This hook is useful when building web applications that require changing the page title dynamically based on the content being displayed. Through this lab, we will explore how to implement the useTitle hook and use it in a practical example.

In this lab, we will explore how to use the useRequestAnimationFrame hook in React to animate a function, ensuring that it runs before every repaint. This hook is useful for creating smooth and efficient animations in web applications. We will walk through the process of creating the hook and implementing it in a simple counter component that updates in real-time.

In this lab, we will be learning how to use the useSessionStorage hook in React to persist stateful values to sessionStorage. We will learn how to initialize the value lazily, retrieve and store values using Storage.getItem() and Storage.setItem(), and how to update the state variable using the defined function. By the end of this lab, you will have a better understanding of how to use sessionStorage to store and retrieve data within a React application.