Level 1: The Component — React Literacy

Welcome to Level 1

You have opened a React file before -- maybe in a pull request, a codebase tour, or a screen share with a developer -- and seen something that looked like HTML but was not quite HTML. Angle brackets, curly braces, capitalized tag names that do not exist in any HTML reference. It felt like a foreign language written in a familiar alphabet.

This level fixes that. By the end of Level 1, you will be able to look at any React file and answer three questions:

What does this component show the user?
Where does the logic end and the markup begin?
Which parts of this page are custom components and which are plain HTML?

What you will learn

Module	Topic	Core Idea
1.1	JSX Is HTML-Plus	The markup syntax React uses -- HTML with a few extra tricks
1.2	Anatomy of a Component	A component is a function that returns what the user sees
1.3	Components Inside Components	Pages are built by nesting components like building blocks
1.4	Checkpoint	Test your ability to read React components

The core idea

Every React app is made of components -- small, self-contained pieces of UI. A button is a component. A navigation bar is a component. A user profile card is a component. The entire page is a component that contains other components.

When you look at a React file, you are looking at one component. It defines one piece of the interface. Once you learn to see this structure, React code stops being a wall of text and starts being a blueprint you can read.

Key Takeaway

A React app is a tree of components -- small functions that each return a piece of the user interface. Learning to read one component at a time is the key to reading any React codebase.

Connect

As you work through Level 1, pay attention to the moment when JSX stops looking like confusing code and starts looking like a description of a page. That shift is the goal.

Ready?

Start with Module 1.1: JSX Is HTML-Plus to learn the markup language that every React component uses.