Typorithm · easy

Function Components & JSX

react-componentreactjsxcomponentrender

Saved on this device

Full lesson · 8 learning steps Open any exercise for focused practice

Step 1 of 8 · intro card

Learn Function Components & JSX

Components & JSX

A React component is a function that returns JSX. JSX compiles down to React.createElement calls, and you compose components by rendering them like <Greeting />. Component names must be Capitalized so React treats them as components rather than HTML tags.

In React 19 the standard component is a plain function that returns JSX. Greeting() returns <h1>Hello, world</h1>, describing what should appear on screen.

JSX is not HTML — it is syntax sugar that compiles to React.createElement calls. Each tag becomes an element object that React uses to build and update the DOM.

Components compose: App renders <Greeting /> just like a built-in tag. The leading capital letter is what tells React it is a component, so names must always be Capitalized.

A component is a function returning JSX.

JSX compiles to React.createElement.

Component names must be Capitalized.

function Greeting() {
  return <h1>Hello, world</h1>;
}

export default function App() {
  return <Greeting />;
}

Read the implementation

Connect each part of the code to the concept before you type.

1. Component declaration

A React component is just a function — its capitalized name marks it as a component, not a plain helper.

function Greeting() {

2. Returning JSX

The function returns JSX, which compiles to React.createElement calls that describe the UI.

return <h1>Hello, world</h1>;

3. Root component

App is the top-level component, exported so the app's entry point can render it.

export default function App() {

4. Rendering a component

Writing <Greeting /> renders the Greeting component — components compose by including each other in JSX.

return <Greeting />;

A complete learning loop

Understand

Read the concept map and follow the code breakdown.

Reconstruct

Type the implementation, repair mistakes and work through every recall exercise.

Verify

Use the final check without hints; revisit weak concepts in short practice sessions.