React Tutorials

In this project, we will create a simple Notes App using React. The app will allow users to add, edit, and delete notes. We will break down the development into several steps, ensuring that each step meets specific requirements and adds essential functionality.

In this project, we'll walk you through building a simple Pixel Art Animator using React. By the end of this guide, you'll have a basic pixel art editor where you can draw your pixel art and see the resulting animation. This project is beginner-friendly and provides a fun way to dive into the world of React and pixel art!

This project guides you through building a festive Christmas Wish List Builder web application using React. The app features a beautiful full-screen Christmas-themed background and a charming snowfall animation, enhancing the holiday spirit. Users can add wishes to a semi-transparent wish wall, and each wish is presented as a postcard. We'll use React for the frontend and CSS for styling and animations.

In this project, you will learn how to implement navigation features in a React application. You will create a simple application with a navigation bar and pages that can be navigated to using links.

In this project, you will learn how to create a personal business card using React. The project involves building a responsive and interactive web application that allows users to input their personal information and generate a customized business card.

In this project, you will learn how to build a colour filter application using React. The application will allow users to filter a list of colours by typing in the name of the colour they are looking for. This project will help you understand how to work with state management, event handling, and conditional rendering in React.

In this project, you will learn how to create a custom React Hook called useWindowSize to get the current window size and use it to conditionally render the navigation bar in a web application.

In this project, you will learn how to create a simple show/hide functionality using React. You will implement a button that toggles the visibility of an image on the page.

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 conditional rendering.

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 using hooks.

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 updating the screen.

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

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

In this lab, we will be building a limited textarea component using React. The purpose of this lab is to provide a hands-on experience in utilizing React hooks, such as useState() and useCallback(), to create a component that limits the number of characters a user can input in a textarea. By the end of this lab, you will have a functional textarea component that displays the character count and limits the number of characters a user can input.

In this lab, we will explore how to implement lazy loading images in a React application. Lazy loading improves page performance by delaying the loading of images until they are needed, reducing the initial load time and improving the user experience. We will use the Intersection Observer API and React hooks to create a reusable component that supports lazy loading images.