Jason Watmore's Blog A Web Developer in Sydney

Posts tagged "React Hooks"

Published:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

Next.js - Alert (Toaster) Notifications

A tutorial and example showing how to implement alert / toaster notifications in Next.js.
Published:
Last updated:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:

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:
Last updated:

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:

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:

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:

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:

React - Display a list of items

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

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:

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:
Last updated:

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:

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:

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:

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:

React Hooks + Bootstrap - Alert Notifications

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

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:

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:
Last updated:

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:
Last updated:

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:
Last updated:

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()
Supported by
Powered by MEANie | Hosted on DigitalOcean
© 2023 JasonWatmore.com | Privacy Policy