Posts tagged "React"

Published: July 28 2023

Next.js 13 + App Router + MongoDB - User Rego and Login Tutorial with Example

How to build a simple user registration, login and user management (CRUD) application with Next.js 13 (App Router) and MongoDB using TypeScript
Published: June 29 2023

Next.js 13 - Fix for client component ('use client') hangs when fetching data in useEffect hook

I ran into a weird problem this morning that had me stumped for a few hours. One of my client components was causing Chrome to lock up and max out my CPU without giving me any error message.
Published: June 06 2023

Add Google AdSense to a Single Page App - React, Angular, Vue, Next etc...

I recently integrated Google AdSense into my AngularJS blog and this is how I got it working.
Published: April 25 2023

Next.js 13 + MySQL - User Registration and Login Tutorial with Example App

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with Next.js and MySQL.
Published: April 21 2023

Next.js Router - Listen to route (location) change with useRouter

How to detect route changes with Next.js Router to execute code on location change in a Next.js (React) client app.
Published: April 11 2023

Next.js 13 + MongoDB - User Registration and Login Tutorial with Example App

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with Next.js and MongoDB.
Published: March 30 2023

React Router v6 - Redirect with Navigate and useNavigate

A quick post on how to redirect with React Router v6 using the Navigate component and useNavigate hook.
Published: March 16 2023

Redux Toolkit createAsyncThunk - Dispatch a Redux Action from an Async Thunk in React with RTK

How to dispatch a new Redux action inside an async thunk created with Redux Toolkit's createAsyncThunk.
Published: March 02 2023
Last updated: March 30 2023

React 18 + Redux - User Registration and Login Example & Tutorial

Tutorial with example of how to implement user registration, login and CRUD functionality with React 18 and Redux.
Published: February 24 2023

React Router v6 - Catch All (Default) Redirect in React

A super quick post to show how to create a catch all (default) redirect to the home page in a React app using React Router v6.
Published: February 22 2023

React Router v6 - Listen to location (route) change without history.listen

How to detect route changes with React Router v6 to execute code on location change in a React app.
Published: February 21 2023

React + Axios - Add Bearer Token Authorization Header to HTTP Request

A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Axios
Published: February 17 2023

Redux Toolkit - Fix "The object notation for `createSlice.extraReducers` is deprecated" in React

How to fix the warning React Redux Toolkit deprecation warning "The object notation for `createSlice.extraReducers` is deprecated"
Published: February 17 2023

React Router 6 - Navigate outside React components

How to use the React Router 6 navigate() function outside React components
Published: February 16 2023

React + Fetch - Add Bearer Token Authorization Header to HTTP Request

A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Fetch
Published: February 16 2023

React 18 + Redux - Basic HTTP Authentication Example & Tutorial

Tutorial on how to build a simple Basic Auth login app with React 18, Redux and the Redux Toolkit.
Published: February 08 2023

React 18 Authentication with Node.js JWT API

How to implement authentication with a React 18 front-end app and Node.js back-end API
Published: February 08 2023

React 18 Authentication with .NET 6.0 (ASP.NET Core) JWT API

How to implement authentication with a React 18 front-end app and .NET 6.0 (ASP.NET Core) back-end API
Published: February 07 2023

React Hook Form 7 - Date Validation Example in React

This is a quick example of how to validate a date input field in React with React Hook Form.
Published: February 07 2023

React Hook Form 7 - Email Validation Example

This is a quick example of how to validate an email input field in React with React Hook Form.
Published: June 24 2022

React Router 6 - Private Route Component to Restrict Access to Protected Pages

This is a quick example of how to implement a private route component with React Router 6. The private route component is used to protect selected pages in a React app from unauthenticated users.
Published: June 22 2022

React - Access Environment Variables from dotenv (.env)

Quick example of how to create and access environment variables in React with a dotenv (.env) file
Published: June 21 2022

React + Redux - HTTP POST Request in Async Action with createAsyncThunk

How to send an HTTP POST request to an API in Redux using an async action created with the Redux Toolkit's createAsyncThunk() function
Published: June 16 2022

React + Redux Toolkit - Fetch Data in Async Action with createAsyncThunk

How to fetch data from an API in Redux using an async action created with the Redux Toolkit's createAsyncThunk() function
Published: June 15 2022

React 18 + Redux - JWT Authentication Example & Tutorial

Tutorial on how to build a simple JWT login app with React 18, Redux and the Redux Toolkit.
Published: October 07 2021

React - history listen and unlisten with React Router v5

How to register and unregister a location change listener in a React component with React Router v5.
Published: October 05 2021

React Hook Form 7 - Dynamic Form Example with useFieldArray

This is a quick example of how to build a dynamic form with validation in React with version 7 of the React Hook Form library.
Published: September 27 2021

React + Fetch - Logout on 401 Unauthorized or 403 Forbidden HTTP Response

A quick example of how to automatically logout of a React app if a fetch request returns a 401 Unauthorized or 403 Forbidden response
Published: September 25 2021

React + Axios - Interceptor to Set Auth Header for API Requests if User Logged In

A quick example of how to automatically set the HTTP Authorization header for axios requests from React to an API when the user is authenticated
Published: September 23 2021

React Hook Form - Reset form with default values and clear errors

An example of how to reset a React Hook Form with default values and clear form validation error messages.
Published: September 19 2021

React Hook Form - Set form values in useEffect hook after async data load

A quick example of how to set field values in a React Hook Form after loading data asynchronously (e.g. from an API request) with a useEffect hook
Published: September 17 2021

React + Fetch - Set Authorization Header for API Requests if User Logged In

A quick example of how to automatically set the HTTP Authorization header for fetch requests from React to an API when the user is authenticated.
Published: September 16 2021

React + Recoil - User Registration and Login Example & Tutorial

Tutorial on how to implement user registration, login and CRUD functionality with React and Recoil, including a live demo application and example back-end APIs built with Node.js and .NET.
Published: September 15 2021

React Hook Form - Password and Confirm Password Match Validation Example

An example of how to validate that a password and confirm password field match in React using the React Hook Form library
Published: September 13 2021

React Hook Form - Display custom error message returned from API request

A quick example of how to display a custom error message on a React Hook Form that is returned from an HTTP API request
Published: September 12 2021

React Hook Form - Submitting (Loading) Spinner Example

A quick example of how to display a loading spinner while a form is submitting with the React Hook Form library.
Published: September 11 2021

React + Recoil - Basic HTTP Authentication Tutorial & Example

This tutorial shows how to build a simple login application with React and Recoil that uses Basic HTTP authentication.
Published: September 10 2021

React + Recoil - Set atom state after async HTTP GET or POST request

A quick example of how to set Recoil state after an async HTTP request to an API
Published: September 09 2021

React - Redirect to Login Page if Unauthenticated

A quick post to show how to redirect unauthenticated users to the login page in a React app.
Published: September 08 2021

React - Catch All (Default) Redirect with React Router 5

A super quick post to show how to create a catch all (default) redirect to the home page in a React app that uses React Router v5.
Published: September 07 2021

React + Recoil - JWT Authentication Tutorial & Example

This tutorial shows how to build a simple login application with React and Recoil that uses JWT authentication.
Published: September 04 2021

Next.js - Required Checkbox Example with React Hook Form

This is a quick example of how to implement a required checkbox field in Next.js the React Hook Form library.
Published: September 03 2021

Next.js - Form Validation Example with React Hook Form

This is a quick example of how to setup form validation in Next.js with the React Hook Form library.
Published: August 31 2021

Next.js - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in Next.js with the React Hook Form library that supports both create and update modes.
Published: August 30 2021

Next.js - Redirect to Login Page if Unauthenticated

A quick post to show how to redirect users to the login page in a Next.js front-end (React) app.
Published: August 29 2021

Next.js - Basic HTTP Authentication Tutorial with Example App

How to build a simple full stack login application in Next.js that uses Basic HTTP Authentication.
Published: August 27 2021

React - How to Check if a Component is Mounted or Unmounted

This is a quick post to show how to track the mounted status of a React component so you can check if it's mounted or unmounted before performing certain actions.
Published: August 26 2021

Next.js - Alert (Toaster) Notifications

A tutorial and example showing how to implement alert / toaster notifications in Next.js.
Published: August 19 2021
Last updated: March 31 2023

Next.js 11 - User Registration and Login Tutorial with Example App

In this tutorial we'll go through an example of how to build a simple user registration, login and user management (CRUD) application with Next.js.
Published: August 04 2021

Next.js 11 - JWT Authentication Tutorial with Example App

This tutorial shows how to build a simple full stack login application in Next.js that uses JWT authentication.
Published: June 01 2021

Next.js - NavLink Component Example with Active CSS Class

This is a quick post to show how to create a custom NavLink component in Next.js that extends the built-in Link component to add the CSS className "active" when the href attribute matches the current URL.
Published: May 31 2021

Next.js - Make the Link component work like React Router Link

How to create a custom Link component that wraps the built-in Next.js link component to make it work more like the standard link component from React Router.
Published: April 29 2021

React Hook Form 7 - Required Checkbox Example

This is a quick example of how to implement a required checkbox field in React with version 7 the React Hook Form library.
Published: April 23 2021

React + Axios - HTTP DELETE Request Examples

A quick set of examples to show how to send HTTP DELETE requests from React to a backend API using axios
Published: April 22 2021

React + Axios - HTTP PUT Request Examples

A quick set of examples to show how to send HTTP PUT requests from React to a backend API using axios
Published: April 21 2021

React Hook Form 7 - Form Validation Example

This is a quick example of how to setup form validation in React with version 7 of the React Hook Form library.
Published: April 20 2021

Next.js 10 - CRUD Example with React Hook Form

This tutorial shows how to build a basic Next.js CRUD application with the React Hook Form library that includes pages that list, add, edit and delete records using Next.js API routes.
Published: November 11 2020

React + Fetch - HTTP DELETE Request Examples

A quick set of examples to show how to send HTTP DELETE requests from React to a backend API using fetch()
Published: November 02 2020

React + Fetch - HTTP PUT Request Examples

A quick set of examples to show how to send HTTP PUT requests from React to a backend API using fetch()
Published: October 28 2020

React + Facebook - How to use the Facebook SDK in a React App

This is a quick post to go through the steps to load, initialize and use the Facebook JS SDK in a React application.
Published: October 25 2020

React - Facebook Login Tutorial & Example

How to implement Facebook Login in React with an example app that allows you to login with Facebook and view/update/delete accounts registered in the React app.
Published: October 22 2020

React Router v5 - Fix for redirects not rendering when using custom history

If you're using React Router v5 with a custom history object (<Router history={history}>) and are experiencing issues like redirects not working properly or not rendering, it might be because of the version of the history library you're using.
Published: October 14 2020

React Hook Form - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in React with the React Hook Form library that supports both create and update modes.
Published: October 09 2020
Last updated: November 22 2021

React - CRUD Example with React Hook Form

This tutorial shows how to build a basic React CRUD application with the React Hook Form library that includes pages for listing, adding, editing and deleting records from a JSON API.
Published: October 05 2020

React - Required Checkbox Example with React Hook Form

This is a quick example of how to implement a required checkbox field in React with the React Hook Form library.
Published: October 04 2020

React - Form Validation Example with React Hook Form

This is a quick example of how to setup form validation in React with the React Hook Form library.
Published: September 29 2020

React - Dynamic Form Example with React Hook Form

This is a quick example of how to build a dynamic form with validation in React with the React Hook Form library.
Published: September 28 2020

React + Formik Dynamic Form Example

This is a quick example of how to build a dynamic form with validation in React with Formik.
Published: September 13 2020

React - Display a list of items

This is a quick example to show how to display a list of items in React.
Published: July 17 2020

React + Axios - HTTP POST Request Examples

A quick set of examples to show how to send HTTP POST requests from React to a backend API using axios
Published: July 17 2020

React + Axios - HTTP GET Request Examples

A quick set of examples to show how to send HTTP GET requests from React to a backend API using axios
Published: June 02 2020

React - Setup Development Environment

A quick post to show how to setup a React development machine.
Published: April 22 2020
Last updated: July 06 2020

React Boilerplate - Email Sign Up with Verification, Authentication & Forgot Password

How to build a boilerplate authentication system in React including email sign up & verification, authentication & role based authorization, forgot password & reset password functionality, view & update my profile section, and admin only section for managing all user accounts.
Published: April 21 2020

React Hooks + RxJS - Communicating Between Components with Observable & Subject

A quick example of how to communicate between React Hooks components using RxJS Observable and Subject.
Published: April 20 2020

React + Formik - Combined Add/Edit (Create/Update) Form Example

This is a quick example of how to build a form in React with the Formik library that supports both create and update modes.
Published: April 18 2020

Fetch API - A Lightweight Fetch Wrapper to Simplify HTTP Requests

This is a quick post to show how to create a fetch wrapper - a lightweight wrapper around the native browser fetch() function to simplify the code for making HTTP requests.
Published: April 17 2020

React + Formik - Master Details CRUD Example

This tutorial shows how to build a basic React CRUD application with Formik that includes master and detail views for listing, adding, editing and deleting records from a JSON API.
Published: April 11 2020

React Hooks + Bootstrap - Alert Notifications

This tutorial shows how to implement a simple reusable alert component using React Hooks, Bootstrap CSS and RxJS.
Published: March 26 2020

React Router - Relative Links Example

This is a quick example of how to navigate up levels with relative links using the React Router Link component.
Published: March 23 2020

React Router - Remove Trailing Slash from URLs

This is a super quick example of how to remove trailing slashes from URLs in React apps that use React Router.
Published: March 10 2020

React + Fetch - Fake Backend Example for Backendless Development

An example of backendless development with React and the Fetch API, includes "pass through" to real backend for unmocked URLs.
Published: March 02 2020
Last updated: August 31 2020

React Hooks + Redux - User Registration and Login Tutorial & Example

Tutorial on how to implement user registration and login functionality with React Hooks and Redux, including a boilerplate demo application and video on how to deploy to AWS.
Published: February 17 2020

React - Alert (Toaster) Notifications

A simple tutorial & example on how to setup alert / toaster notifications in React using RxJS and Bootstrap.
Published: February 10 2020

React - How to add Global CSS / LESS styles to React with webpack

The below steps show how to quickly add a global LESS / CSS stylesheet to your React application using Webpack.
Published: February 08 2020

React + Formik 2 - Form Validation Example

Quick example of how to setup form validation in React with the Formik 2 library. Includes validation for email, required checkbox and password/confirm password matching.
Published: February 08 2020

React + Formik - Required Checkbox Example

This is a quick example of how to implement a required checkbox field in React with Formik using the Yup object schema validator.
Published: February 01 2020
Last updated: April 22 2021

React + Fetch - HTTP POST Request Examples

A quick set of examples to show how to send HTTP POST requests from React to a backend API using fetch()
Published: January 27 2020
Last updated: May 12 2020

React + Fetch - HTTP GET Request Examples

A quick set of examples to show how to send HTTP GET requests from React to a backend API using fetch()
Published: January 10 2020

React + ASP.NET Core on Azure with SQL Server - How to Deploy a Full Stack App to Microsoft Azure

In this deployment tutorial we're going to setup a production ready Windows + IIS server from scratch on Microsoft Azure, then deploy a full stack React + ASP.NET Core + SQL Server application to it that supports user registration and JWT authentication.
Published: November 18 2019
Last updated: January 22 2020

React + Node.js on AWS - How to Deploy a MERN Stack App to Amazon EC2

In this tutorial we're going to setup a production ready web server from scratch on the Amazon EC2 (Elastic Compute Cloud) service, then deploy a custom MERN Stack application to it that supports user registration and authentication.
Published: July 18 2019

React + Node - Server Side Pagination Tutorial & Example

A simple example of how to implement server-side pagination in React with a Node.js backend API.
Published: April 10 2019

React + Formik - Form Validation Example

Quick example of how to setup form validation in React with the Formik library
Published: April 06 2019

React + RxJS (without Redux) - JWT Authentication Tutorial & Example

A Custom JWT Authentication Example built with React + RxJS (without Redux) and Webpack 4
Published: February 13 2019

React + RxJS - Communicating Between Components with Observable & Subject

A quick tutorial and example of how to communicate between components in React using RxJS Observable and Subject
Published: February 01 2019

React - Role Based Authorization Tutorial with Example

A Custom Authentication and Role Based Authorization / Access Control Example built with React and Webpack 4
Published: September 11 2018

React - Basic HTTP Authentication Tutorial & Example

A Custom Basic HTTP Authentication Example built with React 16, JavaScript and Webpack 4
Published: April 14 2018

React + npm - How to Publish a React Component to npm

Simple step by step guide on how to publish a React component to npm using Webpack and Babel
Published: April 10 2018

npm - JW React Pagination Component

A lightweight pagination component for React available on npm
Published: February 23 2018

npm - JW React Modal Dialog

A lightweight modal dialog component for React available on npm
Published: January 23 2018

React - Custom Modal Window / Dialog Box

Simple Modal Window in React. Custom example without the need for 3rd party libraries.
Published: December 07 2017
Last updated: June 18 2020

React + Redux - JWT Authentication Tutorial & Example

Tutorial on how to implement JWT Authentication with React and Redux.
Published: September 16 2017
Last updated: August 31 2020

React + Redux - User Registration and Login Tutorial & Example

Tutorial on how to implement user registration and login functionality with React and Redux, including a boilerplate demo application and video on how to deploy to AWS.
Published: March 14 2017
Last updated: April 23 2018

React - Pagination Example with Logic like Google

A React / ES6 Pagination example with logic like Google's search results
Supported by