Latest Posts
Why is My useEffect Hook Running Twice in React?
As part of React Strict Mode, certain lifecycle functions will be ran twice, such as functions passed to useState, useMemo, or useReducer, or the whole body of a functional component, which might include your useEffect hook. If you’re unfamiliar with using hooks in React, check out our tutorial here. While you can disable this, and […]
How to use React Hooks to Fetch Data
If you are not already familiar with the process of fetching data from an API or with React Hooks, I recommend checking these articles on those topics: Fetching Data in React: https://upmostly.com/tutorials/react-how-to-fetch-data-from-api Introduction to React Hooks: https://upmostly.com/tutorials/react-hooks-simple-introduction Now that we’re on the same page in terms of familiarity with the concept of hooks and data […]
How to create a Search Component in React
Every website or web app probably needs search functionality for a better user experience. There are a bunch of packages available to implement a search bar in React projects, but they are not flexible, making them less customizable. In this tutorial, we will look at how to make a search component in React with the […]
React Hooks
Why is My useEffect Hook Running Twice in React?
As part of React Strict Mode, certain lifecycle functions will be ran twice, such as functions passed to useState, useMemo, or useReducer, or the whole body of a functional component, which might include your useEffect hook. If you’re unfamiliar with using hooks in React, check out our tutorial here. While you can disable this, and […]
How to Rerender a Functional Component in React?
Have you ever wondered how you can rerender the component in React to reflect new changes?
What’s useEffect in React?
useEffect is a React hook for side effects. Side effects or effects are the operations that can affect other components and can’t be done during rendering.
React Forms
Form Validation Using Custom React Hooks
Build a form validation engine using custom React Hooks, from scratch, without having to learn a single form library. Read on to learn how!
Using Custom React Hooks to Simplify Forms
Use custom React Hooks to build forms that require half the code to write, are reusable, and are much easier to read. Read on to learn more!
APIs and AJAX Requests in React
React AJAX Requests: How to Fetch Data
Sooner or later, every React developer needs to know how to make AJAX requests to fetch data from a server (make API calls). Let’s learn how!
Using Axios with React to Make API Requests
Axios is a library used to make HTTP requests from the browser. Read on to learn how to use Axios with React to make API requests and display the response.
Building React Components
Importing Components in React From Other Files: Step-by-Step Tutorial
React allows you to build very complex applications. But as your applications grow in size, your code can become messy and difficult to build on. Sometimes, we’d like to split different React components into logically separated files. This act of separating functionality is a common operation in almost any programming language, from Python to C++. […]
How To Use React Native Timer (Example Code)
Timers are very commonly used in React for all sorts of applications. They allow you to manipulate the order in which events occur. From the React Native Timer documentation, there are four types of timers: Timeout (delay) Interval (repeat with interval) Immediate (call as soon as possible) Animation (call when the browser is ready to […]
React Functional Components vs Class Components: When To Use, Basics
When you’re writing React components, you’re faced with a choice. Either functional components, or class components. Do you know what the similarities and the differences are? Which one should you use when?
React Event Handlers
How To Use React onDrag Event Handler (Example Code)
onDrag allows you to execute a function when a user drags a component. It is passed as a JSX attribute. onDrag Use Cases As its name suggests, onDrag fires whenever a React component is being dragged. This can be useful in web apps that require drag-and-drop functionality, for example the famous work management app Trello. […]
How To Use React onKeyPress (Example Code Included)
To handle key presses in React, we use onKeyPress. It is passed as an attribute in <input> elements, and can be used to perform actions for any event involving the keyboard, whether you want to call a function on any key press, or only when a specific key is pressed. Why Use onKeyPress? Use Cases […]
React onHover Event Handling (with Examples)
There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React.
Adding Multiple Functions Inside a Single onClick Event Handler
There are several ways to call muliple onClick events in React, each with its own pros and cons. Let’s explore each one and learn how they work in React!
Pass a Parameter Through onClick in React
A common thing you will want to learn in React is how to pass a value as a parameter through the onClick event handler. Read on to learn how!
React onChange Events (With Examples)
The onChange event in React detects when the value of an input element changes. Let’s dive into some common examples of how to use onChange in React.
React onClick Event Handling (With Examples)
In React, the onClick handler allows you to call a function and perform an action when an element is clicked. onClick is the cornerstone of any React app.
JavaScript
Do I know enough JavaScript to start learning React?
Many aspiring engineers are asking themselves the same question. Am I good enough with JavaScript to start learning React? You need to at have least a decent understanding of the main topics.
 in React applications)
How to use map() in React applications
Map is one of the most popular and widely used functions when working with React.
Javascript “bind” method
Learn Javascript bind method.
“this” Keyword in Javascript
Learn how to use “this” keyword in Javascript.
How Long Does it Take to Learn React?
React is one of the most popular JavaScript libraries out there. React gets over 10 million downloads a week from NPM, and is well-known as an essential skill to learn in web development. Less well known is how long React takes to learn. In this article, we’ll go over just that. Learning React can take […]
How to Check if Object is Empty in JavaScript
I’ll show you how to check if an object is empty in JavaScript. Checking if an object is empty is not as simple as checking if an array is empty.
React onHover Event Handling (with Examples)
There is no onHover event handler in React. Instead, we have the onMouseDown, onMouseLeave, and onMouseEnter events to perform onHover actions in React.
React Hello World: Your First React App
The best way to learn React is to re-create Hello World but for React. Let’s learn all there is to know about building a simple Hello World app in React!
How to Remove a Character from a String in JavaScript
A common form of string manipulation in JavaScript is to remove a character from a string. Let’s explore all of the ways we can do this in JavaScript.
JavaScript Substring: Extracting Strings (With Examples)
The JavaScript substring method returns part of a string that is specified through two parameters: the start character and end character of that string.
Web Development
Best Atom Packages for Front End Developers (Updated 2019)
Love Atom? Are you a front end developer? Then read on as I share the best Atom packages for front end developers (Updated November 2018).
How React Reignited My Love for Web Development
It’s about time I shared my reasons why I came back to web development after five years of iOS development, and why I attribute a lot of these reasons to React.
jQuery vs React: The Ultimate Comparison Guide
jQuery and React are both JavaScript libraries, but they each have their pros and cons. Read on to answer the jQuery vs React debate!