I Built a Serverless Live Chat App with Next.js, Fauna, and WunderGraph for GraphQL Live Queries

A step-by-step guide to creating a scalable, real-time chat app using Serverless technologies, with a little help from NextAuth.js for GitHub sign-ins. Who needs WebSockets when you've got Live Queries?"

Data Fetching with Next.js 13's Bleeding-Edge Features — A Primer

The app directory, Streaming, Suspense, and hybrid Server and Client Components demystified — with a little help from GraphQL + WunderGraph.

How to Use ChatGPT as an Educational Chatbot in a Next.js Frontend

Can you use OpenAI's GPT-3.5 on your website as a chat assistant? You bet. Here's how to get it done with an Express server, WunderGraph as a BFF, and GraphQL.

How to Open a Link in a New Tab in React

How to Compose and Integrate APIs Together as if You Were Using NPM for APIs

Learn how to bring React's paradigm of Composability to the world of APIs, microservices, and databases — powered by Wundergraph, build-time GraphQL, and the BFF/API Gateway pattern.

Build a Multi-step Form With React Hook Form

A tutorial on how to build a multi-step form using React Hook Form.

React Router DOM: The Differences Between NavLink, Link, and <a>

How to use NavLink, Link, and <a> — explained with examples.

Build a landing page for your SaaS app using React, Chakra UI and Typescript

Overcome The Language Barrier in Your Surveys With Easy i18n Using SurveyJS

Discover how to use SurveyJS + React to build a properly internationalized, localized survey without using any i18n library at all.

10 Best React Notification Libraries in 2022

How to Use React.FC Children Prop in React 18 with TypeScript

How to deal with the new React 18 React.FC type and the children prop for TypeScript

How to Create a Search Bar in React

How to Build Data-Driven Surveys With React + REST API + SurveyJS

Build dynamic forms and surveys in React with the open-source SurveyJS and RESTful services.

React and Next.js is DEAD — Something New is (Finally) Replacing It (For Good)

Is this the beginning of the next revolution for JavaScript Framework? Apparently, YES!

Theming and Theme Switching in React

How to build and switch modular theme components with Design Tokens, React, the Context API, and Bit

React Navigation v6 with TypeScript

How I Created A Secure, Self-Hosted Survey In Minutes With React + SurveyJS

The importance of fully owning survey data in a privacy-focused world.

How to Handle the Mouse Hover Event in React

Addressing the absence of the onHover event handler in React

How to Create a Download Button Using React

A guide on creating a download button using React.

React 18 useEffect Double Call for APIs: Emergency Fix

React 18 API Calls need an Emergency Fix!

Custom Select Component in React and Styled Components

A guide on how to create a custom dropdown in React.

7 React Frameworks for Developers to Use in 2022

Comprehensive list of React frameworks for software developers to increase website speed and responsiveness in 2022.

Upload Files to Google Cloud Storage from React

A tutorial on how to upload files to Google Cloud Storage from React using Node.js and Multer

Meet React useEvent(): The Latest and Greatest React Hook

Hailed as the “missing piece in the original Hooks release”, useEvent() will change the way you write modern React.

How to Pass Data Between Pages in react-router-dom V6?

3 ways of passing data between pages in react-router-dom V6

Mock Your Hooks to Make Testing Simpler

Mocking with Jest can have a weird learning curve. Let's see how to mock those hooks.

Advanced Page Transitions in Next.js with Router Events and GSAP

How to Create a Toggle Button in React Using Conditional Rendering

Create a toggle button to show and hide data using the useState hook.

Step-by-Step Tutorial: React Redux 2022 with Hooks

Create a store from the ground up and integrate it with hooks.

The Difference Between useState and useRef in React

useState vs useRef in React: everything you need to know.

React with TypeScript or JavaScript — Which Side are You on?

JavaScript is the beloved child of frontend development, but TypeScript is the father of this beloved child. Learn to embrace it and get ahead in 2022.

Build Your React Component Library with TypeScript and Rollup

A simple guide on building your React Component Library to save precious development time.

An Introduction to the useId() Hook in React 18

The useId() hook is a new way to generate a unique random Id in React 18

How to listen to Formik onChange event in React?

Angular vs React vs Vue.js: Which is the Best Choice for 2022

Angular vs React vs Vue: Which is the Best Choice of Framework in 2022?

How to Make an Aviation React Component with Flight Arrivals and Departures from Airports

How to Use Environment Variables in Next.js

Take a look at how to use environment variables in Next.js.

Sort React Components Using .sort()

A guide on the process of rendering child components from an array of objects and creating a Sort button using React.

Let's Create a Pagination Data Table with React and an External API

A guide on how to create a pagination data table with React using react-data-table-component

How Many Hooks are Present in React?

The hook is a way to write less and cleaner code in React.

Create a Full-Stack Web App Using React and Node.js

React and Node.js: Build a Full Stack Web App From Development to Deployment in 5 steps

Reduce your React Applications Bundle Size by 75% with Compression

Which is Better? Class Component Or Functional Component in React?

Differences between functional components and class components in React.

The Evolution of Web Development 2022

Will JavaScript Frameworks Rule the World?

Create Your Own Layout Component in React

A guide on how to create basic layout components with Header, Footer, and content section.

React Conf 2021 - React Forget

A Christmas miracle - End of 'memo all the things'

How You Can Serve React Build Folder From an Express Endpoint

A guide on how to serve a React build folder from an Express endpoint.

How To Automatically Get Props Types in Next.js and TypeScript

Avoid boilerplate code with InferGetServerSidePropsType and InferGetStaticPropsType

Top-notch React Native talents: skills and tools

React Native — Infinite Scroll Pagination with FlatList

How to Use the Dialog Component with Headless UI and Tailwind CSS

Easily create a dialog component with Tailwind CSS

Build a Simple React Login Form using Event Handlers and React Hook

A simple beginner-friendly React login form tutorial using the onChange and onSubmit event handlers and the useState hook.

How to Structure Your React Redux App

Feature folder structure of the react-redux app for easy maintainability.

How to Create an Object of React Components

Why and How to Use Absolute Imports in React

An easy way to maintain clean code in React

Create Your Custom Drop-down Menu with a Search Option in React

How to create a custom drop-down menu with a search option using existing React libraries.

How to Create a “Read More” Collapsible Component in React

The -webkit-line-clamp way

React Query vs SWR

Which one should you choose for your next project?

Hosting a React App to EC2 using Nginx with SSL Certificate

Create User Acceptance Testing Environments on Pull Request for React Apps

How to create a UAT environment for a React application every time a PR is created to the default branch.

How To Keep Component State Across Pages in Next.js

Using the session storage & useLayoutEffect

How to Use React-Native-Image-Picker

How to select media from the gallery or camera

Render React Cards and Images Dynamically

Using JavaScript map()

How to Use Callback in the useState() Hook?

Use Callback function in React's useState()

5 useEffect Infinite Loop Patterns

Redux Toolkit -The Standard Way to Write Redux

Redux Toolkit, Store, Create Slice, Feature Folder

Run Python Code in React with Pyodide

How to Run Python Code in the Browser with Web Assembly, React, and Pyodide

Create a Country Select Component with React

How to create a country select dropdown in React using Material-UI and i18n-iso-countries.

How to Use Web Workers in React

What are web workers, why use them, and how to implement them in React?

How to Handle Network Connection in Your React Native App

How to Dynamically Load Scripts in React

Implement Debouncing in React in 3 Different Ways

10 Ways to Host Your React App For Free

Here are the 10 services that provide free hosting for your React App.

How to Create a Custom Cursor in React

Part 1: How to create a custom cursor in React without any module

How to Create a Ticket Booking Interface with React

How to Deploy React App with S3 and CloudFront (Updated for 2021)

Build a Blog App with React — Intro and Setup

Part 1: In the first part, we deal with the basics of the project and set it up.

How to Create a Page Load Animated Loader in React

Build a ToDo List App using React Native

How to Pass Props from Child to Parent Component in React

Learn this neat little trick to pass chunks of props back up the component tree!

Hiding DOM Elements in React Based on Scrolling

Using Zustand and TypeScript to Make a To-Do List in React

Today, let's learn how easy Zustand can make it to manage global client-side state in React by making a to-do list with it.

Creating an Interactive Background in React with Particles.js

A tutorial for making responsive and elegant interactive backgrounds in a few simple steps.

Basic React Login using External API

Custom Hook in React for calling API — useApi

5 Advanced React Patterns

An overview of 5 modern advanced React patterns, including integration codes, pros and cons, and concrete usage within public libraries.

HTTP Interceptors in React

Write supercharged interceptors for your React app.

How to Capture Images Using React Webcam

Passing Data From Child to Parent Component in TypeScript React

Generate 10x traffic from Google using Programmatic SEO with Next.js

Dealing with Code Splitting Network Failures

Reloading code split chunks to attempt to recover from network failures.

How to Migrate an existing React Web App to Desktop App with Electron

Create a Custom Video Controller Using ReactPlayer

Styling React Forms with CSS

How to Setup Path Resolving in Vite

A Guide to React Lazy Loading

A Guide to Code Splitting for React Components

How to Build a Contact Form in React that Sends Emails

How to Use The Autocomplete Component in Material-UI

Enhance your text input with a list of suggested options

How to Clone an App from GitHub

Clone and run a React app with this detailed tutorial

Testing React Hooks

A guide to using React Hooks Testing Library

How to set up SonarQube locally on a React TypeScript Project

Create a React App from Scratch in 2021

Become a better coder by learning what create-react-app is doing under the hood.

How to Upload Files to AWS S3 in React

In 2 different ways

Connecting React with LocalStorage

A Guide to Creating a LocalStorage React Hook

Creating a Chrome Extension with React

React Fast Refresh — The New React Hot Reloader

A Comprehensive Guide to Using React Fast Refresh

Improving Webpack Developer Experience

With Create React App's React Developer Utilities

How to Setup and Add Google Analytics to your React App

The Complete Full Stack Web Developer RoadMap 2022

The ultimate guide to becoming a modern full-stack web developer.

Storybook Snapshot Testing

Automatic Jest Snapshot Testing with Storybook Stories

Compress Images Before Upload in React with React Image File Resizer

How to manipulate our image before uploading in a React app.

How To Reload a Page Whenever a User Makes a Change with React/Redux

Using forwardRef with React hooks

Document Your React Applications The Right Way

A step-by-step guide on properly documenting our React applications

Build an Auto Logout Session Timeout with React Hooks

A Guide to Documenting Controlled Components with Storybook

A Guide to Managing External Storybook State

How to Create a Custom Table Component in React

JavaScript Frameworks, Performance Comparison 2020

The ultimate performance battle between JavaScript frameworks

React 17: New JSX Transform

A guide to integrating the new JSX Transform

createAsyncThunk in Redux-Toolkit

Dispatching async actions never looked so good

Create Editable HTML in React

How To Embed VSCode Into A Browser With React

5 Tips to Perfect React Testing Library Queries

My strategy to retrieve any element with the Testing Library API

Generating PDF from Images on the Client-side With React

Convert images to PDF on the frontend with no server

Testing React Router with Jest

How to write unit tests that check if you're routing requests correctly using React Router with Jest

Simulate Browser Interactions with Testing Library's UserEvent

A guide to Testing Library's UserEvent API

How to Create, Download, and Upload Files in React Apps

No server needed!

Create a Browser with React.js and Electron

How To Alert A User Before Leaving A Page In React

Here Are 13 Advanced React Dev Interview Topics

A collection of topics that are frequently asked in React Front End Developers Interviews

Building an Animated Counter with React and CSS

A guide on how to create your own version of an animated counter component that you come across all over the web

Using React Hook Form in component tests

The Advanced Way to Style with Styled Components

A more in-depth look at the power of styled-components

The Modern Way to Style with Styled Components

An in-depth look at the power of Styled Components

A guide to creating a React app without create-react-app

Creating a React App from scratch

Using React's useEffect Hook to Fetch Data and Periodically Refresh The Data

Interaction Testing with React Testing Library

A window into React component testing

Public, private, and role-based routes in React

How to Create a Slider in JavaScript

Learning Web Development in Practice

How To Avoid Prop Drilling in React Using Component Composition

No Redux or Context API

Stripe Payment Form with React and Material-UI

Part 4 - Implement Stripe

How to Use React Router with Layouts: A New Approach

Using Array to Make Router in a Simple React App

Creating a Confirm Dialog in React and Material UI

Creating a generic text-input component with React

Gracefully managing forms and input values in React State (Part II)

How to display images from local assets/images folder when working with React

It's not as straightforward as it might seems to be

React: Updating a value in state array

How to update just one value in an array of objects in a state

How to Pass Data From One Component to Other Component in React?

Passing data from one component to another component

How to View Your React App on a Mobile Device

If you have ever worked on a React project, one important thing that you will more than likely have to tackle at some point is the display of your website for mobile users. You can, of course, accomplish this through the use of media queries and the in-browser display, but what if you want to see your project on your own device to see how it really looks? Today, we will talk about how to do just that.

I created the exact same app in React and Svelte. Here are the differences.

React vs Svelte. Finally, a side-by-side code comparison! Because you've heard the fuss about Svelte, and now you want to know what the hype is all about.

How to use async function in React hook useEffect (Typescript/JS)?

Set up React JS with ESLint, Prettier and Airbnb

One of the easiest way you can improve your code is to use a linter!

Building a Point of Sale system with Node & React

Build the front and back end of a real-time application with React and Node!

Can you console.log in JSX?

TLDR: Embed the expression

How to loop through arrays in React

When should I use curly braces { } and parenthesis ( ) in React?

In the beginning of your career when learning React and ES6 JavaScript syntax, it can be confusing when to use curly braces { } and when to use parenthesis ( )

You Probably Don't Need act() in Your React Tests

What you should do instead.

What Is The Best Way To Display A PDF In A Web App?

What is Ref Forwarding?

Passing refs to a child component

Understand Derived State in React

Learn about the hidden risks and how we can benefit from understanding them.

The Practical Guide to React Testing Library with TypeScript

Testing local storage with testing library

How to test changes to the local storage on synchronous cases and asynchronous ones using the testing library.

How to Send WhatsApp Messages From Your React App Easily

A very simple way to send messages on WhatsApp web in React.

React Tips — Async and setState

React onChange with input field & button

React Infinite Scrolling and Lazy Loading

Infinite Scrolling — Infinite scrolling is a concept used by many sites to enhance user experience and performance. In infinite scrolling, the sites load with some data and as the user keeps on scrolling, more and more data gets loaded. This concept saves time since data is loaded in parts and enhance performance as all the components need not be rendered all at once.

React Hooks and the “Observer” Pattern

How to integrate the “Observer” pattern when using React Hooks

React and TypeScript: Generic Search, Sort, and Filter

A step-by-step guide leveraging the awesome powers of TypeScript generics to implement reusable searching, sorting, and filtering.

Light and Dark Mode in React Web Application with Tailwind CSS

How to make a simple React web application using Tailwind CSS

How to Use the Geolocation API in Your React App

Get the user's coordinates and use them in your next React app

How to style <input/> field in React

Style that ugly generic Choose File button in React or any other framework

How to Push or Append an Element to a State Array with React Hooks?

How to convert any web page into a React web page

How to Animate with CSS Keyframes (in React)

How to Add a File Input Button and Display a Preview Image With React

Using the Material-UI library and the URL object

Create a Dropdown Menu Using Next.js & Headless UI

Part 6: Using the Next.js Link component.

Extend Material-UI theme in TypeScript

DangerouslySetInnerHTML in React JS Explained

Create A Hash Anchor Link Effect With React-Router

ComponentDidMount and useEffect Are Not The Same. Here's Why

Building a pagination component in React with TypeScript

How to create a pagination component in react with TypeScript

Let's Build a MERN Stack E-Commerce Web App

Part 1: Setting up the Project

Data Fetching with React Query & Axios

Implementing Hooks for Furry HTTP Requests in react-query

Quickly Deploy Your React App On Google's App Engine

This is a quick guide to make your app go from local to world-wide in five high level steps!

7 Free React Templates You can Use for Your Projects

Awesome React templates and themes you can start with to build your next project.

6 Best React Data Visualization Libraries

Level Up Your React Projects in No Time