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 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 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 create a stateful checkbox with multiple selection using React. This lab will guide you through the process of rendering a checkbox list, updating its state, and passing the selected value/values to the parent component using a callback function. By the end of this lab, you will be able to create a reusable checkbox component that can be used in any React project.

In this lab, we will learn how to create a button with a ripple effect animation using React. The purpose of this lab is to help you understand how to use React hooks, such as useState() and useEffect(), to manage the state of the button and trigger the animation. By the end of this lab, you will be able to create interactive and visually appealing buttons for your React applications.

In this lab, we will explore how to create a dynamic list component in React using the DataList component. with this component, we can render an array of primitive values as an ordered or unordered list. By the end of the lab, you will have a better understanding of how to use Array.prototype.map() and conditionally render elements based on props 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 be creating a React component that renders a textarea with a word limit. The component will utilize React hooks such as useState(), useCallback(), and useEffect() to manage the state of the textarea and limit the number of words that can be entered. This lab provides a practical example of how to utilize hooks to create reusable React components.

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.

This project will lead you through creating a heatmap calendar in React, resembling GitHub's contribution graph. This kind of calendar can be a compelling way to visualize activity data over time, with the intensity of color indicating the level of activity on a given day. By the end of this project, you will have a clear understanding of how to integrate and use a calendar heatmap in a React application.

In this project, we will create a drag-and-drop puzzle game using React. This is an excellent project for beginners to learn about React components, state management, and handling user interactions. By the end of this project, you will have a functional puzzle game.

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