Level Up Your React Skills

Upmostly brings you original React and JavaScript tutorials every week

Beginner React Tutorials
Advanced React Tutorials
All React Tutorials

Latest Posts

By Jesse Ryan Shue
How To Build React Dropdown Menu (Tutorial with Code Examples)

Dropdown menus allow you to declutter a web app and make navigation clean and intuitive. They allow you to fit dozens of potential selections within a small set of dropdown items. Building a React dropdown menu is a great way to learn React, so let’s get started! Building the Base Button We’ll first set up […]

By Jesse Ryan Shue
How To Use POST Requests in React (With Example Code)

React is not only a tool for building great frontends. It can also link up to APIs, creating endless possibilities for new functionality. React is a JavaScript library, so interfacing with APIs is the same as in vanilla JS. We’ll go over the ‘fetch()’ API in this article. It makes HTTP interfacing much easier with […]

By Jesse Ryan Shue
How To Use Background Images in React (With Example Code)

While basic text, shapes, and colors are great, we often need more in our web apps. Images are much more complex arrangements of text, shapes, and color, and can add a lot to your React app. In this article, we’ll learn how to use them. To use images in React, we use the style attribute […]

React Hooks

View all
By James Dietrich
React Hooks Guide: How To Use Tutorial, Use Cases, Examples

React Hooks are a newly proposed feature that lets you use state and life-cycle methods without writing a class component.

By Pierre Ouannes
How To Use The React useReducer Hook (with Examples)

useReducer is quite an advanced hook that beginners often don’t really know how to use. But this hook can be very useful for writing better and clearer code! If you’re not sure of what useReducer does, read on to learn more! What is the useReducer hook? You can think of useReducer as a “state” hook, […]

By Pierre Ouannes
How To Use React useRef Hook (with Examples)

What is the `useRef` hook? How do you use it? When should you use `useRef` vs `useState`? What caveats should you be aware of when using `useRef`?

React Forms

By James Dietrich
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!

By James Dietrich
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

By James Dietrich
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!

By James Dietrich
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

View all
By Jesse Ryan Shue
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++. […]

By Jesse Ryan Shue
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 […]

By Pierre Ouannes
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

By Jesse Ryan Shue
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. […]

By Jesse Ryan Shue
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 […]

By James Dietrich
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.

By James Dietrich
Multiple onClick Events in React (With Examples)

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!

By James Dietrich
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!

By James Dietrich
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.

By James Dietrich
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

By James Dietrich
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.

By James Dietrich
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.

By James Dietrich
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

By James Dietrich
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).

By James Dietrich
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.

By James Dietrich
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!