React Components and JSX

React Components and JSX

React applications are built from components. A component is a function that returns UI based on its current inputs and state.

Why Components Matter

• They isolate UI concerns into reusable units.
• They make complex screens easier to reason about.
• They provide clear inputs through props.

What JSX Actually Does

JSX is not HTML inside JavaScript. It is a syntax that describes the UI tree React should render.

function Welcome({ name }) {
  return <h1>Hello, {name}</h1>;
}

The main benefit is readability: UI structure stays close to the component logic that produces it.

Practical Guidance

• Keep components focused on one responsibility.
• Prefer composition over deeply nested conditional logic.
• Extract repeated UI patterns into shared components instead of copy-pasting markup.