Build a React component

At a glance

Component form

A function returning markup

Input mechanism

Props

Overview

A small React component can turn one clearly defined part of an interface into reusable code. Begin with the content and inputs it needs, return meaningful markup, and add interaction only where the component must respond to user actions or changing state.

1. Define its responsibility

Choose a concrete interface element, such as a labeled status card. List the data supplied by its parent and decide which content can remain static before introducing state or additional abstraction.

2. Render meaningful markup

Write a component function with a capitalized name and return JSX using appropriate HTML elements. Read its inputs through props so callers can reuse the component without duplicating its structure.

3. Exercise its states

Render the component with representative inputs and check empty, long, and changing content. If it includes a control, verify the control's accessible name and that the intended action actually occurs.

Sources and review

MOOR's explanatory text is supported by the following source links.

1. Your first component — React
2. Passing props to a component — React