The Two Commands Every React Beginner Types Without Understanding

Today was the day of tools. npm. npx. Vite. JSX. Fragment tags. Ports. My notion workspace filled up fast, and my head filled up even faster. By 2pm I had written things I understood in class but couldn't explain to anyone outside the room.

So I'm writing this the way I wish someone had written it for me before class — not the textbook version. The honest version. The "why does this even exist" version.

Here's what today actually covered, in plain words.

What you'll understand by the end:

• Why npm and npx are two different tools that solve two different problems
• What Vite is and why the folder it creates looks the way it does
• Why JSX has those strange rules, and what Fragment tags are actually for

1. npm vs npx — The Kitchen and the Hotel Analogy

Sir gave us this analogy and I haven't been able to think of a better one since.

npm is like setting up a kitchen at home.

When you set up a kitchen, you go buy ingredients — oil, salt, rice, spices — and you store them in your cupboard. They stay there. You use them every day. Every project you cook uses those stored ingredients.

That's npm install. You download a package. It lives inside your project's node_modules folder. It's there permanently, ready every time you need it.

# This downloads React and saves it to your project
npm install react

npx is like ordering from a hotel.

You don't buy ingredients. You don't store anything. You call the hotel, they cook once, you eat, they leave. Nothing stays in your kitchen.

That's npx. It runs a package one time — downloads it temporarily, executes it, and then it's gone. You're not installing anything that lives in your project.

# Runs create-react-app once to set up your project — then disappears
npx create-react-app my-app

This is why you use npx to create a project but npm to run it. You only need the setup tool once. But you need React itself every single day.

The full name makes it obvious once you know it: npm is Node Package Manager — it manages. npx is Node Package Execution — it executes, one time, and leaves.

2. Vite — What It Is and Why the Folder Looks Like That

When you create a React project with Vite, you run:

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

And suddenly there's a folder on your screen with files you didn't write. Most beginners stare at this and feel lost. I did.

Here's what Vite actually is: a build tool. Its job is to take your React code — which the browser cannot read directly — and convert it into regular HTML, CSS, and JavaScript that any browser understands. It also runs a local development server so you can see your work at localhost:5173 without putting anything on the internet.

Vite also bundles in third-party tools automatically. When you open the project folder, you'll see something like this:

my-app/
├── public/          ← static files (images, favicon)
├── src/
│   ├── App.jsx      ← your main component
│   ├── App.css      ← its styles
│   └── main.jsx     ← entry point — connects React to the browser
├── index.html       ← the one HTML file that runs everything
├── package.json     ← list of all your dependencies
└── vite.config.js   ← Vite's settings

The most important thing to notice: there's only one HTML file. That's not a mistake. That's the SPA (Single Page Application) design we talked about in yesterday's class — one file, JavaScript handles the rest.

main.jsx is where React connects to that HTML file:

// main.jsx — this is where React "wakes up" and takes over the page
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

ReactDOM.createRoot(document.getElementById('root')).render(<App />)

That document.getElementById('root') is grabbing the single <div id="root"> in index.html. React injects everything inside that one div. The entire app — all your pages, components, buttons — lives inside that one div.

3. JSX — HTML Inside JavaScript, and Why It Has Rules

This is the part that confused me the most, and I think it confuses most beginners.

JSX stands for JavaScript XML. It lets you write what looks like HTML directly inside a JavaScript function.

// This is JSX — looks like HTML but it's inside JavaScript
function Greeting() {
  return (
    <h1>Hello,!</h1>
  );
}

But it's not HTML. The browser doesn't read JSX. Vite compiles it into plain JavaScript before the browser ever sees it. That <h1> becomes something like React.createElement('h1', null, 'Hello, Ebenezer!') under the hood.

Because it's JavaScript pretending to be HTML, it has strict rules that HTML doesn't have.

Rule 1: A component must return exactly one element.

A JavaScript function can only return one value. So your JSX can only have one root element wrapping everything else.

// ❌ This breaks — two root elements
function App() {
  return (
    <h1>Title</h1>
    <p>Subtitle</p>
  );
}

// ✅ This works — one root element wrapping both
function App() {
  return (
    <div>
      <h1>Title</h1>
      <p>Subtitle</p>
    </div>
  );
}

Rule 2: All tags must be closed.

In HTML, <br> and <img> are fine without closing. In JSX, they are not. XML rules apply — every tag must close itself.

// ❌ HTML habits that break in JSX
<br>
<img src="photo.jpg">
<input type="text">

// ✅ The JSX way — self-closing tags
<br />
<img src="photo.jpg" />
<input type="text" />

Also notice: in JSX you write className instead of class, because class is already a reserved word in JavaScript.

// ❌ class is a JS keyword — it conflicts
<div class="container">

// ✅ className is what JSX uses
<div className="container">

4. Fragment Tags — The Wrapper That Disappears

So Rule 1 says you need one root element. But what if you don't want an extra <div> cluttering your HTML just because React demanded it?

That's exactly what Fragment tags solve.

// ✅ Fragment — wraps without adding a real DOM element
function App() {
  return (
    <>
      <h1>Title</h1>
      <p>Subtitle</p>
    </>
  );
}

The <> and </> are short for <React.Fragment> and </React.Fragment>. They satisfy React's "return one element" rule without adding any actual HTML element to the page. When the browser renders this, it sees the h1 and p directly — no wrapper div anywhere.

This matters more than it sounds. When you're building lists or tables, unnecessary wrapper divs break layouts. Fragments let you keep your structure clean.

5. Servers and Ports — What's Actually Happening When You Run npm run dev

When you type npm run dev in your terminal, something happens that a lot of beginners don't think about.

A local server starts on your machine. That server is what you're accessing when you go to http://localhost:5173 in your browser. Your React app isn't on the internet — it's running on your own computer, and your browser is connecting to it like a client connecting to a remote website.

localhost means "this machine". 5173 is the port — the specific door on your machine where Vite's server is listening.

Your machine has thousands of ports. Port 80 is usually for regular websites. Port 3000 is what older React setups used. Vite chose 5173 as its default. If you run two projects at the same time, they'd need different ports — otherwise they'd clash trying to use the same door.

This is why sometimes your terminal shows Port 5173 is in use, trying 5174 instead. Another project already has that door open.

6. Hooks — The Teaser for Next Class

Sir mentioned Hooks at the very end and I could see half the class perk up, because we'd heard the word before.

Hooks are functions that give your components special powers. Things like remembering data, fetching from an API, or running code when the page loads.

The most common one is useState — it lets a component remember a value across re-renders:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0); // start at 0

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

That's all I'll say for now. Hooks deserve their own post — and they're getting one. Today was setup day. Hooks are where React starts feeling genuinely powerful.

What You Learned Today

• npm installs and stores packages permanently in your project — like stocking a kitchen
• npx runs a package once and leaves — like ordering from a hotel
• Vite is a build tool that sets up your project, runs a local dev server, and compiles your code so the browser understands it
• JSX is HTML-inside-JavaScript — it has strict rules because it's actually XML, not HTML
• Fragments (<>...</>) let you return multiple elements without adding useless divs to your page
• localhost:5173 is your local server — your own machine serving your app to your browser during development

Over to you: Which part tripped you up the most — the npm vs npx difference, or the JSX rules? I'm still wrapping my head around the self-closing tag habit after years of writing HTML.

Drop it in the comments — I read every one. 👇