React Components

In React components are the key unit used to build powerful web applications. It's vital to understand how components work, how to combine them and what's their lifecycle in order to be able to use React efficiently. This topic has a great selection of resources to get you confident with React components.

13 resources available

Compound React Components with Hooks + TypeScript

When writing React components, it always pays off to spend a little bit of time thinking about how another developer would use them. In this post, I'd like to dive a bit into Compound Components, a pattern for creating components that I've found to be a joy to use both as a creator and consumer. We'll [continue]

Tutorial by Martin Di Diego

Learn React By Making a Countdown Timer

This guide aims to help those familiar with DOM manipulation with jQuery to learn and transition to coding in React. We will be building a countdown timer in React and comparing it to a functionally similar version built with jQuery. [continue]

Tutorial by codethesite

How To Master Advanced React Design Patterns: Compound Components

To celebrate the official release of React 16.3, I have decided to share some techniques I have been using recently which have completely changed my approach to creating React components. Using these techniques I am able to design components that are completely reusable, and have the flexibility to use [continue]

Tutorial by Shaun David Hutch

Handling spacing in a UI component library

Building a highly consumable UI component library is no easy feat and this article will focus on one particular tricky aspect of it: outer component spacing. [continue]

Article by Chris Pearce

Single Responsibility Components: Object-Oriented Design in React

The Functional Programming (FP) aspects of React are fairly prominent, but components themselves are an example of Object-Oriented (OO) programming. In this episode, we'll look at how one idea from OO—The Single Responsibility Principle—can help us design and extract more readable, reusable, and maintainable [continue]

Video by Front End Center

React Slick carousel

Carousel component built with React. It is a react port of slick carousel [continue]

Library by Akiran

Contextual Components in React

Contextual Components are one of my favorite features in Ember. They allow you to expose components pre-wired with state and actions as part of a component's public API, without having to directly expose that state or those actions. This same pattern can be applied to React components using the Render [continue]

Article by David Tang

Basic React Component Communication – Parent-to-Child

There are multiple ways to make components communicate. Some can be more or less suited to your use case. This post focuses on the basic one: communication parent to child. [continue]

Article by Neil Murphy

How to write your first React.js component

The most important concept to understand in React.js is the component. A React component can be one of two types. It can be either a function component or a class component. Sometimes you will hear different terms to describe these two types, like stateless and stateful. Function components are also [continue]

Tutorial by Samer Buna

Extracting Logic from React Components

By looking through our components and finding standalone functions that we can pull out, we greatly simplify our component whilst increasing our test coverage and clarity of our application greatly. By pulling the functions into their own modules you are forced to consider which props are needed and [continue]

Article by Jack Franklin

Ways to compose React Components

React favors composition over inheritance. There are several useful ways to compose components in React. Composition is a way to get polymorphic behavior in a way that's often more flexible and easy to work with than is inheritance. If we want a component to behave differently but want to reuse some [continue]

Article by Jake Trent

React Components & Libraries.

Search engine to discover React libraries and components for any use. [continue]

Tool by Romuald Brillout

What is a React component / How to write React component / Communication between React components / Best practices to write a React component / React stateless components / Composing React components / React pure components / Rendering a React component / Writing highly reusable React components / React class components / React functional components