Beginner React Tutorials
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 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++. […]
‘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. […]
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 […]
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 are a newly proposed feature that lets you use state and life-cycle methods without writing a class component.
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, […]
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?
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`?
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.
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.
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!
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!
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.
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.
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 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 the useState and useEffect Hooks in minutes. A React timer component is a great way to learn React, so let’s begin!
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.
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.