Your First React App

Your First React App – Step-by-Step Beginner Tutorial

Creating your first React app is an exciting moment for every web developer. React allows you to build modern, fast, and interactive user interfaces using reusable components. In this guide, you will create a working React application from scratch, understand how it runs, and modify it confidently.

This tutorial is perfect for beginners, students, and interview preparation.

What Is a React App?

A React app is a JavaScript-based web application that renders UI using components instead of traditional HTML pages. Instead of refreshing the page again and again, React updates only the required parts of the screen.

Your first React app will:

Run on a local development server
Display UI using JSX
Use components
Auto-refresh when you change code

Step 1: Install Required Tools

Before creating your first React app, you need:

Node.js (Includes npm)

Download and install Node.js (LTS version).

Check installation:

If both commands show version numbers, you’re ready.

Step 2: Create Your First React App

The easiest and most beginner-friendly way is Create React App.

Create the app

This may take a few minutes.

Move into the project folder

Start the app

Your first React app opens automatically at:

You’ll see the default React welcome screen.

Step 3: Understanding the Default Project Structure

After creation, your folder looks like this:

Important Files

File	Purpose
`index.js`	App entry point
`App.js`	Main component
`App.css`	Component styling
`public/index.html`	Root HTML

React injects everything into:

Step 4: Your First React Component

Open src/App.js and replace its content:

Save the file
Browser updates automatically
No refresh needed

This is your first custom React UI

Step 5: Understanding JSX

JSX allows writing HTML inside JavaScript.

Example:

Behind the scenes, React converts JSX into JavaScript.

JSX Rules:

One parent element
Use className instead of class
JavaScript inside { }

Step 6: Adding a New Component

Create a new file: src/Welcome.js

Now import it into App.js:

This shows how React encourages reusable UI blocks

Step 7: Using Props (Passing Data)

Props let you pass data to components.

Use it like this:

Props are read-only
Used for dynamic content

Step 8: Adding State (Interactivity)

Let’s add a simple counter.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        Increase
      </button>
    </>
  );
}

export default Counter;

import { useState } from "react";

function Counter() {

const [count, setCount] = useState(0);

return (

<p>Count: {count}</p>

<button onClick={() => setCount(count + 1)}>

Increase

</button>

</>

);

}

export default Counter;

Add it to App.js:

State makes your app interactive
UI updates automatically

Step 9: Styling Your First App

Using CSS

Edit App.css:

Import it:

Inline Styling

Step 10: Build Your App for Production

When your app is ready:

Optimized files
Faster loading
Ready for deployment

Common Beginner Mistakes

Forgetting export default
Writing multiple root elements
Modifying state directly
Mixing too much logic in one component

What to Learn After Your First App?

Once your first app is done, learn next:

React Hooks (useEffect)
React Router
API fetching
Forms & validation
Project structure
Deployment (Netlify / Vercel)

Summary

Installed React
Created first React app
Understood components & JSX
Added props and state
Styled the app
Built production version

Building your first app is the foundation of modern frontend development. Keep practicing small projects, and React will start feeling natural very quickly.

Your First React App