How to build a simple user registration, login and user management (CRUD) application with Next.js 13 (App Router) and MongoDB using TypeScript
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.
I recently integrated Google AdSense into my AngularJS blog and this is how I got it working.
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.
How to detect route changes with Next.js Router to execute code on location change in a Next.js (React) client 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.
A quick post on how to redirect with React Router v6 using the Navigate component and useNavigate hook.
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
Tutorial with example of how to implement user registration, login and CRUD functionality with React 18 and Redux.
Published: February 24 2023
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
How to detect route changes with React Router v6 to execute code on location change in a React app.
Published: February 21 2023
A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Axios
Published: February 17 2023
How to fix the warning React Redux Toolkit deprecation warning "The object notation for `createSlice.extraReducers` is deprecated"
Published: February 17 2023
How to use the React Router 6 navigate() function outside React components
Published: February 16 2023
A quick example of how to add a Bearer Token Authorization Header to an HTTP request in React with Fetch
Published: February 16 2023
Tutorial on how to build a simple Basic Auth login app with React 18, Redux and the Redux Toolkit.
Published: February 08 2023
How to implement authentication with a React 18 front-end app and Node.js back-end API
Published: February 08 2023
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
This is a quick example of how to validate a date input field in React with React Hook Form.
Published: February 07 2023
This is a quick example of how to validate an email input field in React with React Hook Form.
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.
Quick example of how to create and access environment variables in React with a dotenv (.env) file
How to send an HTTP POST request to an API in Redux using an async action created with the Redux Toolkit's createAsyncThunk() function
How to fetch data from an API in Redux using an async action created with the Redux Toolkit's createAsyncThunk() function
Tutorial on how to build a simple JWT login app with React 18, Redux and the Redux Toolkit.
Published: October 07 2021
How to register and unregister a location change listener in a React component with React Router v5.
Published: October 05 2021
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
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
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
An example of how to reset a React Hook Form with default values and clear form validation error messages.
Published: September 19 2021
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
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
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
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
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
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
This tutorial shows how to build a simple login application with React and Recoil that uses Basic HTTP authentication.
Published: September 10 2021
A quick example of how to set Recoil state after an async HTTP request to an API
Published: September 09 2021
A quick post to show how to redirect unauthenticated users to the login page in a React app.
Published: September 08 2021
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
This tutorial shows how to build a simple login application with React and Recoil that uses JWT authentication.
Published: September 04 2021
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
This is a quick example of how to setup form validation in Next.js with the React Hook Form library.
Published: August 31 2021
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
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
How to build a simple full stack login application in Next.js that uses Basic HTTP Authentication.
Published: August 27 2021
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
A tutorial and example showing how to implement alert / toaster notifications in Next.js.
Published: August 19 2021
Last updated: March 31 2023
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
This tutorial shows how to build a simple full stack login application in Next.js that uses JWT authentication.
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.
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.
This is a quick example of how to implement a required checkbox field in React with version 7 the React Hook Form library.
A quick set of examples to show how to send HTTP DELETE requests from React to a backend API using axios
A quick set of examples to show how to send HTTP PUT requests from React to a backend API using axios
This is a quick example of how to setup form validation in React with version 7 of the React Hook Form library.
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
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
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
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
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
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
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
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
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
This is a quick example of how to setup form validation in React with the React Hook Form library.
Published: September 29 2020
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
This is a quick example of how to build a dynamic form with validation in React with Formik.
Published: September 13 2020
This is a quick example to show how to display a list of items in React.
A quick set of examples to show how to send HTTP POST requests from React to a backend API using axios
A quick set of examples to show how to send HTTP GET requests from React to a backend API using axios
A quick post to show how to setup a React development machine.
Published: April 22 2020
Last updated: July 06 2020
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.
A quick example of how to communicate between React Hooks components using RxJS Observable and Subject.
This is a quick example of how to build a form in React with the Formik library that supports both create and update modes.
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.
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.
This tutorial shows how to implement a simple reusable alert component using React Hooks, Bootstrap CSS and RxJS.
This is a quick example of how to navigate up levels with relative links using the React Router Link component.
This is a super quick example of how to remove trailing slashes from URLs in React apps that use React Router.
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
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
A simple tutorial & example on how to setup alert / toaster notifications in React using RxJS and Bootstrap.
Published: February 10 2020
The below steps show how to quickly add a global LESS / CSS stylesheet to your React application using Webpack.
Published: February 08 2020
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
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
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
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
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
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.
A simple example of how to implement server-side pagination in React with a Node.js backend API.
Quick example of how to setup form validation in React with the Formik library
A Custom JWT Authentication Example built with React + RxJS (without Redux) and Webpack 4
Published: February 13 2019
A quick tutorial and example of how to communicate between components in React using RxJS Observable and Subject
Published: February 01 2019
A Custom Authentication and Role Based Authorization / Access Control Example built with React and Webpack 4
Published: September 11 2018
A Custom Basic HTTP Authentication Example built with React 16, JavaScript and Webpack 4
Simple step by step guide on how to publish a React component to npm using Webpack and Babel
A lightweight pagination component for React available on npm
Published: February 23 2018
A lightweight modal dialog component for React available on npm
Published: January 23 2018
Simple Modal Window in React. Custom example without the need for 3rd party libraries.
Published: December 07 2017
Last updated: June 18 2020
Tutorial on how to implement JWT Authentication with React and Redux.
Published: September 16 2017
Last updated: August 31 2020
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
A React / ES6 Pagination example with logic like Google's search results
