React Tutorials

Learn React

React is a JavaScript library for building user interfaces. It is used to create interactive and dynamic web pages. React is a popular choice for building modern web applications.

Tutorial Categories

Syntax

Core language structures and basics

Concept

Programming principles and theory

Function

Methods and operations

Component

UI elements and patterns

Layout

Page structure and positioning

Design

Visual styling and aesthetics

Pattern

Common programming solutions

Structure

Data and code organization

UI Components (8)

Background Image Component

Reusable component for background images

Buttons from JSON

Creating Buttons from JSON file

Creating Cards

Component to Display Cards from JSON

Expanding Menu

Accordion / expandable menu

Gallery with Grid

Picture this.

Hero Component

Creating a Hero section component

Search Bar

Searching all Day, all night

Simple Modal

Flashing back to 2000s

Project Setup (5)

Create React App

The 'Hello World' for React

Create React App 2

The old standby

Create React Vite

The way I do it

Create Vite (Same Dir)

Setting up Vite in the same directory

React App Trendy Setup

Setting up a React app with Vite, Tailwind, and React Router

Navigation Components (5)

Dropdown Menu

Climbing up while Dropping down

Dropdown Menu 2

Dropping it down

Hamburger Menu

Everyone needs one

Menu Toggle

Toggle the menu visibility

Nav Bar

Leading the way

Conditional Statements (4)

Conditional Render &&

Using && for conditional rendering

Else, Ternary, Switch

Conditional rendering techniques

Else, Ternary, Switch

Advanced conditional rendering techniques

If Statements

Using if statements in React

Event Handlers (4)

EventHandler

Events handled

EventHandler =>

Events with arrow functions

onClick Handler

Gotta Handle those clicks

Scroll Events

Scrolling and triggering events

Data Fetching (3)

Fetching Data

Finding and Delivering

Fetching Table

Fetching data and creating a table

Fetching with SWR

Data fetching using SWR in React

Icon Libraries (2)

Lucide-React

Using Lucide-React icons in React applications

Lucide-React Install

Installing Lucide-React for icons

Styling Libraries (2)

React Tailwind 4 install

Installing Tailwind CSS in React projects

Tailwind Install

Installing Tailwind CSS in React projects

Animations (1)

Adding Animation

Getting things to move.

Chrome Extension (1)

Chrome Extension 101

Building a Chrome Extension

Conditional Rendering (1)

Conditional Hamburger Nav

Show hamburger on mobile with additional features

Loops and Iterations (1)

For Loop

Basic iteration in React

Grouping Elements (1)

Fragments <>

Fragments provide a lightweight syntax for grouping elements without extra DOM nodes

Animation Libraries (1)

Framer-Motion Install

Installing Framer Motion for animations

Basics (1)

Function Component

The basis for a component

Object Methods (1)

hasOwnProperty()

Check if a specific property exists

SEO Tools (1)

Helmet for SEO

Managing SEO with Helmet in React

Text Styling (1)

Highlighting Words

Highlighting specific words

Media Components (1)

Images <img/>

How to use <img/> in React

Array Methods (1)

Includes()

Check whether a specified value is present within an iterable object

List Management (1)

Keys

Track changes and updates within dynamic lists

Routing Patterns (1)

Links Routes

Convert SPA to MPA with routing

Data Mapping (1)

map() in React

Mapping data in React

Content Rendering (1)

Markdown Coolness

Using Markdown in React applications

API Integration (1)

OpenAI API

Integrating OpenAI API with React

Utility Functions (1)

Range

Range function to generate an array of numbers within a specified range

Grid Systems (1)

Responsive Grid

Sturdy and Responsive

Advanced Backend Integration (1)

Serverless Function 102

Advanced serverless function techniques

Backend Integration (1)

Serverless Functions

Implementing serverless functions