React Components Explained: Functions, Inputs, and UI

React components are JavaScript functions that return JSX, the syntax React turns into the HTML you see in the browser. A component takes inputs called props and returns a reusable piece of the interface. Once you write one, you can render it anywhere as often as you need, because every piece of UI in a React app is built from components.

A component is a function that returns UI

The simplest component is a function that returns a piece of markup. This Profile component returns an image of one scientist, using JSX that looks like an HTML img tag:

App.jsx

function Profile() {
  return <img src="katherine.jpg" alt="Katherine Johnson" />;
}

When React renders this component, the browser shows an image with the alt text "Katherine Johnson." The function does nothing except describe what the UI should look like.

That description is JSX. JSX looks like HTML, but React converts it into JavaScript before it reaches the browser. The JSX syntax guide covers the full rule set.

The function body can run ordinary JavaScript before the return statement. Variables, calculations, and conditions all happen first, and the return statement only describes the final result.

The two rules every component follows

Function components look like ordinary JavaScript functions, but two rules set them apart.

First, the name must start with a capital letter. React treats lowercase tags like img and p as built-in HTML, and capitalized tags like Profile as your components.

Second, the function must return JSX. A component can return one element, or several wrapped in a fragment:

App.jsx

function Profile() {
  return (
    <>
      <img src="katherine.jpg" alt="Katherine Johnson" />
      <p>Mathematician</p>
    </>
  );
}

The fragment <> and </> is an empty wrapper. It lets the component return two elements without adding a visible wrapper element to the page.

Props are the inputs

A component that always shows the same image is limited. Props make it reusable. The parent passes values in, and the child reads them like function arguments:

App.jsx

function Profile({ name, image }) {
  return (
    <>
      <img src={image} alt={name} />
      <p>{name}</p>
    </>
  );
}

Now one definition can render different people. The parent decides the values, and the child only decides how to show them.

Props flow one way, from parent to child. A child can read its props but can never change them.

A prop can hold any JavaScript value: a string, a number, an object, an array, or even a function. The guide on passing props shows the full mechanics.

Compose components to build a page

Components can render other components. A Gallery can use the Profile component several times:

App.jsx

function Gallery() {
  return (
    <section>
      <Profile name="Katherine Johnson" image="katherine.jpg" />
      <Profile name="Aklilu Lemma" image="aklilu.jpg" />
    </section>
  );
}

The browser shows both profiles inside one section. This is composition: small components combine into larger ones, the same way you nest HTML tags. It is also why React components favor composition over inheritance.

Reuse one component everywhere

The real payoff is reusing a component with different props. One Profile definition renders any scientist:

App.jsx

function App() {
  return (
    <main>
      <Profile name="Katherine Johnson" image="katherine.jpg" />
      <Profile name="Aklilu Lemma" image="aklilu.jpg" />
      <Profile name="Lin Lanying" image="lin.jpg" />
    </main>
  );
}

The browser shows three profile blocks from a single function. Write the markup once, pass different props, and React renders the rest. A single change to Profile updates every copy at once, which is what keeps larger apps consistent and easy to maintain.

Common mistakes to avoid

Define every component at the top level of a file. Never declare one component inside another:

App.jsx

// Incorrect: Profile is recreated on every render
function Gallery() {
  function Profile() {
    return <p>A profile</p>;
  }
  return <Profile />;
}

React would recreate the inner Profile function on every render, which causes bugs and poor performance.

Keep components pure too. A pure component returns the same UI for the same props and never changes anything outside itself while rendering. That rule keeps your interface predictable.

Treat props as read-only as well. A component reads props to compute its UI and must never assign a new value to one.

What to learn next

Now that you know what a component is, make it reusable by passing props, then learn how composition turns small components into a full page. When a value must change over time, state is the next piece of the model.