React Components & Props

Find out how to render an HTML string in the DOM without escaping, using React.

The key prop is a mechanism for controlling component instances.

The middle ground between a props explosion and render props.

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!

You could say this topic has been done to death, but lately I’ve started using a technique that I don't recall having come across elsewhere.

With the release of React Hooks I have seen a lot of posts comparing class components to functional components. Functional components are nothing new in React, however it was not possible before version 16.8.0 to create a stateful component with access to lifecycle hooks using only a function. Or was it?

What's the difference between props and state in React?

This article will give you a quick introduction to some best practices within API design in general, as well as the definite list of 10 practical commandments you can use to create components that your fellow developers will love to use.

In this tutorial, we will step through the process of making a component reusable for our React application.

As you learn how to develop web applications using React, you will inevitably come across the concept of props. Understanding the way props work is essential to mastering React, but to grasp the concept fully is no easy thing.

There are quite a lot of articles about React out there speaking about controlled and uncontrolled components without explaining them. It has been quite similar for my articles, whereas I always tried to add at least one or two sentences explaining them, but in the end, I thought it would be great to have a brief tutorial just showing a simple example for controlled components in React.

This tutorial for List components in React gives you a step by step walkthrough on how to render a list of simple primitives, how to render a list of complex objects, and how to update the state of your list in React.

React Function Components – also known as React Functional Components – are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components.

There are important design principles that every component should strive to follow. But I don’t think style guides capture those principles well. We’ll talk about style guides first, and then look at the principles that really are useful.

In this guide, I want to give React beginners an historical overview of different React Components and React Patterns. The goal is to give clarity about what React Component Types developers have at their disposal, which are still used in modern React applications, and why some of them are not used anymore.

How do React function components differ from React classes? For a while, the canonical answer has been that classes provide access to more features (like state). With Hooks, that’s not true anymore.

Understand communication between React components: Render props/props, Context API, React-Redux/Redux and more.

React is a great library. It simplifies our work. We don't write all mutations ourselves, we describe result in render functions. Sometimes we have to render huge lists or optimize our code. In those case, we usually use PureComponent and memo. But, if we don't use callbacks correctly we can lose all profit from PureComponent. So, how to deal with callbacks and event listeners in React?

In this tutorial, I want to step through React’s Component Composition step by step by evolving examples around this React pattern.

Sure, you already know that you can pass children to React elements by nesting JSX tags. But what about the other 3 ways?

In this post, we’ll learn all about default props in React. It will help us not only become better developers but to provide a better experience for our users.

Today, let’s talk about the Avatar component.

Let’s start with a simple React component which renders an anchor tag.

React is Just Components ™️ - but there are tons of ways to make them. Let's dive in!

When it comes to React components, props are the API that developers consume. A good API should be obvious, something the developer can guess. You want to make it easier for the developer to implement their feature and move on.

In 2015, Dan Abramov wrote an article, Presentational and Container Components, that React new-comers misconstrued as commandments.

I've lost count of the number of times I forgot to bind this. Why do we need to bind this and how should we do it?

We will be building a simple React app which shows the real name of a superhero on a button click.

How to use props to pass data around your React components

The defaultProps object on React components doesn't have access to this.props. So how can I make default props depend on other props?

React makes it easy to pass children to reusable components. But what if those children need to receive data from the component that renders them?

Often times, the inability to debug a certain error stems from not understanding some foundational concept.

You already know how to implement conditionally rendering with React: just use JavaScript! This gives you a huge amount of power... to shoot yourself in the foot.

Keys help React identify which items have changed, are added, or are removed.

React calls the data passed between components props and we’re going to look into those in great detail.

Frameworks like Vue have the notion of “computed properties” – a way to derive some new, possibly complex data based on something passed in. This post covers how to achieve the same result in React.

You can pass JSX into any prop, not only the one named children, and not only by nesting JSX inside a component’s tag – and it can simplify data passing and make components more reusable.

In this guide, I want to explain React props in greater detail.

At what point does it make sense to break a single component into multiple components?

What it is, why it’s good, why it’s bad, and how to avoid common problems with it.

this in React is a reference to the current component. Usually this in React is bound to its built-in methods so that when you want to update state or use an event handler on a form, you could do something like this

Although not React specific, this technique has made our React code much simpler and easier to read. Say hello to class property initializers!

Are React’s Functional Components Worth The Cost?

Standardize your React development with these key decisions

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn’t recognize, React would just skip it.

Let’s dig in to PureComponent and understand why we should be using it.

In the previous screencast we took a React component that was doing too much and refactored it, splitting it into two components that are easier to maintain, use and test. Although I’d recommend watching that video first, you don’t need to have watched it to read this blog post.

React components have a lot of power and flexibility. With so many tools at your disposal, it is incredibly easy for components to grow over time, become bloated and do too much.

This part introduces an advanced list in React that will enable you to opt-in infinite scrolling and pagination.

This part introduces infinite scroll in React in an elegant way by using higher order components. You will implement an infinite scrolling higher order component.

The first part of the series covers the paginated List component in React.

What are functional, stateless components?

or How Logic Doesn't Always Need a UI

I am currently working on a React/Redux universally rendered application at work. It has some fun parts and I want to share what I've learned from building them.

React, Vue, Angular, or whatever. Components are the future and you should learn how to think in them. Here's why.

Swizec Teller talks about how components are the future of web development.

The key prop looks simple but can be tricky somtimes!