React

2 Ways to Render HTML Content in React and JSX

Updated: March 3, 2023 By: A Goodman

There might be times when you need to render HTML content in a single-page app made with React. For instance, you have a blog or a news website that uses React for the front end and…

2 Ways to Set Page Title Dynamically in React

Updated: March 3, 2023 By: A Goodman

This article shows you 2 approaches to programmatically changing the page title in a React web app. We will go through 2 examples: the first one uses self-written code, and the second one makes use of…

How to Create a Scroll To Top Button in React

Updated: March 3, 2023 By: A Goodman

For long web pages with a lot of content, a back-to-top button will be very useful. This button will make it easy and convenient for the user to return to the top of the page once…

React + TypeScript: Handling onFocus and onBlur events

Updated: March 3, 2023 By: A Goodman

This article walks you through a complete example of handling the onFocus and the onBlur events in a React project that is written in TypeScript. We are going to use modern React features like hooks and…

React: Passing Parameters to Event Handler Functions

Updated: March 3, 2023 By: A Goodman

React supports a lot of events and the names that you can hardly not know are onClick, onChange, onSubmit, onReset, onContextMenu, onDrag, onMouseOver, etc. This article shows you how to pass parameters to an event handler…

React + TypeScript: Drag and Drop Example

Updated: March 3, 2023 By: A Goodman

This article walks you through a complete example of implementing drag and drop in a React application that uses TypeScript. We are going to write code from scratch and not using any third-party packages. Example In…

React: Copy to Clipboard When Click a Button/Link

Updated: March 3, 2023 By: Napoleon

This article shows you how to copy some text to the clipboard when a user clicks on a certain button or link in your React application. We are going to walk through 2 complete examples corresponding…

5 best open-source WYSIWYG editors for React (2024)

Updated: March 6, 2024 By: Guest Contributor

WYSIWYG (What You See Is What You Get or Rich Text) editors are commonly used on many websites and web apps related to newspapers, blogs, e-commerce, forums, and online communities to help users publish and edit…

React: Firebase App named ‘[DEFAULT]’ already exists

Updated: August 26, 2022 By: Augustus

When developing a React application with the Firebase package, I ran into the following error: More information I got from my console: If you face the same error as mine, don’t worry. The reason why the…

React + MUI: Create Dark/Light Theme Toggle (updated)

Updated: January 19, 2023 By: A Goodman

Modern web apps often have both a light theme and a dark theme so that users can choose what works best for them. The light theme is suitable for daytime use, while the dark theme is…

React + TypeScript: Handling form onSubmit event

Updated: September 6, 2023 By: A Goodman

The example below shows you how to handle the form onSubmit event in React with TypeScript. We will use the new things, including functional components and hooks, and not use old stuff like class-based components. Example…

React & TypeScript: Using useRef hook example

Updated: June 8, 2022 By: A Goodman

The example below shows you how to properly use the useRef hook with TypeScript in React. This task may sound simple but it can be challenging for people who aren’t familiar with types and functional components….

1 6 7 8 9 10 11