THE TUTORIAL LIBRARY
React.
55 practical lessons to explore at your own pace.
Adding Animation
Getting things to move.
Background Image Component
Reusable component for background images
Buttons from JSON
Creating Buttons from JSON file
Chrome Extension 101
Building a Chrome Extension
Conditional Hamburger Nav
Show hamburger on mobile with additional features
Conditional Render &&
Using && for conditional rendering
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
Creating a React Component to Display Cards from JSON
Creating a React Component to Display Cards from JSON This tutorial will guide you through creating a React component that takes a JSON file, converts it i
Creating Cards
Component to Display Cards from JSON
double negative
Tutorial: Using the Double Negation Operator (!!) in JavaScript Introduction: Welcome to FrOnt3nd Tutorials! In this guide, we'll explore the fascinating w
Dropdown Menu
Climbing up while Dropping down
Dropdown Menu 2
Dropping it down
Else, Ternary, Switch
Advanced conditional rendering techniques
EventHandler
Events handled
EventHandler =>
Events with arrow functions
Expanding Menu
Accordion / expandable menu
Fetching Data
Finding and Delivering
Fetching Table
Fetching data and creating a table
Fetching with SWR
Data fetching using SWR in React
For Loop
Basic iteration in React
Fragments <>
Fragments provide a lightweight syntax for grouping elements without extra DOM nodes
Framer-Motion Install
Installing Framer Motion for animations
Function Component
The basis for a component
Gallery with Grid
Picture this.
Hamburger Menu
Everyone needs one
hasOwnProperty()
Check if a specific property exists
Helmet for SEO
Managing SEO with Helmet in React
Hero Component
Creating a Hero section component
Highlighting Specific Words in Content using React
Highlighting Specific Words in Content using React In web development, you might want to highlight specific words in the content of a webpage to draw atten
Images <img/>
How to use <img/> in React
Introduction to Conditional Rendering
Using the if Statement in React: Conditional Rendering and Beyond In React, conditional rendering is a powerful technique that allows you to display differ
Keys
Track changes and updates within dynamic lists
Links Routes
Convert SPA to MPA with routing
map() in React
Mapping data in React
Markdown Coolness
Using Markdown in React applications
Menu Toggle
Toggle the menu visibility
Nav Bar
Leading the way
onClick Handler
Gotta Handle those clicks
OpenAI API
Integrating OpenAI API with React
Range
Range function to generate an array of numbers within a specified range
React App Trendy Setup
Setting up a React app with Vite, Tailwind, and React Router
Responsive Grid
Sturdy and Responsive
Scroll Events
Scrolling and triggering events
Search Bar
Searching all Day, all night
Serverless Functions
Implementing serverless functions
Setting Up a Serverless Netlify App with Prisma and PlanetScale
Sure, combining and refining the two tutorials you provided can yield a comprehensive guide to setting up a Prisma project with Netlify and serverless func
Simple Modal
Flashing back to 2000s
Step 1: Install Lucide React
Sure! Lucide React is a React component library for Lucide icons, which is an open-source icon library. It's super handy for adding icons to your React pro
Step 1: Setting the Table (Initial Setup)
Ah, mixing React into our serverless smoothie? Now that's a recipe for something deliciously modern and interactive! Let's whip up a React app that calls o
Tailwind CSS v4 - Complete Setup Guide
Tailwind CSS v4 - Complete Setup Guide Introduction Tailwind CSS v4 represents a significant evolution from previous versions, introducing a more streamlin
Tailwind Install
Installing Tailwind CSS in React projects
Using the .includes() Method in React: Searching and Matching Values
Using the .includes() Method in React: Searching and Matching Values React, a popular JavaScript library for building user interfaces, provides a powerful