Introduction

React is a popular JavaScript library for building modern user interfaces. If you’re just getting started, this step-by-step tutorial will help you create your very first Hello React application. You’ll learn how to set up a project, understand the basic file structure, and write your first component using JSX.
In our previous article, we covered how to set up the React development environment by installing VS Code, npm, and Yarn. If you haven’t completed that setup yet, make sure to do so before continuing with this tutorial.

What is React?

React is a component-based JavaScript library developed by Facebook for building interactive and efficient user interfaces. Instead of updating the entire page when data changes, React uses a Virtual DOM to update only the parts of the UI that actually change.
Key benefits of React include modular and reusable components, fast rendering through the Virtual DOM, strong community support, and wide adoption in modern web development.

Prerequisites

Before you begin, make sure you have the following installed and ready:

Node.js and npm
A code editor such as Visual Studio Code
Basic knowledge of HTML, CSS, and JavaScript

You can verify your Node and npm installation by running:

node -v
npm -v

Step 1: Set Up Your React Project

One of the fastest and most modern ways to create a React project today is by using Vite, a lightweight and high-performance build tool.

To create a new React app with Vite, run:

npm create vite@latest hello-react

When prompted, choose:

Framework: React
Variant: JavaScript

Now navigate into the project folder and install dependencies:

cd hello-react
npm install

Start the development server:

npm run dev

Your application will be available at http://localhost:5173.

Alternative: Create React App

You can also use Create React App (older but still popular):

npx create-react-app hello-react
cd hello-react
npm start

Step 2: Understand the Project Structure

After creating the project, you’ll see a structure similar to this:

hello-react/
  index.html
  package.json
  src/
    App.jsx
    main.jsx

index.html: The root HTML file where the React app is injected.
src/main.jsx: The entry point that renders your React app.
src/App.jsx: The main React component of your application.

Step 3: Create Your First “Hello React” Component

Open src/App.jsx and replace its contents with the following code:

function App() {
  return (
    <div>
      <h1>Hello React</h1>
      <p>Welcome to your first React app!</p>
    </div>
  );
}

export default App;

This code defines a simple functional component using JSX that renders a heading and a paragraph.

Step 4: Review the Entry File

Your src/main.jsx file is responsible for rendering the App component into the browser. It typically looks like this:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

This tells React to render the App component inside the HTML element with the id root.

What is JSX?

JSX stands for JavaScript XML. It allows you to write HTML-like syntax inside JavaScript, making UI code more readable and expressive.
Example using JSX:

const element = <h2>This is JSX!</h2>;

The same code without JSX would look like this:

const element = React.createElement('h2', null, 'This is JSX!');

Bonus: Add Another Component

React shines when you break your UI into smaller, reusable components. Let’s add one more.

Create a new file src/Greeting.jsx:

function Greeting() {
  return <p>Have a great day learning React!</p>;
}

export default Greeting;

Now update App.jsx to use this component:

import Greeting from './Greeting';

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

export default App;

This demonstrates React’s component-based architecture, where components can be composed together to build larger UIs.

React Concepts Introduced

In this tutorial, you were introduced to several core React concepts:

Component: A reusable piece of UI written in JavaScript.
JSX: A syntax extension that makes UI code easier to write and read.
Props: Data passed into components (you’ll learn this next).
State: Data managed inside a component for interactivity.
Virtual DOM: React’s efficient way of updating the UI.

Summary

In this tutorial, you learned how to:

Create a React project using Vite
Understand the basic React project structure
Write your first React component using JSX
Create and reuse additional components

React’s component-based design makes applications easier to scale and maintain. As your next steps, explore props, state, and hooks to build dynamic and interactive React applications.

Recommended Resources

React Official Documentation
Vite Guide
JSX Introduction

Getting Started with React: Your First “Hello React” App