In this tutorial, we will learn how to create a brand new React app and build your very first component. We will take things step by step, using clear explanations so even absolute beginners can follow along with confidence.

Step 1: Create a New React App

To begin, open your terminal. You will create a new React project using a modern bundler such as Vite.

Run this command:

npm create vite@latest my-react-app -- --template react

After running the above command, your terminal will show something like:

VITE v5.x.x  ready in 500ms

➜  Local:   http://localhost:5173/

Now, copy http://localhost:5173/ and paste it into your browser. You should now see the default Vite + React starter page running in your browser.

Step 2: Understand Your Project Structure

Inside your project, open the folder named src/. This is where all your React code lives.

You will see files like:

src/
  App.jsx
  main.jsx

main.jsx is the entry point. App.jsx is the main component your app starts with.

You will create your own components inside the src folder.

Step 3: Create Your First Component

Let us create a simple component called Greeting.

Inside src/, create a new file:

src/Greeting.jsx

Add this code:

export default function Greeting() {
  return <h1>Hello from your first component</h1>;
}

This is a basic React component. It is just a function that returns JSX.

How This Works

• The function name Greeting becomes your component name.
• The return value describes what the UI should look like.
• React displays whatever JSX you return.

This is declarative UI. You simply describe what you want to see.

Step 4: Use Your Component in the App

Now open:

src/App.jsx

Replace the default content with:

import Greeting from "./Greeting.jsx";
 
export default function App() {
  return (
    <>
      <title>My First Component</title>
      <meta name="description" content="Learning React 19 components" />
 
      <Greeting />
    </>
  );
}

Here is what is happening:

• You import your new Greeting component.
• You place <Greeting /> inside the JSX.
• React will render whatever your component returns.

You also added metadata directly in JSX, which is supported in React.

Step 5: View Your Component

Go back to the browser where your dev server is running.

You should now see:

Hello from your first component

You have successfully built and rendered your first React component.

Keep practising by building more components and combining them to create complex UIs. Happy coding!