Creating Your First React Component

⚛️ Creating Your First React Component

Starting with React can feel overwhelming, but the magic begins with just one simple step: building your first component. In React, everything — buttons, forms, headers, layouts — is made up of components. Think of them like LEGO blocks that form your UI.

In this blog, we’ll walk you through the steps to create your very first functional component in React, understand its structure, and render it to the browser.

🛠️ What Is a React Component?

A React component is a reusable, self-contained piece of UI. It’s written in JavaScript and returns JSX — a special syntax that looks like HTML but gets compiled to real DOM elements.

There are two types of components: Functional Components and Class Components. These days, we use functional components as the standard.

📦 Setting Up Your Environment

Before writing your first component, make sure you have the environment ready:

1. Install Node.js and npm.
2. Create a React project using Create React App:

npx create-react-app my-first-app
cd my-first-app
npm start

This will set up a React environment and start a local server at http://localhost:3000.

🧩 Creating a Simple Functional Component

Now, let’s create a new file named Welcome.js inside the src folder. Here's how to define a simple component:

import React from 'react';

const Welcome = () => {
  return (
    <div>
      <h1>👋 Hello from React!</h1>
      <p>This is your first component.</p>
    </div>
  );
};

export default Welcome;

This function returns JSX that React will render to the DOM. Each component must return a single parent element, so we’ve wrapped everything in a <div>.

🚀 Rendering Your Component

To display the Welcome component, open App.js and import it like this:

import React from 'react';
import Welcome from './Welcome';

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

export default App;

Once saved, your component should appear in the browser. Congrats! 🎉 You've just rendered your first React component.

🔄 Passing Props to Your Component

Components become powerful when you can customize them. Let’s modify the Welcome component to accept a name prop:

const Welcome = ({ name }) => {
  return (
    <h2>Hello, {name}!</h2>
  );
};

And use it like this inside App.js:

<Welcome name="Aditya" />

Props are like function arguments — they let you pass data into components.

🎨 Adding Basic Styling

You can style your component using CSS. Create a Welcome.css file:

.welcome-message {
  color: #3366ff;
  font-family: sans-serif;
}

Import it in your component and apply the class:

import './Welcome.css';

const Welcome = ({ name }) => {
  return (
    <h2 className="welcome-message">Hello, {name}!</h2>
  );
};

📁 Folder Structure Tip

As your app grows, organize components inside a components folder for clarity:

src/
  components/
    Welcome.js
    Welcome.css

This keeps your codebase clean and maintainable.

🧠 Recap: What You Learned

• What React components are and how they work
• How to create your first functional component
• How to render a component and pass props
• Basic styling techniques

React components are the building blocks of your UI. Once you master components, you’ll be ready to build complex interfaces by composing them together.

✅ Next Steps

• Try creating more components like Header, Footer, and Button.
• Learn about useState and useEffect to add interactivity.
• Understand how to conditionally render components and use lists.

Now that you've created your first React component, you’ve taken the first real step toward mastering modern frontend development. Keep building! 💪