Introduction: Why Using Components in React Matters

One of the core strengths of React is its component-based architecture. Instead of writing your UI as one big block, you break it down into small, reusable components.

But for beginners, a common question is:
“I’ve created a new React component… now how do I use it?”

This guide walks you through step-by-step how to:

• Create a new React component

• Import it properly

• Use it inside other components

• Follow best practices for clean, reusable UI

Whether you're building buttons, cards, or complex forms—learning to use your own components efficiently is key to building scalable apps.

What Is a React Component?

A React component is a function (or class) that returns JSX, the syntax that looks like HTML but works in JavaScript.

Here’s a very simple example of a component:

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

You can create components like this in separate files and use them wherever you need.

Steps to Use a Newly Created React Component

✅ 1. Create the Component File

Inside your src/components/ folder, create a file like Greeting.js:

// File: src/components/Greeting.js
function Greeting() {
  return <h2>Hello from a reusable component!</h2>;
}

export default Greeting; // Make it usable in other files

Use export default so it can be imported elsewhere.

✅ 2. Import the Component Where You Need It

Now go to your App.js or any other component where you want to use this:

// File: src/App.js
import Greeting from './components/Greeting'; // Relative path to your component

✅ 3. Use the Component Like a Tag

React components work just like custom HTML tags in JSX:

function App() {
  return (
    <div>
      <h1>My App</h1>
      <Greeting /> {/* This will render the h2 from Greeting.js */}
    </div>
  );
}

Using Props in Your Components

Props (short for properties) let you pass data into a component, making it dynamic and reusable.

Update Greeting.js:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

Use it in App.js:

<Greeting name="Vinay" />
<Greeting name="React Learner" />

Now the same component works with different values—super efficient!

⚡ Full Functional Code Example

// File: src/components/Greeting.js
function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}
export default Greeting;

// File: src/App.js
import React from 'react';
import Greeting from './components/Greeting';

function App() {
  return (
    <div style={{ padding: '2rem' }}>
      <h1>Using Custom Components</h1>
      <Greeting name="Vinay" />
      <Greeting name="StudyZone4U User" />
    </div>
  );
}

export default App;

✅ This app will render two greetings using a single, reusable component.

Tips & Common Pitfalls

✅ Best Practices

• Organize components in a components/ folder.

• Use PascalCase (Greeting, UserProfile) for component names.

• Always export your component so it can be reused.

• Use props for flexible, dynamic content.

❌ Common Mistakes

• ❌ Import path errors (./Components/Greeting vs ./components/Greeting)

• ❌ Forgetting export default

• ❌ Not wrapping JSX in a parent element (div or <> </>)

• ❌ Using lowercase component names like <greeting /> (React treats it as HTML)

React Component Usage Cheat Sheet

Conclusion: Master Reusability with Custom Components

In React, using newly created components is simple but powerful. By learning how to properly import, use, and reuse your components, you’ll unlock one of React’s greatest strengths—modular and maintainable UIs.

Pro Tip: Build your own component library to speed up future development.

Key Takeaways

• Always export your components.

• Use import paths correctly to avoid errors.

• Build components with props for flexibility.

• Keep your code modular for better scalability.