Now it gets concrete: we create the skeleton for produktkatalog-web – THE project we'll build up together through the entire rest of this tutorial. Open a terminal and navigate to the folder where your project should live.

Where this tutorial leads

By the end of this series we'll have a real, working website: a searchable product list with data from a real API, detail pages with a review form, several sub-pages with routing, a simple login area, and a self-built review feature with its own server and database. This is the target project structure we're working towards:

produktkatalog-web/
├── index.html
├── package.json
├── vite.config.js
├── docker-compose.yml            (MySQL container for reviews)
├── server/                       (our own Node/Express server)
│   ├── package.json
│   ├── server.js
│   └── db.js
└── src/
    ├── main.jsx
    ├── App.jsx                   (routing)
    ├── index.css
    ├── api/
    │   ├── magentoApi.js         (Magento REST API: products)
    │   └── reviewsApi.js         (our own server: reviews)
    ├── context/
    │   └── AuthContext.jsx       (simple login state)
    ├── components/
    │   ├── ProductCard.jsx
    │   └── ProtectedRoute.jsx
    ├── hooks/
    │   └── useDocumentTitle.js   (custom hook)
    └── pages/
        ├── ProductListPage.jsx
        ├── ProductDetailPage.jsx
        ├── ReviewsPage.jsx       (nested route)
        ├── LoginPage.jsx
        └── AccountPage.jsx       (protected route)

Just like in the React Native tutorial: every chapter that creates or changes a file shows its COMPLETE content AND the current project structure – you can type along line by line and end up with exactly this app.

Why Vite instead of Create React App?

There are several tools for starting a new React project. We use Vite (French for "fast", pronounced "veet") – by now the most common tool, noticeably faster on startup and on changes than older alternatives, and without unnecessary legacy baggage.

npm create vite@latest produktkatalog-web -- --template react
cd produktkatalog-web
npm install

When prompted interactively, choose "React" and "JavaScript" (not TypeScript – there's a separate, more advanced tutorial for that). npm install downloads every dependency listed in package.json.

Starting the project

npm run dev

A local address appears in the terminal, usually http://localhost:5173. Open it in your browser – you'll see Vite's sample page live, and every code change shows up instantly in the browser, with no manual restart needed ("Hot Module Replacement", the web equivalent of "Fast Refresh" from the React Native tutorial).

Understanding the folder structure

A fresh Vite React project ships with, among others, these folders/files:

produktkatalog-web/
├── index.html       (the one and only real HTML file in the whole app)
├── package.json     (installed packages, like composer.json)
├── vite.config.js   (build tool configuration)
└── src/
    ├── main.jsx     (entry point: starts the app inside index.html)
    ├── App.jsx      (our first own component – this is where we start)
    └── index.css

index.html is "the one and only real HTML file" because React builds a single-page application (SPA): the browser loads this one HTML page ONCE, and React then only swaps out the content inside it – without the browser ever having to load a completely new page. That's also why index.html is almost empty – just a <div id="root"> that React renders its entire content into.

Opening App.jsx: our first real project file

Open src/App.jsx – this is our main component. Your editor already shows exactly this content:

function App() {
  return (
    <div>
      <h1>Vite + React</h1>
    </div>
  );
}

export default App;

.jsx instead of .js as the file extension is convention (not strictly required, but common): it marks files that contain JSX – more on JSX in the next chapter. Change the text on line 3 and save – the page in the browser updates instantly.