Props are the main tool for communication between reusable components in React. You can use them to create interfaces for components, and easily pass data or functions to components. It is also thanks to props that we can call function from another component in React….
In this article, we will explain what components and elements are, and go over similarities and differences between them. Components vs elements in React Let’s start by explaining elements. What are React elements? React uses templating language JSX, which looks like HTML and allows you…
Let’s see how to add new line when working with strings in React. Three ways to create new line in React JavaScript methods Let’s say you have a long string with newline characters. Pieces of text between newline characters need to be rendered on a…
Let’s explore various ways to redirect to external URL in React. Some of these are obvious, some are not. Redirect to external URL in React react-router library As React developer, you may be tempted to use react-router for navigation. But React-router only works for internal…
First, let’s see how to get query params without using any library. Then we’ll see how to do so using react-router library, often used to implement navigation features in React. URLSearchParams to Get query params in React URLSearchParams is a public interface that you to…
Today you’ll learn how to use if statements to implement dynamic features with React. Using if statement in React If statement is a common JavaScript feature, and React is written in JavaScript. So you should be able to use if statement in React. Both types…
Styling elements is one of the most important tasks when building interactive apps in React. Familiar syntax of JSX allows you to easily add classes and inline styles like you’re used to in HTML. Let’s see how to apply more than one class in React….
If you’re coming from Vue or Angular, you might be wondering how to do two-way data binding in React. No need to worry, because In this article we’ll explore how to implement two-way binding in React. Mostly we will focus on binding input elements’ value…
Event handlers are crucial for building interactive web applications in React. As web developers, we are used to handling click, submit or change events. Focus and blur events are less common, but just as important. This guide will cover everything you need to know about…
Thanks to JSX, React developers can easily implement interactive features in React. For example: conditional styling, classnames, conditional values for attributes. React even allows you to conditionally add (or remove) attributes themselves. In this article, we will explore how to do exactly that. Conditionally add…