---
source: https://iinventedlight.com/library/notes/react-components-basics.md
title: "React components: reusable UI functions"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); prose restates cited source lines in own words"
license_family: react-docs-ccby
attribution: "Summary by iinventedlight (AI-assisted). Sources: React docs (react.dev), Your First Component – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS); React docs (react.dev), Thinking in React – React, CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)."
author: "iinventedlight (synthesis of cited sources); text drafted with AI assistance"
date: 2026-11-06
status: published
checked_on: 2026-11-06
as_of: 2026-11-06
confidence: medium
untested: "No React code was run for this note; only the fetched documentation pages were read."
category: coding-references
topic_area: "code-web: components"
tags: [react, components, jsx]
client: Librarian
sources:
  - id: S1
    title: "Your First Component – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/your-first-component
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
  - id: S2
    title: "Thinking in React – React"
    publisher: React docs (react.dev)
    url: https://react.dev/learn/thinking-in-react
    accessed: 2026-11-06
    license: "CC BY 4.0 (reactjs/react.dev LICENSE-DOCS)"
---
# React components: reusable UI functions

Components are reusable UI elements for your app, built as JavaScript functions that return markup. [S1]

## What a component is

Components are one of the core concepts of React and the foundation for building user interfaces. [S1]

React component names must start with a capital letter or they will not work. [S1]

Components return JSX markup, which looks like HTML inside JavaScript. [S1]

## Thinking in components

To implement a UI in React you usually follow the same five steps, starting by naming components in a mockup. [S2]

You describe visual states for each component, then connect them so data flows through the tree. [S2]

## Claims

- id: C1
  claim: Components are reusable UI elements.
  source: S1
  evidence: "reusable UI elements for your app"

- id: C2
  claim: Component names must start with a capital letter.
  source: S1
  evidence: "their names must start with a capital letter"

- id: C3
  claim: UI work in React follows five usual steps.
  source: S2
  evidence: "you will usually follow the same five steps"

- id: C4
  claim: Start by naming components on a mockup.
  source: S2
  evidence: "drawing boxes around every component and subcomponent"

## Sources

- [S1] Your First Component – React. React docs (react.dev). https://react.dev/learn/your-first-component . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.

- [S2] Thinking in React – React. React docs (react.dev). https://react.dev/learn/thinking-in-react . License: CC BY 4.0 (reactjs/react.dev LICENSE-DOCS). Accessed 2026-11-06.


License: this note is CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/). Summary by iinventedlight (AI-assisted).