React - Create Your First Component
A React component is a reusable, self-contained building block used to create the user interface of a React application. Each component controls a specific part of the UI and defines what should be displayed and how it should behave.
For example:
- A button can be a component.
- A heading can be a component.
- Even an entire form can be a component.
we will create a Greeting component that displays a simple message like:
“Hello, Pal! Welcome to React.”
1. Setting Up the Environment
Before writing any code, let’s make sure we have the right tools.
Step 1: Install Node.js
1. Go to https://nodejs.org.
2. Download and install the latest version
3. After installation, check if Node.js and npm are installed correctly:
4. node -v
5. npm -v
If you see version numbers, you’re good to go!
Step 2: Create a React App
React gives us a simple tool called Create React App to quickly set up a project.
In your terminal or command prompt, run:
npx create-react-app my-first-app
This will create a new folder named my-first-app with all the necessary files.
Step 3: Start the Development Server
Go into the project folder:
cd my-first-app
Start the server:
npm start
Your browser will open automatically at:
http://localhost:3000
You’ll see the default React welcome page.
2. Understanding the Folder Structure
Here’s what’s important right now:
my-first-app/
│
├── src/
│ ├── App.js → Main component
│ ├── index.js → Entry point
│ └── App.css → Styling
│
└── public/
└── index.html
We’ll focus mainly on the src folder for now.
3. What is a React Component?
A React component is like a function that returns JSX.
JSX (JavaScript XML)
JSX lets you write HTML inside JavaScript.
For example:
<h1>Hello World</h1>
This looks like HTML, but it’s actually JavaScript code, which React understands.
4. Create a Greeting Component
Let’s create our first custom component step-by-step.
Step 1: Create the File
Inside the src/ folder, create a new file called:
Greeting.js
Step 2: Write the Code
Open Greeting.js and add this code:
import React from ‘react’;
function Greeting() {
return (
<div>
<h1>Hello, Pal! Welcome to React.</h1>
<p>This is your very first custom React component.</p>
</div>
);
}
export default Greeting;
Code Breakdown
1. import React from ‘react’;
Lets you use React features inside this file.
2. function Greeting()
This is our custom component named Greeting.
3. return()
Whatever is inside return() will be shown on the screen.
Must return one single parent element (like a <div>).
4. export default Greeting;
This allows you to use the component in other files.
5. Use the Component in App.js
Now, let’s display our new Greeting component inside the main App.js file.
Step 1: Open App.js
You’ll see some default code.
Replace it completely with this:
import React from ‘react’;
import Greeting from ‘./Greeting’;
function App() {
return (
<div>
<Greeting />
</div>
);
}
export default App;
Step 2: Save and Check
Save your files and go to your browser.
You should see:
Hello, Pal! Welcome to React.
This is your very first custom React component.
Congratulations! You’ve just created and rendered your first React component!
6. Add Some Styling
Let’s make it look a little nicer.
Step 1: Open App.css
Replace the default styles with this:
div {
text-align: center;
margin-top: 50px;
font-family: Arial, sans-serif;
}
h1 {
color: #007BFF;
font-size: 2rem;
}
p {
color: #555;
font-size: 1rem;
}
Now your component will have a clean, centered design.
7. Add Dynamic Content
Right now, the message is hardcoded. Let’s make it dynamic using props.
Step 1: Update Greeting.js
Change your component to this:
import React from ‘react’;
function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}! Welcome to React.</h1>
<p>You are learning how to build amazing components.</p>
</div>
);
}
export default Greeting;
Here, {props.name} will display whatever name we pass to the component.
Step 2: Update App.js
Now, pass a name as a prop:
import React from ‘react’;
import Greeting from ‘./Greeting’;
function App() {
return (
<div>
<Greeting name=”Pal” />
<Greeting name=”John” />
<Greeting name=”Priya” />
</div>
);
}
export default App;
Result
Your browser will show:
Hello, Pal! Welcome to React.
Hello, John! Welcome to React.
Hello, Priya! Welcome to React.
8. How This Works
1. App.js renders three <Greeting /> components.
2. Each <Greeting /> gets its own name value via props.
3. Greeting.js uses {props.name} to display different messages.
4. React’s Virtual DOM efficiently updates only what changes.
9. Final Folder Structure
Your project should now look like this:
my-first-app/
│
├── src/
│ ├── Greeting.js
│ ├── App.js
│ ├── App.css
│ └── index.js
│
└── public/
└── index.html