React Tutorials

React provides a structured learning path for building modern user interfaces. Our tutorials cover React components, state management, and hooks, suitable for beginners and experienced front-end developers. Through hands-on labs and practical examples, you'll gain experience in creating dynamic and responsive UIs. Our interactive React playground allows you to experiment with React features and see immediate results.

Switch Between Light and Dark

Switch Between Light and Dark

In this project, you will learn how to create a React application that allows users to switch between light and dark mode. The project will demonstrate the usage of the React Context API and the useContext hook to manage the global theme state.

React useFetch Hook

React useFetch Hook

In this lab, we will learn about the useFetch hook in React. This hook allows us to implement the fetch() method in a declarative manner, making it easier to fetch data from APIs and update the component state. We will create a custom hook that takes a URL and options, and asynchronously calls fetch() to update the response, error, and abort state variables.

Writing Markup with JSX

Writing Markup with JSX

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

React Hooks Introduction

React Hooks Introduction

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

Updating the Screen

Updating the Screen

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

Responding to Events

Responding to Events

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

Rendering React Lists Introduction

Rendering React Lists Introduction

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

Creating and Nesting Components

Creating and Nesting Components

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

Conditional Rendering in React

Conditional Rendering in React

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

Your First React Lab

Your First React Lab

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

Create a Notes App Using React

Create a Notes App Using React

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.

CSSJavaScriptHTMLReact

Building a React GitHub Heatmap Contributions

Building a React GitHub Heatmap Contributions

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.

JavaScriptCSSReact

Building a React Drag-and-Drop Puzzle Game

Building a React Drag-and-Drop Puzzle Game

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.

JavaScriptCSSReact

Building Christmas Wish List App with React

Building Christmas Wish List App with React

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.

JavaScriptCSSReactHTML

Build Interactive React Components

Build Interactive React Components

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.

JavaScriptReact

Create Responsive Business Card with React

Create Responsive Business Card with React

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.

JavaScriptReact

Implementing React Navigation Features

Implementing React Navigation Features

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.

ReactJavaScript

React Colour Filter Application

React Colour Filter Application

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.

JavaScriptReact

Prev
1
2
3
4
5
6
Next