How to Build a Basic React Component Using JSX?

Introduction

Hello friends!
Welcome to our React series. In the previous blogs, we explored what React is and how JSX works. Now it's time to put that knowledge into practice.

In this post, you'll learn how to create a React component using JSX, step-by-step. Whether you're a beginner or just need a quick refresher, this guide will help you get started with confidence.

What is a Component in React?

In simple words, a Component is a reusable piece of code that controls a part of your UI. React components are the building blocks of any React application. They help you split the UI into independent, reusable sections, making your code more organized and easier to maintain.

React has two types of components:

Functional Component

• A functional component is a simple JavaScript function that returns JSX.

• They are stateless by default, but you can add state using React Hooks.

Example:

import React from 'react';

const Greeting = ({ name }) => {
  return <h1>Hello, {name}!</h1>;
};

export default Greeting;

Class Component

• A class component is written using ES6 classes and extends React.Component.

• It can hold its own state and use lifecycle methods.

Example:

import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

export default Greeting;

Prerequisites

Before we start:

• Make sure you have React set up using Vite or Create React App.

• Understand basic JSX syntax (check out our previous blog if needed).

Let’s Start: Build a Basic Component

 Step 1: Create the Component

Let’s build a simple welcome message component:

function WelcomeMessage() {
  return <h1>Welcome to My React App!</h1>;
}

What’s happening here?

• WelcomeMessage is a JavaScript function.

• It returns JSX — a mix of HTML and JavaScript.

• The function name starts with a capital letter, as required by React.

 Step 2: Export the Component

To use this component in another file, export it:

export default WelcomeMessage;

Now you can import and use it anywhere in your React app.

 Step 3: Use it in App.jsx

Open your App.jsx or App.js and import the component:

import WelcomeMessage from './WelcomeMessage';

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

export default App;

Output: You’ll see
Welcome to My React App!
on your webpage.

 Step 4: Add More Elements

You can add more HTML-like elements inside the component:

function WelcomeMessage() {
  return (
    <div>
      <h1>Welcome to My React App!</h1>
      <p>This is your starting point to learn React.</p>
    </div>
  );
}

Note: Always wrap multiple elements in a single parent, like a <div> or <>...</> (React fragment).

 Why Use Components?

React Components offer:

• Reusability – Use the same component in multiple places.

• Modularity – Break your app into smaller, manageable chunks.

• Clean Code – Makes the code easier to read and maintain.

Common Mistakes to Avoid

Mistake	Solution
❌ Not using capital letter in name	✅ Use PascalCase like MyComponent
❌ Returning multiple elements directly	✅ Wrap in <div> or React Fragment <>
❌ Forgetting to export the component	✅ Use export default

Conclusion

React components are the heart of any React application. Once you master how to create and use them, you're ready to build dynamic, interactive user interfaces.

In the next blog, we’ll learn how to pass data using Props to make your components even more powerful and flexible.

(Video Credit: Codevolution (YouTube))