Your First React App

🌟 Your First React App

In this lesson, you’ll:

  • Create a new React project

  • Run the development server

  • Edit your first component

We’ll use Vite because it’s fast and modern — recommended for React beginners.

🛠 Step 1: Create a React Project

Open your command prompt/terminal and run:

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

Enter the folder:

cd my-first-react-app

Install dependencies:

npm install

Run the app:

npm run dev

You will see a URL like:

👉 http://localhost:5173

Open it in your browser — Congratulations, React is running! 🎉

📁 Project Structure Overview

Inside the folder, you will see:

src/
┣ App.jsx
┣ main.jsx
public/
index.html

Key files:

File Purpose
main.jsx Entry file that renders React app
App.jsx Main component that displays UI
index.html Actual HTML served to browser

🧩 Step 2: Understanding main.jsx

Open src/main.jsx:


 

🧠 This code tells React:

“Render <App /> inside the HTML element with id root.”

✏ Step 3: Edit Your First Component (App.jsx)

Open src/App.jsx and replace content with:


 

export default App;

💡 The browser updates automatically — no refresh needed!

⚙ How It Works

React uses components (like Lego blocks) to build UI.
App() is your first component.

It returns JSX — a syntax that looks like HTML but runs inside JavaScript.

🎉 You Just Built Your First React App!

You now know how to:

✔ Create a React project
✔ Run the app
✔ Edit a component
✔ Use JSX

You may also like...