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.
Posts tagged "React Hooks"
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 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 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: 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 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 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 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: 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 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 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 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()