---
title: "Step-by-Step Guide to create a website using React from scratch"  
description: "Here’s a Step-by-Step Guide to create a website using React from scratch — even if you’re new to it."  
author: "Jk Malhotra"  
published: 2025-11-07  
updated: 2025-11-07  
canonical: https://www.mindstick.com/blog/306459/step-by-step-guide-to-create-a-website-using-react-from-scratch  
category: "React js"  
tags: ["javascript", "website", "reactjs"]  
reading_time: 4 minutes  

---

# Step-by-Step Guide to create a website using React from scratch

**React** is one of the most popular [JavaScript libraries](https://www.mindstick.com/forum/160028/what-is-react-js-and-how-does-it-differ-from-other-javascript-libraries-frameworks) for building modern, dynamic, and responsive websites or [web apps](https://www.mindstick.com/forum/159941/what-are-the-best-practices-for-handling-user-sessions-and-cookies-in-web-apps).

Here’s a **Step-by-Step Guide** to create a website using [**React from scratch**](https://www.mindstick.com/articles/337380/best-practices-in-react-for-creating-reusable-components) — even if you’re new to it.

![Step-by-Step Guide to create a website using React from scratch](https://www.mindstick.com/blogs/8f802941-6c80-4cc6-8474-1930bab08933/images/2c0df7c8-4974-4730-a50f-fc41224e80eb.jpg)

## Step 1: Understand the Basics

Before you start, you should know:

- **HTML** → Structure
- **CSS** → Styling
- **JavaScript (ES6)** → Logic
- **React** → [Builds UI using components](https://www.mindstick.com/blog/303791/explain-the-components-used-in-reactjs-and-its-importance)

React helps you create reusable **components** (like buttons, forms, sections) that dynamically update when data changes — no page reloads needed.

## Step 2: Install Node.js and npm

React needs **Node.js** and [**npm (Node Package Manager)**](https://www.mindstick.com/articles/1454/install-and-setup-node-js).

**[Check if](https://www.mindstick.com/forum/12878/how-to-check-if-an-asp-dot-net-file-upload-control-has-a-file-in-jquery) Node.js is installed:**

```plaintext
node -v
npm -v
```

If not installed, download it from https://nodejs.org

## Step 3: Create a New React App

You can use one of two methods:

### Option 1: Using Create React App (simpler)

```plaintext
npx create-react-app my-react-website
cd my-react-website
npm start
```

This automatically sets up React with everything you need.

[Your app](https://answers.mindstick.com/qa/33368/how-will-you-design-a-listview-which-downloads-a-lot-of-images-and-displays-in-it-without-getting-your-app-hanged-whats-the-best-possible-way) will start at *http://localhost:3000*

### Option 2: Using Vite (faster build tool)

```plaintext
npm create vite@latest my-react-website -- --template react
cd my-react-website
npm install
npm run dev
```

Vite is newer and much faster than Create [React App](https://www.mindstick.com/forum/159435/react-app-crash-infinite-loop-identify-and-break).

## Step 4: Understand the Folder Structure

Your React app will look like this:

```plaintext
my-react-website/
│
├── node_modules/       → dependencies
├── public/             → static files (favicon, images)
├── src/                → your code
│   ├── App.js          → main app component
│   ├── index.js        → entry point
│   ├── components/     → reusable UI parts
│   ├── pages/          → different pages
│   └── styles/         → CSS files
├── package.json        → app info & dependencies
└── README.md
```

## Step 5: Build Your First Component

Open `src/App.js` and replace the code with:

```javascript
import React from 'react';

function App() {
  return (
    <div style={{ textAlign: 'center', padding: '50px' }}>
      <h1>Welcome to My React Website</h1>
      <p>Built from scratch using React.js</p>
    </div>
  );
}

export default App;
```

Save and refresh — it should show your custom content.

## Step 6: Add Components

Create a folder:\
`src/components/Header.js`

```javascript
import React from 'react';

function Header() {
  return (
    <header style={{ backgroundColor: '#282c34', padding: '20px', color: 'white' }}>
      <h2>My React Website</h2>
    </header>
  );
}

export default Header;
```

Then import it into `App.js`:

```javascript
import Header from './components/Header';

function App() {
  return (
    <>
      <Header />
      <main>
        <h1>Home Page</h1>
      </main>
    </>
  );
}
```

## Step 7: Add CSS Styling

You can create a `src/styles/App.css` file:

```css
body {
  font-family: Arial, sans-serif;
  margin: 0;
  background: #f4f4f4;
}
h1 {
  color: #333;
}
```

Import it in `App.js`:

```javascript
import './styles/App.css';
```

## Step 8: Add Navigation (React Router)

Install [React Router](https://www.mindstick.com/forum/160037/what-is-react-router-and-how-does-it-enable-client-side-routing):

```plaintext
npm install react-router-dom
```

Create pages:

```plaintext
src/pages/
├── Home.js
└── About.js
```

## Home.js

```javascript
function Home() {
  return <h1>Welcome Home!</h1>;
}
export default Home;
```

## About.js

```javascript
function About() {
  return <h1>About Us Page</h1>;
}
export default About;
```

Then update `App.js`:

```javascript
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <Router>
      <nav style={{ background: '#333', padding: '10px' }}>
        <Link to="/" style={{ color: '#fff', marginRight: '10px' }}>Home</Link>
        <Link to="/about" style={{ color: '#fff' }}>About</Link>
      </nav>

      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;
```

## Step 9: Add Images and Assets

Put images in `public/` or `src/assets/`.\
Use them like:

```plaintext
<img src="/logo.png" alt="logo" />
```

or

```plaintext
import logo from './assets/logo.png';
<img src={logo} alt="logo" />
```

## Step 10: Build and Deploy

## 1. Build for production:

```plaintext
npm run build
```

This creates a `build/` folder ready for deployment.

## 2. Deploy options:

- **Vercel** (best for React) — https://vercel.com
- **Netlify** — [drag and drop](https://www.mindstick.com/forum/454/how-to-drag-and-drop-multiple-image-from-one-canvas-to-onther-canvas-in-html5) your `build` folder

---

Original Source: https://www.mindstick.com/blog/306459/step-by-step-guide-to-create-a-website-using-react-from-scratch

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.