Setting Up Your Playground (Your First React App)

Quick Recap from the previous post

In our last post, you discovered why React was created — to fix the messiness of pure JavaScript by making UI building faster, smarter, and reusable through components and the Virtual DOM.

Now it’s time to get your hands dirty. In this post, we’ll guide you step-by-step in setting up your React playground so you can start building real things.

Why “Playground”?

Think of your React setup like a digital art studio:

• You install the tools (like brushes and colors)
• You create a canvas (React project)
• And from there, you can make anything — websites, apps, games, or tools

Tools You’ll Need

Step 1: Install Node.js

Go to https://nodejs.org and download the LTS version. This will install both Node and NPM.

Open PowerShell on Windows or Terminal app on Mac/Linux To verify:

node -v
# This checks if Node.js is installed, and shows the version. Example: v20.5.1

npm -v
# This checks if npm (Node Package Manager) is installed, and shows its version. Example: 10.2.0

Step 2: Create a New React App

Use Vite (fast and modern) or Create React App (classic and beginner-safe).

Option A: Using Vite (Recommended)

npm create vite@latest my-react-app
# This creates a new React project named "my-react-app" using Vite.
# You'll be asked to pick a framework — choose "React" and then "JavaScript" (not TypeScript, for now).
# Use npx vite@latest
# As a fallback if 'npm create vite@latest' doesn't work

cd my-react-app
# This moves you into the project folder you just created.

npm install
# This installs all the required packages (React, Vite, etc.) listed in package.json.

npm run dev
# This starts a local development server.
# Open your browser and visit http://localhost:5173 to see your first React app live!

Option B: Using Create React App (slower)

npx create-react-app my-react-app
# This downloads and sets up a full React project named "my-react-app" using Create React App.
# It may take a few minutes the first time.

cd my-react-app
# Move into the project directory.

npm start
# Starts the development server.
# Open your browser and visit http://localhost:3000 to see your app running!

Pro Tip for Beginners

• If npm start or npm run dev doesn’t open your browser, just go to the link shown in your terminal (usually http://localhost:3000 or http://localhost:5173).
• You can stop the server anytime by pressing Ctrl + C in your terminal.

Step 3: Open in VS Code

1. Open VS Code
2. Click File > Open Folder and select my-react-app
3. Your React app is ready!

Step 4: Explore the Files

• src/App.jsx → Where you’ll start writing your components
• public/index.html → The single page your React app lives in
• package.json → List of tools your app uses

What You Just Did

• Installed Node & React
• Created a working React project
• Ran your first React app in the browser (localhost:5173 or localhost:3000)
• Took your first real step into the world of frontend dev

Try This

Open src/App.jsx and change:

<h1>Hello React</h1>

to

<h1>Hello! I built my first React app!</h1>

Save → Browser updates instantly

This is the magic of React!

What’s Next?

In the next post:
“Understanding Components – Your Building Blocks”
We’ll start writing your first custom React components and begin building your UI piece-by-piece.