How to Create a Basic React Application from Scratch — Step-by-Step Guide (2025)

by

Introduction

If you’re new to web development and want to create a basic React application from scratch, this guide is for you.

React, developed by Meta (Facebook), is one of the most popular JavaScript libraries for building interactive and scalable user interfaces. In this tutorial, you’ll learn — step by step — how to set up a React app manually, understand its structure, and start coding your first component.

By the end, you’ll have a fully functional React application ready to customize and expand — with a setup that’s SEO-friendly and easy to maintain.

🧩 What Is React?

React is a declarative, component-based JavaScript library used for building fast and interactive web interfaces.

It helps developers:

  • Build reusable UI components.
  • Manage state effectively.
  • Render efficiently with the Virtual DOM.
  • Integrate easily with APIs and third-party libraries.

Because of its performance and flexibility, React powers websites like Netflix, Instagram, and Airbnb.

🧰 Prerequisites

Before you start building, make sure you have the following installed:

⚙️ Step 1: Create a New React Application

The easiest way to build a React project today is by using Vite, a fast modern development tool.

Open your terminal and run:

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

Then navigate into your project folder:

cd my-basic-react-app
npm install

Start your development server:

npm run dev

Vite will start a local development environment (usually on http://localhost:5173).

🗂️ Step 2: Understand the Folder Structure

After setup, your folder structure looks like this:

my-basic-react-app/
├── index.html
├── package.json
├── vite.config.js
└── src/
    ├── App.jsx
    ├── main.jsx
    └── assets/

Folder overview:

  • index.html: Main HTML file (contains root div and SEO meta tags)
  • src/: Contains React components and application logic
  • vite.config.js: Configuration for build and optimization

🧱 Step 3: Create Your First React Component

Inside src/App.jsx, replace the code with:

import React from 'react'

function App() {
  return (
    <div style={{ textAlign: 'center', marginTop: '50px' }}>
      <h1>Welcome to My Basic React App</h1>
      <p>This app is built from scratch using React and Vite.</p>
    </div>
  )
}

export default App

Then, in src/main.jsx, make sure it renders the App component:

import React from 'react'
import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')).render(<App />)

Now open your browser — you’ll see your React app running! 🎉

Build and Deploy Your React App

When your app is ready for production:

npm run build

Vite creates a /dist folder containing your optimized static files.

You can deploy it easily to:

  • Vercel → automatic from GitHub
  • Netlify → drag-and-drop build folder
  • GitHub Pages → via gh-pages package