Search [Enter] to search. Click anywhere to close.

Articles listed under React

January 13th, 2023

Make A React Custom Hook For API Calls And Data Fetching

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 […]

Read more ⤏
September 16th, 2022

16 React Tips And Best Practices For Beginners

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 […]

Read more ⤏
September 11th, 2022

Build A React Password Strength Checker Component

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 […]

Read more ⤏
August 22nd, 2022

Build Your Own React Tooltip Component

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 […]

Read more ⤏
August 12th, 2022

Create A React Pagination Component

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 […]

Read more ⤏
April 29th, 2022

Create Your Own React Modal Component

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 […]

Read more ⤏
April 27th, 2022

Build A React Autocomplete Component

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: […]

Read more ⤏
April 11th, 2022

Create A Game Of Hangman In React

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 […]

Read more ⤏
January 12th, 2022

Implement Node/Express Sessions With Postgres

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 […]

Read more ⤏
December 1st, 2021

React Quiz App Example – A Tutorial

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 […]

Read more ⤏
November 22nd, 2021

10 Common React Mistakes And How To Avoid Them

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 […]

Read more ⤏
November 15th, 2021

Show And Hide Elements And Components In 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 […]

Read more ⤏
November 11th, 2021

Build A React Carousel Component With Infinite Scroll

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 […]

Read more ⤏
November 7th, 2021

A Simple React Accordion Component Example

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 […]

Read more ⤏
October 31st, 2021

React Calendar Component Example (With Events)

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 […]

Read more ⤏
October 18th, 2021

React With TypeScript: Typing Components

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 […]

Read more ⤏

23 Entry Level React Interview Questions

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 […]

Read more ⤏
September 3rd, 2021

React Tips For Beginners – How To Structure Components (3 Tips)

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 […]

Read more ⤏
February 28th, 2021

8 React Project Ideas For Your Portfolio

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 […]

Read more ⤏
February 8th, 2021

Using Apollo Client with React to make GraphQL queries

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 […]

Read more ⤏