Before we create our first project, you need three things: Node.js, a code editor of your choice, and Docker (which we won't actually use until chapter 22, but it's best to install it now). This chapter covers both common editors – you only need one of them.

Step 1: Install Node.js

Download the current LTS version ("Long Term Support", the stable recommendation) from nodejs.org and install it as usual. Afterwards, verify it worked in a terminal:

node --version
npm --version

Both commands should print a version number (e.g. v20.11.0). If you get "command not found" instead, the installation didn't succeed, or the terminal needs to be restarted.

Option A: Setting up Visual Studio Code

VS Code is free, lightweight, and by far the most common choice for React development. Download it from code.visualstudio.com and then install these extensions (via the Extensions icon in the left sidebar, the four-squares symbol):

• ES7+ React/Redux/React-Native snippets – keyboard shortcuts that auto-insert typical code building blocks.
• Prettier – Code formatter – automatically formats your code on save, keeping indentation and style consistent.
• ESLint – catches typical errors and style issues as you type.

Enable "Format on Save" under Settings (Ctrl/Cmd+,) > Editor: Format On Save, so Prettier runs automatically every time you save.

Option B: Setting up WebStorm/PhpStorm

WebStorm (or PhpStorm with the JavaScript plugin enabled, if you – like on this project – already use PhpStorm for Magento) is paid software, but ships with React support practically built in, with no need to hunt down extensions.

1. In PhpStorm: open Settings/Preferences > Plugins, search for "JavaScript and TypeScript" and make sure it's enabled (enabled by default in most PhpStorm installations).
2. Under Settings > Languages & Frameworks > JavaScript > Prettier, enable Prettier and check "Run on save" once the project exists (Prettier gets installed as a project dependency, see the next chapter).
3. Open a new React project simply via File > Open and selecting the project folder – WebStorm automatically detects package.json and offers matching run configurations.

Step 2: Install Docker (for later)

Starting in chapter 22, we'll build our own small review feature with its own server and its own MySQL database – for that we'll need Docker. It's best to install Docker Desktop now (from docker.com, for Windows/Mac) or Docker Engine via your Linux package manager. Verify it after installing:

docker --version
docker compose version

We explain exactly what Docker is and how it works in detail in chapter 22, right at the point where we actually need it for the first time – for now, the install is all you need.

No Magento shop of your own? No problem either

Starting in chapter 22, our app also connects to a product API – either your own Magento 2 shop, or a free, public test API without any login as a substitute. We'll show both options side by side there, with identical surrounding code – so you don't need your own shop to follow this tutorial.