Part 1: Introduction to React – Your First Component

July 2, 2025

This content originally appeared on DEV Community and was authored by Selahaddin Osmanoglu

Welcome to the first part of our beginner-friendly React series!

In this post, we’ll take a hands-on look at what React is, why it’s useful, and how to build your very first React component.

What is React?

React is a JavaScript library for building user interfaces. It helps developers build fast and interactive UIs using a component-based architecture.

You can think of it as a LEGO set for websites — each block (component) does one thing well and can be reused wherever you want.

React was created by Facebook and is now maintained by Meta and the open-source community.

Why Learn React?

React is:

Declarative – You describe what you want, not how to do it.
Component-Based – You break UIs into small, manageable, and reusable pieces.
Fast & Efficient – Thanks to its virtual DOM and update diffing.
Widely Used – From startups to big tech, it’s everywhere.

Setting Up Your First React Project

We’ll use Vite for a fast, modern setup. You can also use Create React App (CRA), but Vite is lighter and preferred for new projects.

Prerequisites

Node.js installed (version 16+ recommended)
A terminal and a code editor like VS Code

Step-by-Step (Vite)

Create a new project

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

Install dependencies

   npm install

Run the app

   npm run dev

Open your browser and go to http://localhost:5173

You should see the default Vite + React starter screen!

Your First Component

Let’s build a basic “Hello World” component.

Replace the contents of `App.jsx` with:

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

Explanation:

The App function is a component.
It returns JSX, a syntax extension that lets you write HTML inside JavaScript.
export default App makes it available to be rendered in the app.

What is JSX?

JSX stands for JavaScript XML.

It’s not valid HTML or JavaScript — it’s a hybrid that looks like HTML but works inside JavaScript. It gets compiled to regular JavaScript by tools like Babel.

Example:

<h1>Hello World</h1>

is compiled into:

React.createElement('h1', null, 'Hello World');

Challenge for You

Try modifying your App component:

Change the text to introduce yourself.
Add an image using <img> tag.
Try nesting another component (we’ll learn more next time).

Summary

React helps you build modern user interfaces with reusable components.
JSX is a key part of writing React code.
You created your first project using Vite.
You wrote your first component!

What’s Next?

In Part 2, we’ll dive deeper into components and props — the building blocks of scalable React apps.

Until then, keep tinkering with your new project!