Before building your first app, you need three things: Node.js (the runtime the development tools run on), a code editor of your choice, and the Expo command line. 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 an error like "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 Native 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.
• React Native Tools (by Microsoft) – debugging support directly in the editor.

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 Native 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. Optionally install the React Native Console plugin – shows Metro bundler logs directly in its own tool window.
3. 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).
4. Open a new React Native project simply via File > Open and selecting the project folder – WebStorm automatically detects package.json and offers matching run configurations.

Step 2: The Expo command line

A separate install of the Expo command line isn't needed anymore – we'll use it directly via npx in the next chapter (a tool that ships with Node.js automatically and downloads packages on demand, temporarily, without installing them permanently).

Step 3: The Expo Go app on your phone

Also download the free Expo Go app from the App Store (iOS) or Google Play Store (Android) onto your own phone. This lets you see your app taking shape live on a real device already in the next few chapters, with no publishing required – more on this in the "Testing on Your Own Device" chapter.