How to Create Components in React

What you’ll build or solve

You’ll create a reusable React component and render it in your app.

When this approach works best

This approach works best when:

• You want to split a large UI into smaller pieces.
• You reuse the same layout or logic in multiple places.
• You want cleaner, more maintainable code.
• You build a feature that deserves its own self-contained block.

This is a bad idea if you create tiny components for single elements with no reuse. Keep components meaningful.

Prerequisites

• A working React project
• Basic understanding of JSX
• Familiarity with JavaScript functions

Step-by-step instructions

Step 1: Create a function component

React components are plain JavaScript functions that return JSX.

Option A: Function declaration

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

Option B: Arrow function

const Welcome = () => {
  return <h1>Hello, React</h1>;
};

Both approaches create a valid React component.

To use the component, render it inside another component:

function App() {
  return (
    <div>
      <Welcome />
    </div>
  );
}

What to look for

• Component names must start with a capital letter.
• The function must return JSX.
• JSX must return a single root element.

Use a fragment if needed:

function Example() {
  return (
    <>
      <h1>Title</h1>
      <p>Description</p>
    </>
  );
}

Lowercase names are treated as built-in HTML tags, not custom components.

You can pass data using props:

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

<Welcome name="Alex" />;

For larger projects, move the component into its own file and export it:

export default Welcome;

Add state later with hooks like useState if your component needs to react to user input.

That is the core creation process.

Examples you can copy

Example 1: Simple display component

function Title() {
  return <h1>Dashboard</h1>;
}

Use it:

<Title />

Example 2: Component that receives props

function Greeting({ name }) {
  return <p>Welcome, {name}</p>;
}

Use it:

<Greeting name="Sam" />
<Greeting name="Riley" />

Each instance renders with its own data.

Example 3: Component in a separate file

src/components/Button.jsx:

const Button = ({ label }) => {
  return <button>{label}</button>;
};

export default Button;

Import and use:

import Button from "./components/Button";

function App() {
  return <Button label="Click me" />;
}

Common mistakes and how to fix them

Mistake 1: Using a lowercase component name

What you might do:

function welcome() {
  return <h1>Hello</h1>;
}

Why it breaks:

React treats lowercase tags as HTML elements.

Correct approach:

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

Mistake 2: Forgetting to return JSX

What you might do:

const Card = () => {
  <div>Content</div>;
};

Why it breaks:

The function does not return anything.

Correct approach:

const Card = () => {
  return <div>Content</div>;
};

Or use implicit return:

const Card = () => <div>Content</div>;

Mistake 3: Returning multiple elements without a wrapper

What you might do:

function Example() {
  return (
    <h1>Title</h1>
    <p>Text</p>
  );
}

Why it breaks:

JSX must return one root element.

Correct approach:

function Example() {
  return (
    <>
      <h1>Title</h1>
      <p>Text</p>
    </>
  );
}

Troubleshooting

If your component does not render, confirm the name starts with a capital letter.

If you see “is not defined,” check your import path and export statement.

If you get an error about adjacent JSX elements, wrap them in a fragment.

If nothing appears on screen, confirm the component is actually used inside App.

Quick recap

• A React component is a JavaScript function that returns JSX.
• Use a capitalized name.
• Return a single root element or fragment.
• Render it like <ComponentName />.
• Export and import components when organizing files.