Custom hooks in React can be extremely useful, so it’s no doubt a good idea to gain some familiarity with regards to writing your very own hooks. Let’s firstly go over the basics; what custom hooks are and how they can solve our problems. Then we’ll look at an example of how we can use […]

Here’s a list of 16 React tips and best practices to be aware of when working on your own projects and applications. In this article, we’ll look at tips that cover multiple different aspects: actually writing the React code, as well as some tips to help with your development workflow (and tooling) in general. Whilst […]

Let’s walk through a simple React password strength checker component that can be dropped into your form(s) as and when required. You can find a working example of this component over here: React password strength checker component example. What this component does The role of this password validation component is to essentially verify that the […]

Tooltips can be really useful. Essentially, the tooltip is a message or some other piece of information that displays upon hovering (or alternatively, clicking) some element with the user interface. Tooltips can be used to portray important information to the user in a clean and easily digestible manner. In this short guide, we’ll create our […]

In this brief tutorial, we’ll go over the basics steps required to create your very own pagination component in React. Here’s the finished component for you to follow along with: JSFiddle containing the React Pagination Bar Component. The pagination mechanism your app uses is very important. Without an effective component to handle this aspect for […]

Modals are very much a staple of the web. They are a handy way to use the screen’s available real estate to display content on-top-of content. Creating your own modal component in React is straightforward enough. This makes it a suitable task for React beginners to sink their teeth into, and it’s a good way […]

Autocomplete is a useful feature that’s also pretty fun to build in React. If your website or application has a search facility, it may be a good idea to include some sort of autocomplete functionality to assist your users and help them find what they are looking for more easily. To briefly summarize the functionality: […]

Hangman is a particularly suitable game for beginners to look at replicating or recreating in React (or within JavaScript in general, in fact). This is because the fundamentals of the game revolve around some very common web-dev operations, most notably; the searching of strings. On top of this, the developer will have the opportunity to […]

In this tutorial or guide, we’ll be implementing a Node/Express API as well as utilizing a Postgres database. Alongside this, we’ll create a single-page React app to consume this new API. The user will be able to authenticate with the app and have their session persisted. After following along with this article, you’ll have the […]

This article covers the creation of a simple React quiz app that should prove useful to entry-level React developers. You can view the quiz app here in JSFiddle. The quiz app is about as basic as it can get in terms of functionality, but it provides a solid foundation on which to experiment or to […]

When first starting out with a new language, framework or tool — it’s generally considered a good idea to look at some of the more common pitfalls that other developers are experiencing. You can then try to actively avoid making these same mistakes for yourself. Here’s a list of 10 of the more common React […]

Showing and hiding elements and components in React is straightforward enough. However, there are some caveats and some gotchas to consider in some scenarios. Let’s dive right in! Setting up a flag or indicator in state to track visibility The mechanism to show and hide elements in React should work in conjunction with the component’s […]

The carousel is a classic piece of functionality. It’s a mechanism that the user can utilize to scroll through slides of content, image-based or otherwise. Here’s the accompanying infinitely-scrolling React carousel example (accessible directly in JSFiddle). This carousel example provided is very much a “bare-bones” implementation. I’ve tried to capture the core functionalities in the […]

This article will walk through some of the key points and aspects of an accordion build within React. You can find the accompanying JSFiddle component over here: React accordion component example. This is a small and relatively simple component. But that’s why it’s a good example for React beginners to look at. Alongside the accompanying […]

In this article, we’ll go over the build of a React calendar component. This calendar can also display events. You can view the React calendar component example in question directly in JSFiddle. If you’re fairly new to React, don’t worry — building a React calendar component is fairly straightforward. It is, in fact, much easier […]

This article is focussed on using React with TypeScript. More specifically, we’ll be looking at typing React components in general: their state, their props, their return types and so on. So if you’re new to using React with TypeScript, or if you just need a refresher — this short guide should (hopefully) be of some […]

Here’s a selection of 23 entry level React interview questions. When preparing for any interview, it’s clearly important to have a good grasp on the fundamentals of the topic at hand. This selection of questions touches upon many of the fundamental aspects of React, from JSX to the virtual DOM to hooks. Difficulty wise, I’d […]

When just starting out, the goal is often to just create something that “works”. This is fine, but as your skillset starts to develop – you’ll want to more carefully consider how you are composing your React application. In React, a good understanding of component structure, or more specifically component composition, is one of the […]

Looking for some React project ideas to present within your portfolio? You’ve come to the right place! Effectively demonstrating your abilities is a crucial part of obtaining employment within the web development world. For React developers, having a fully functioning single page app that interacts with an external API could be an excellent place to […]

This article will walk through the initial setup of a React SPA (single page application). The app will communicate with a GraphQL endpoint using the Apollo Client. We’ll use React Router within our project to help demonstrate some important fundamentals. The article will cover some of the basic concepts of GraphQL (what it is, why […]