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

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

Option B: Arrow function

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

Both approaches create a valid React component.

To use the component, render it inside another component:

functionApp() {
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:

functionExample() {
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:

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

<Welcomename="Alex"/>;

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

exportdefaultWelcome;

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

functionTitle() {
return<h1>Dashboard</h1>;
}

Use it:

<Title/>

Example 2: Component that receives props

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

Use it:

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

Each instance renders with its own data.

Example 3: Component in a separate file

src/components/Button.jsx:

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

exportdefaultButton;

Import and use:

importButtonfrom"./components/Button";

functionApp() {
return<Buttonlabel="Click me"/>;
}

Common mistakes and how to fix them

Mistake 1: Using a lowercase component name

What you might do:

functionwelcome() {
return<h1>Hello</h1>;
}

Why it breaks:

React treats lowercase tags as HTML elements.

Correct approach:

functionWelcome() {
return<h1>Hello</h1>;
}

Mistake 2: Forgetting to return JSX

What you might do:

constCard= () => {
<div>Content</div>;
};

Why it breaks:

The function does not return anything.

Correct approach:

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

Or use implicit return:

constCard= () =><div>Content</div>;

Mistake 3: Returning multiple elements without a wrapper

What you might do:

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

Why it breaks:

JSX must return one root element.

Correct approach:

functionExample() {
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.