First React App : Happy Learning React with 7scribes

Topic 4 of 6

Welcome to React

First React app development is the perfect starting point for mastering modern frontend engineering with speed, clarity, and real-world practice. You’ve heard the buzz. React is everywhere, from the apps on your phone to the websites you browse every day. Companies like Meta, Netflix, Airbnb, and Uber all use React to power their user interfaces. And now, it’s your turn to join them.

Watch Tutorial

Pro Tip

Before reading this guide, make sure you know the basics of HTML, CSS, and JavaScript (variables, functions, arrays). React builds on top of JavaScript, not a replacement for it.

Prerequisites Checklist

Before we write a single line of React, let’s make sure your development environment is ready. You need the following tools installed:

Tool	Purpose	Where to Get
Node.js v18+	Runtime for running JavaScript outside the browser	nodejs.org/en/download
npm (comes with Node)	Package manager to install React and tools	Included with Node.js
VS Code	Best code editor for React development	code.visualstudio.com
VS Code Extensions	ES7+ React Snippets, Prettier, ESLint	VS Code Marketplace
Chrome / Edge	Browser for previewing your app	Already installed
Chrome React DevTools	Inspect React component tree	Chrome Web Store

Verify Node.js Installation

Open your terminal (Command Prompt on Windows, Terminal on Mac/Linux) and run:

Terminal

node –version

# Expected output: v18.0.0 or higher

npm –version

# Expected output: 9.0.0 or higher

Important

If you see ‘command not found’ or a version below 16, download and install the latest LTS version of Node.js from nodejs.org before continuing.

Recommended VS Code Extensions

ES7+ React/Redux/React-Native Snippets: Type ‘rafce’ to generate a full functional component instantly.
Prettier, Code Formatter: Auto-formats your JSX and JavaScript on save. Install, then set as default formatter.
ESLint: Catches errors and bad practices in real-time as you type.
Auto Import: Automatically adds import statements when you use a component.

01 Creating Your First React App

Method: Vite (Recommended)

We’ll use Vite, the modern, lightning-fast build tool that has replaced Create React App as the industry standard. Vite starts up in milliseconds and supports instant hot module replacement (HMR), meaning your browser updates the moment you save a file.

Terminal

# Step 1: Create a new React project with Vite

npm create vite@latest my-first-react-app — –template react

# Step 2: Navigate into the project folder

cd my-first-react-app

# Step 3: Install all dependencies

npm install

# Step 4: Start the development server

npm run dev

After running npm run dev, you’ll see output like this:

Terminal Output

VITE v5.0.0 ready in 312 ms

➜ Local: http://localhost:5173/

➜ Network: use –host to expose

Pro Tip

Open http://localhost:5173 in your browser and you’ll see the default Vite + React welcome page. Congratulations, your first React app is running!

Understanding the Project Structure

Open the project folder in VS Code (File → Open Folder). Here’s what each file and folder does:

Project Structure

my-first-react-app/

│

├── public/

│ └── vite.svg ← Static assets served as-is

│

├── src/

│ ├── assets/

│ │ └── react.svg ← React logo image

│ ├── App.css ← Styles for App component

│ ├── App.jsx ← ROOT COMPONENT (start here!)

│ ├── index.css ← Global CSS styles

│ └── main.jsx ← Entry point — renders <App />

│

├── index.html ← HTML shell (React mounts here)

├── package.json ← Dependencies and scripts

├── package-lock.json ← Exact version lock

└── vite.config.js ← Vite configuration

The Two Most Important Files

1. main.jsx The Entry Point

This is where React starts. It mounts your entire application into the HTML page:

  main.jsx
// src/main.jsx

import React from 'react'

import ReactDOM from 'react-dom/client'

import App from './App.jsx'

import './index.css'


// Find the <div id='root'> in index.html

// Mount the entire React app inside it

ReactDOM.createRoot(document.getElementById('root')).render(

<React.StrictMode>

<App />

</React.StrictMode>,)

Note

React.StrictMode is a development helper. It intentionally runs some code twice to help detect bugs. This does NOT affect your production build.

2. index.html: The HTML Shell

index.html

<!DOCTYPE html>

<html lang='en'>

<head>

<meta charset='UTF-8' />

<meta name='viewport' content='width=device-width, initial-scale=1.0' />

<title>My First React App</title>

</head>

<body>

<div id='root'></div>  <!-- React injects your app here -->

<script type='module' src='/src/main.jsx'></script>

</body>

</html>

02 Building Your First Component

Cleaning Up the Default App

The default Vite template has some starter code we don’t need. Let’s clear it out and build our own from scratch. Open src/App.jsx and replace everything with this:

App.jsx

// src/App.jsx

function App() {

return (

<div>

<h1>Hello, World!</h1>

<p>My first React app is working!</p>

</div>)
}
export default App

Save the file. Your browser at http://localhost:5173 should automatically update and show ‘Hello, World!’. that’s Vite’s Hot Module Replacement (HMR) in action.

03 Understand JSX:

Important

JSX looks like HTML but it compiles to JavaScript. Always follow JSX rules, they differ from HTML in key ways. VS Code’s ESLint extension will warn you when you break them.

04 Building Multiple Components

Why Multiple Components?

As your app grows, putting everything in App.jsx becomes messy and hard to maintain. Components let you split your UI into small, reusable, independent pieces. Each component has one job — and does it well.

Let’s rebuild our app with three components: Header, Main (with a greeting), and Footer.

Step 1: Create the Header Component

Create a new file: src/components/Header.jsx

  Header.jsx
// src/components/Header.jsx

const Header = () => {

return (

<header style={{

backgroundColor: '#20232A',

padding: '20px 40px',

display: 'flex',

alignItems: 'center',

justifyContent: 'space-between',

}}>

<h1 style={{ color: '#61DAFB', margin: 0, fontSize: '1.8rem' }}>

⚛ My React App

</h1>

<nav>

<a href='#' style={{ color: 'white', marginLeft: '20px', textDecoration: 'none' }}>Home</a>

<a href='#' style={{ color: 'white', marginLeft: '20px', textDecoration: 'none' }}>About</a>

<a href='#' style={{ color: 'white', marginLeft: '20px', textDecoration: 'none' }}>Contact</a>

</nav>

</header>)}

export default Header

Step 2: Create the Main/Greeting Component

Create: src/components/Greeting.jsx

Greeting.jsx

// src/components/Greeting.jsx

const Greeting = ({ name, role }) => {

const currentHour = new Date().getHours()

const getTimeGreeting = () => {

if (currentHour < 12) return 'Good Morning'

if (currentHour < 17) return 'Good Afternoon'

return 'Good Evening'

}

return (

<section style={{ padding: '60px 40px', textAlign: 'center' }}>

<h2 style={{ fontSize: '2.5rem', color: '#20232A' }}>

{getTimeGreeting()}, {name}! 

</h2>

<p style={{ fontSize: '1.1rem', color: '#555', marginTop: '16px' }}>

Welcome to your first React app. You are logged in as:

<strong style={{ color: '#0A76FF' }}> {role}</strong>

</p>

<p style={{ marginTop: '24px', color: '#888' }}>

Built with Love by 7Scribes , Design. Develop. Dominate.

</p>

</section>)}

export default Greeting

Step 3: Create the Footer Component

Create: src/components/Footer.jsx

Footer.jsx

// src/components/Footer.jsx

const Footer = () => {

const year = new Date().getFullYear()

return (

<footer style={{

backgroundColor: '#20232A',

color: '#888',

textAlign: 'center',

padding: '24px',

marginTop: 'auto',

}}>

<p>© {year} 7Scribes Digital Agency — Lahore, Pakistan</p>

<p style={{ fontSize: '0.85rem', marginTop: '6px' }}>

Built with React 18 | All rights reserved

</p>

</footer>)
}

export default Footer

Step 4: Assemble All Components in App.jsx

App.jsx: Assembled

// src/App.jsx

import Header from './components/Header'

import Greeting from './components/Greeting'

import Footer from './components/Footer'


function App() {

return (

<div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>

<Header />

<main style={{ flex: 1 }}>

<Greeting name='Rahat' role='Admin' />

</main>

<Footer />

</div>)
}


export default App

Pro Tip

Notice how we pass name=’Rahat’ and role=’Admin’ to the Greeting component? These are called props they are how parent components pass data down to children. Change these values and watch the UI update instantly!

Frequently Asked Questions

Q1: Do I need to know JavaScript before learning React?

Yes, a solid foundation in JavaScript is essential before React. You should be comfortable with: variables (let/const), functions (arrow functions), arrays (.map, .filter, .find), objects, template literals, destructuring, and the spread operator. If these feel shaky, spend 2 weeks reinforcing JavaScript first. React is a JavaScript library, not a replacement for JavaScript knowledge.

Q2: What is the difference between Create React App (CRA) and Vite?

Both create React projects, but Vite is vastly superior in 2025. Vite starts in under 500ms (CRA takes 30+ seconds), uses native ES modules, has instant Hot Module Replacement (HMR), and produces much smaller production bundles. CRA has been deprecated and is no longer actively maintained. Always use Vite (npm create vite@latest) for new React projects.

Q3: What is JSX and why does React use it?

JSX (JavaScript XML) is a syntax extension that lets you write HTML-like markup directly inside JavaScript. React uses JSX because it makes component structure visual and intuitive — you can see your UI structure right alongside the logic that drives it. JSX compiles to React.createElement() calls via Babel or SWC. You don’t have to use JSX (you can call React.createElement directly), but virtually no one does that in practice.

Q4: How do I add CSS to a React component?

There are 5 main ways:

Regular CSS file: import ‘./styles.css’ and use className.
CSS Modules: import styles from ‘./Component.module.css’ and use styles.className (scoped locally).
Inline styles: style={{ color: ‘red’, fontSize: ’16px’ }} (camelCase properties, object syntax).
Tailwind CSS: utility-first classes directly in JSX.
CSS-in-JS: styled-components or Emotion. For beginners, start with regular CSS or CSS Modules. Move to Tailwind when comfortable.

Q5 : What is the Virtual DOM and how does it make React fast?

The Virtual DOM is a lightweight JavaScript representation of the real browser DOM kept in memory by React. When your app’s state changes, React creates a new Virtual DOM tree, compares it with the previous one using a process called ‘diffing’, identifies the minimum number of changes needed, and applies only those changes to the real DOM. This is much faster than re-rendering the entire page, especially for apps with hundreds of dynamic elements.

Q6: Can I use React to build mobile apps?

Yes! React Native is a separate framework by Meta that uses React’s component model to build native iOS and Android apps. You write JSX components (instead of HTML elements, you use View, Text, Image, etc.) and React Native compiles them to native platform code. The mental model and hooks are identical to React, so learning React first makes learning React Native much faster. Many companies use one codebase for both web and mobile using tools like Expo.

Q7: How long does it take to learn React?

It depends on your JavaScript foundation. With solid JavaScript knowledge, most people can build basic React apps in 2–4 weeks and feel productive in 2–3 months. To become job-ready (including routing, state management, testing, and real projects), expect 4–6 months of consistent daily practice (2–3 hours/day). The fastest learners combine tutorial study with building their own projects, that’s the 7Scribes recommendation.

Q8: What is React StrictMode and should I use it?

React.StrictMode is a development-only wrapper component that helps detect problems in your app. In development, it intentionally renders components twice and runs useEffect cleanup/setup twice to surface bugs caused by side effects, deprecated APIs, and unexpected mutations. This double-invocation does NOT happen in production builds. Always keep StrictMode enabled, it’s an invaluable debugging tool that catches issues early.