Beginner React Tutorials

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

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

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 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 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 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 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
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?

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`?

By James Dietrich
How to For Loop in React (With Examples)

Let’s explore how to write a for loop in React. Although we can write a for loop in React, ES6 provides the more appropriate map function for us to use.

By James Dietrich
React Filter: Filtering Arrays in React (With Examples)

How can we use React to filter an array? What is filter in React? I’ll answer all of these questions plus show you some examples to get you started.

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 Hello World: Your First React App (2019)

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!

By James Dietrich
Changing the Background Color in React

There are various ways of changing the background color of a React component, two of which we’ll explore: importing a CSS file and using inline styles.

By James Dietrich
How to Refresh a Page or Component in React

In React, there are two ways to refresh a page: updating the state and forcing a page reload. Let’s explore both methods of using React to refresh a page.

By James Dietrich
Build a React Switch Toggle Component

Learn how to build a React switch component using the native HTML checkbox input! You’ll learn plenty about React checkboxes in the process.

By James Dietrich
Build a Todo App in React Using Hooks

Build a simple todo app using React and React Hooks. This is a perfect starting tutorial for beginner and intermediate React developers.

By James Dietrich
Build a React Timer Component Using Hooks

Build a React timer component using the useState and useEffect Hooks in minutes. A React timer component is a great way to learn React, so let’s begin!

By James Dietrich
setInterval in React Components Using Hooks

Using setInterval inside React components allows us to execute a function or some code at specific intervals. Let’s explore how to use setInterval in React.

By James Dietrich
setTimeout in React Components Using Hooks

Use setTimeout in your React components to execute a function or block of code after a period of time. Let’s explore how to use setTimeout in React.