React Basics – How to Create Component

 Introduction (Story) :

When I started learning React, I was confused about how components actually work. I saw many examples, but things became clear only when I created my own first component.

In this blog, I will explain how to create a simple React component step by step in an easy way.

What is a Component in React?

A component is a reusable piece of UI in React.
It helps in breaking the application into smaller, manageable parts.

Tools Required :

• Node.js
• React (Create React App / Vite)
• VS Code 

Step 1: Create React App :

Run the following command:

Where you want create the react project, then we have to create new folder and there you can open the cmd and run below command

npx create-react-app my-app

Navigate to project folder:

cd my-app
npm start

Step 2: Create Your First Component
Create a file named Hello.js
import React from 'react';

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

export default Hello;

Step 3: Use the Component :
Open App.js and update:
import React from 'react';
import Hello from './Hello';

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

export default App;

Step 4: Run the Application :
Run your application with npm start and you will see:
👉 Hello, Welcome to React!

What I Learned (Experience) :
By creating my first component, I understood how React applications are built using reusable UI blocks. 
This helped me gain confidence to build more complex frontend applications.
If you are a beginner, I recommend starting with small components like this to understand React clearly.

About Me :
I am a Java Full Stack Developer with experience in Spring Boot, React, and PostgreSQL.
I enjoy building real-world applications and sharing my learning journey.

For More, Please Follow : https://sulochanabasavala.blogspot.com/
Next Article : https://sulochanabasavala.blogspot.com/2026/05/react-form-integration-with-spring-boot.html

Happy Learning....