Monday, June 30, 2025

How to Create Your First React App Step by Step (Beginner’s Guide)

 Are you new to React? Want to build your first React app but don’t know where to start?

Don’t worry! 😎 In this tutorial, I’ll show you step by step how to create your first React app using the popular tool Create React App.

By the end, you’ll have a running React project and understand the folder structure so you can start coding right away.

Step 1: Install Node.js

React uses Node.js and npm (Node Package Manager).
Download from 👉 https://nodejs.org/

After installing, check the versions:

bash

node -v npm -v


Step 2: Create the React App

Use npx (comes with npm) to quickly generate your project:

bash

npx create-react-app my-first-app

This creates a new folder called my-first-app with everything set up.

Step 3: Start the Development Server

Go to your project folder:

bash

cd my-first-app

Run:

bash

npm start

Your new React app will open automatically at:

arduino

http://localhost:3000

Step 4: Understand the Folder Structure

Here’s what’s inside:

bash

my-first-app/ ├── node_modules/ # dependencies ├── public/ # static files ├── src/ # your React code │ ├── App.js # main component │ └── index.js # entry point ├── package.json # project config

Step 5: Edit Your First Component

Open src/App.js and replace its content with:

jsx

function App() { return <h1>Hello React World!</h1>; } export default App;

Save the file – the browser will auto-refresh and show your message!


Step 6: Build for Production

When your app is ready to go live:

bash

npm run build

This creates an optimized build/ folder you can deploy to your server or services like  GitHub Pages.


What’s Next?

You can now:

Add new components
Use state and props
Connect APIs
Deploy online
React is fun and powerful – keep exploring! 🔥




Hope this guide helped you build your first React app easily!
👍 If you enjoyed this post, keep following the blog for more daily tips on JavaScript, React, and web development.