Amit chakraborty

Posted on Nov 9 Originally published at amitchakraborty.dev

React Native, from a blank machine to a shipped app · 2. A machine that builds: Node, JDK, Xcode and the Android SDK

#tutorial #mobile #reactnative #settingupnodeandjdk

React Native, from a blank machine to a shipped app · Chapter 2 of 12 · Mobile · new chapter every Monday morning

By the end of this chapter: Get a working toolchain on macOS, Windows and Linux, and learn to identify which layer is broken when a build fails.

The problem

Say you are Emma, a junior mobile engineer who has just started working with React Native. You have a blank machine in front of you, and you want to set up a development environment to build and run React Native apps. You have heard that you need to install Node, JDK, Xcode, and the Android SDK, but you are not sure where to start or how to verify that everything is working correctly. You try to follow the official documentation, but you are not sure which versions to install or how to configure them. As a result, you are stuck and do not know how to proceed.

You try to install Node using the official installer, but you are not sure which version to choose. You also try to install the Android SDK, but you are not sure which packages to select. You are worried that you will install the wrong versions or configure them incorrectly, which will cause problems later on. You need a step-by-step guide to help you set up your machine and verify that everything is working correctly.

The cost of not having a working development environment is high. You will not be able to build and run your React Native app, which means you will not be able to test and debug it. You will also not be able to learn and practice React Native, which is essential for your career as a mobile engineer. You need to get your machine set up and working as soon as possible.

Before you start

To set up a React Native development environment, you will need to install the following:

Node.js (version 16.14.2 or later)
JDK (version 11 or later)
Xcode (version 13.4 or later) on macOS
Android SDK (version 31 or later) on Windows or Linux
A code editor or IDE (such as Visual Studio Code)

You can verify that Node is installed correctly by running the command node -v in your terminal. This should print the version of Node that you just installed.

Setting up Node and JDK

To set up Node and JDK, you will need to download and install the official installers from the Node and Oracle websites. You can then verify that they are installed correctly by running the node -v and java -version commands in your terminal.

Setting up Xcode and the Android SDK

To set up Xcode, you will need to download and install it from the Mac App Store. You can then verify that it is installed correctly by running the xcode-select -p command in your terminal.

To set up the Android SDK, you will need to download and install the official installer from the Android website. You can then verify that it is installed correctly by running the adb --version command in your terminal.

Build it

Here are the steps to set up your machine:

Install Node.js by downloading and running the official installer from the Node website. Verify that it is installed correctly by running the command node -v in your terminal. The output should be v16.14.2 or later.
Install JDK by downloading and running the official installer from the Oracle website. Verify that it is installed correctly by running the command java -version in your terminal. The output should be java 11 or later.
Install Xcode by downloading and installing it from the Mac App Store. Verify that it is installed correctly by running the command xcode-select -p in your terminal. The output should be the path to the Xcode installation.
Install the Android SDK by downloading and running the official installer from the Android website. Verify that it is installed correctly by running the command adb --version in your terminal. The output should be Android Debug Bridge version 1.0.41 or later.

When this breaks

Here are some common issues that you may encounter when setting up your machine:

Node is not installed correctly: If you run the command node -v and the output is not v16.14.2 or later, you may need to reinstall Node.
JDK is not installed correctly: If you run the command java -version and the output is not java 11 or later, you may need to reinstall JDK.
Xcode is not installed correctly: If you run the command xcode-select -p and the output is not the path to the Xcode installation, you may need to reinstall Xcode.
The Android SDK is not installed correctly: If you run the command adb --version and the output is not Android Debug Bridge version 1.0.41 or later, you may need to reinstall the Android SDK.

What it costs

The cost of setting up a React Native development environment is the time it takes to download and install the required software. However, the cost of not having a working development environment is much higher. Without a working environment, you will not be able to build and run your React Native app, which means you will not be able to test and debug it. You will also not be able to learn and practice React Native, which is essential for your career as a mobile engineer.

In the interview

In an interview, you may be asked to explain how to set up a React Native development environment. A weak answer would be to simply state that you need to install Node, JDK, Xcode, and the Android SDK without explaining how to verify that they are installed correctly. A strong answer would be to explain the steps to set up each component, including how to verify that they are installed correctly using commands such as node -v, java -version, xcode-select -p, and adb --version.

As a junior engineer, you would be expected to explain the basic steps to set up a React Native development environment. As a senior engineer, you would be expected to explain the more advanced details, such as how to configure the environment variables and how to troubleshoot common issues.

Your tasks

Set up a React Native development environment on your machine by following the steps in this chapter. Verify that each component is installed correctly using the commands node -v, java -version, xcode-select -p, and adb --version.
Research and explain the differences between the various versions of Node, JDK, Xcode, and the Android SDK. How do they affect the development environment, and what are the implications for building and running React Native apps?
Try to break your development environment by uninstalling one of the required components. Then, try to fix it by reinstalling the component and verifying that it is installed correctly. What did you learn from this exercise, and how can you apply it to troubleshooting common issues in the future?

Your tasks this week

Do the exercises above before the next chapter. Reading a tutorial and doing
one are different activities and only one of them changes what you can build.

Stuck on any of them? Say so — describe what you tried and what happened:
tell me where you got stuck. I read every one, and the questions
that come back more than twice get answered in the next chapter.