With a working curl call from chapter 3 under your belt, let's now set up the actual React project – with Vite, the same tool used in "React for Beginners".

Creating the project

npm create vite@latest magento-produkt-explorer -- --template react
cd magento-produkt-explorer
npm install
npm install react-router-dom

We install react-router-dom right away, since from chapter 9 on we navigate between the product list and the detail page – the same library "React for Beginners" uses starting in chapter 17.

Cleaning up the Vite template

Delete src/App.css and src/assets/, and replace src/App.jsx with an empty skeleton that we'll fill in over the coming chapters:

function App() {
  return (
    <div>
      <h1>magento-produkt-explorer</h1>
    </div>
  );
}

export default App;

npm run dev
# Opens at http://localhost:5173 - you should see 'magento-produkt-explorer'

A preview of the target structure

So you know what the coming chapters are building toward, here's already the COMPLETE structure that exists by the end of chapter 14:

magento-produkt-explorer/
├── .env
├── .env.example
├── .gitignore
└── src/
    ├── App.jsx
    ├── main.jsx
    ├── api/
    │   └── magentoApi.js
    ├── components/
    │   ├── ProductCard.jsx
    │   ├── Pagination.jsx
    │   └── SearchBar.jsx
    └── pages/
        ├── ProductListPage.jsx
        └── ProductDetailPage.jsx