Beginner React Tutorials
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 […]
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 […]
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 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 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 […]
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 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.
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, […]
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?
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`?
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.
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.
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 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!
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.
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.
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.
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.
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!
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.
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.
