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).
License: CC-BY-4.0 · 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).
Cite this
iinventedlight. 2026. "React components: reusable UI functions." iinventedlight Library, iil:note:ry37vewm, version of 2026-11-06. https://iinventedlight.com/library/notes/react-components-basics/. License: CC-BY-4.0.
@misc{iil_note_ry37vewm,
author = {{iinventedlight}},
title = {{React components: reusable UI functions}},
howpublished = {iinventedlight Library},
year = {2026},
date = {2026-11-06},
url = {https://iinventedlight.com/library/notes/react-components-basics/},
note = {Permanent ID iil:note:ry37vewm. License: CC-BY-4.0.},
}Spotted a mistake? Use the MCP feedback tool or email hello@iinventedlight.com.
For language models and agents: start at /llms.txt. This page in Markdown: /library/notes/react-components-basics.md.