DYDevKitYard
React

Structure a React Component

Structure a React component by deciding its responsibility, naming props clearly, keeping state close to where it is used and separating reusable UI from page-specific content.

Start workflowView checklistOpen ElementYard
Problem statement

What this workflow solves

Target outcome

A React component that is easier to reuse, test, style and connect to real product workflows.

Interactive workflow

Work through React component

Track each step, focus the current task and copy a starter outline for your project notes or implementation plan.

0% complete
Define the component responsibility

A component is easier to maintain when it has one clear job and predictable inputs.

  • Name the component after the UI role it performs.
  • Avoid mixing data fetching, layout and low-level controls in one component.
  • Pass content through props or children when reuse matters.
Starter codeCopy and adapt this outline for the workflow.
type ReactComponentProps = {
  title: string;
  description: string;
};

export function ReactComponent({
  title,
  description,
}: ReactComponentProps) {
  return (
    <section aria-labelledby="structure-react-component-title">
      <h2 id="structure-react-component-title">{title}</h2>
      <p>{description}</p>
    </section>
  );
}
Best practices

Work this way

These are the patterns that keep the workflow practical, accessible and easier to maintain.

Name the component after the UI role it performs.
Use clear prop names instead of implementation details.
Keep local UI state inside the component.
Common mistakes

Avoid these traps

Putting unrelated layout, data and interaction logic into one component.
Adding too many boolean props instead of composing smaller pieces.
Duplicating derived values in component state.
Checklist

Step-by-step workflow

Follow the steps in order, then use the resource sections when you need a tool, reference or UI pattern.

1

Define the component responsibility

A component is easier to maintain when it has one clear job and predictable inputs.

  • Name the component after the UI role it performs.
  • Avoid mixing data fetching, layout and low-level controls in one component.
  • Pass content through props or children when reuse matters.
2

Design the props API

Props should make common use cases easy and unusual cases possible without adding noise.

  • Use clear prop names instead of implementation details.
  • Keep boolean props limited and meaningful.
  • Prefer composition when variants become too complex.
3

Handle state deliberately

State should live where it is needed and be lifted only when another component must coordinate it.

  • Keep local UI state inside the component.
  • Lift state when sibling components need the same value.
  • Avoid duplicating derived values in state.
Related resources

Tools, cheatsheets and components

Use these linked DevKitYard sections when the guide moves from planning to doing.

Related Tools
React Component GeneratorGenerate starter component structures.JSON Formatter & ValidatorFormat sample props and configuration data.Contrast CheckerCheck UI state colours.
Related Cheatsheets
JavaScript CheatsheetReview language patterns used in components.HTML CheatsheetCheck semantic markup inside components.
Related Components
Button ComponentsStudy simple reusable component states.Card ComponentsPlan reusable content containers.Form ComponentsReview controlled and accessible form UI patterns.
ElementYard CTA

Prototype React-ready UI in ElementYard

Use ElementYard to explore component layout and visual variants before implementing React boundaries.

Open ElementYard
FAQ

React component questions

Should every React component be reusable?

No. Page-specific components are fine, but shared components should have clear props, accessible defaults and predictable variants.

When should I split a React component?

Split it when one part has a separate responsibility, is reused elsewhere or makes the parent component hard to scan.

Next steps

Keep moving

React Component GeneratorGenerate starter component structures.JavaScript CheatsheetReview language patterns used in components.Button ComponentsStudy simple reusable component states.Prototype React-ready UI in ElementYardUse ElementYard to explore component layout and visual variants before implementing React boundaries.