Hey there! I’m Shree, and this is the very first step of my React journey.

In this lesson, I’m building my first-ever React app: a simple "Hello World" app.

This isn’t about perfection — it’s about learning by doing, breaking things, and figuring them out together.

What We’ll Build

A super simple app that says:

“Hello, World — Shree’s React Arc!”

Step 1 — Setting Up the Project (Vite FTW)

We’ll use Vite because it’s fast and lightweight.

Open your terminal and run these commands:

# 1. Create a new project
npm create vite@latest hello-react-shree -- --template react

# 2. Move into the folder
cd hello-react-shree

# 3. Install dependencies
npm install

# 4. Run the development server
npm run dev

Once it starts, open your browser and go to http://localhost:5173.

💡 Tip: You can also use create-react-app, but Vite is faster and modern.

Step 2 — Writing Our “Hello World”

Open the file: src/App.jsx

Replace its content with this:

import React from 'react';

function App() {
  return (
    <div style={{ fontFamily: 'Inter, system-ui, sans-serif', textAlign: 'center', marginTop: '6rem' }}>
      <h1>Hello, World — Shree’s React Arc!</h1>
      <p>Welcome to day 1. Let’s build stuff and learn together.</p>
    </div>
  );
}

export default App;

Step 3 — Understanding What Just Happened

Let’s break it down quickly 👇

• JSX — It looks like HTML, but it’s actually JavaScript.
  Example: className replaces class, and inline styles are written as objects.
• Component — Our App is a function component. React apps are made of these small, reusable components.
• Render — createRoot(...).render(<App />) mounts the component to the div#root in index.html.

Step 4 — Common Errors (and Fixes)

1. Blank page / “root not found”
   → Check if your index.html has <div id="root"></div>
2. Syntax error in JSX
   → Make sure your file name ends with .jsx
3. Port error/app not starting
   → Close other running apps or change the port if prompted.

Next Up

In the next lesson, we’ll dive deeper into state and props — the core of React logic.

Basically, the fun stuff begins from here.