Setting Up the Playground – Installing Node.js and React Native

Alright, let’s get things rolling! You’re about to embark on your journey to building a mobile app with Node.js and React Native, but before you can start writing any code, we need to set up your development environment. Think of this chapter as prepping the tools and materials before building a house—you wouldn’t start hammering nails without the wood, right?

In this chapter, we’ll guide you step-by-step through the process of installing Node.js and React Native, so that you can have everything up and running in no time. We’ll also talk about a couple of essential tools, like package managers and development environments, that will make your coding life a whole lot easier.

Ready? Let’s dive in!

Step 1: Installing Node.js

What is Node.js, and Why Do You Need It?

Before we jump into the installation, let’s briefly talk about what Node.js is and why it’s crucial for your app. As we mentioned earlier, Node.js is a JavaScript runtime built on Chrome’s V8 JavaScript engine. In simple terms, it allows you to run JavaScript code outside of the browser, which means you can use JavaScript to build the server-side (or backend) of your app.

Why is that awesome? Well, you can use the same language (JavaScript) for both your backend (Node.js) and your frontend (React Native). This simplifies things a lot—no need to switch between different languages or paradigms. Now that you’re convinced of Node.js’s importance, let’s get it installed.

Downloading Node.js

Go to the Node.js website: Head over to https://nodejs.org. You’ll see two options for downloading Node.js:
- LTS (Long Term Support): This version is more stable and recommended for most users.
- Current: This version includes the latest features, but it might be less stable.
I recommend choosing the LTS version unless you have a specific reason to use the current one.
Install Node.js: Once the download is complete, open the installer and follow the steps. It’s pretty straightforward—just keep clicking “Next” until you reach “Finish.”

Verify Installation

After the installation, you need to verify that everything is working as expected. Open your terminal (Command Prompt on Windows, Terminal on macOS, or a terminal emulator on Linux) and type the following command:

node -v

This command checks the version of Node.js installed on your machine. If everything is set up correctly, you’ll see something like:

v16.14.0

Next, verify that NPM (Node Package Manager) is also installed. NPM comes bundled with Node.js, so you don’t need to install it separately. Run this command to check the NPM version:

npm -v

You should see something like:

8.5.0

Awesome! You now have Node.js and NPM installed. NPM is going to be your best friend throughout this process because it helps you manage all the packages (or libraries) you’ll use in your app. Think of it like the App Store for your development environment—everything you need is just a command away.

Alternative: Installing Node.js with a Version Manager

If you plan to work on multiple projects that might require different versions of Node.js, you might want to install a Node.js version manager like NVM (Node Version Manager). This tool allows you to install and switch between different versions of Node.js with ease.

To install NVM on macOS or Linux, run the following command in your terminal:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

After installation, restart your terminal and type the following command to verify that NVM is installed:

nvm --version

Now you can use NVM to install Node.js:

nvm install node

To use a specific version of Node.js, run:

nvm use 16.14.0

And voilà! You can easily switch between different versions of Node.js depending on your project’s needs.

Step 2: Installing React Native

Now that we have Node.js installed, let’s move on to React Native. React Native is the framework we’ll use to build the mobile app itself. It allows us to write one codebase that works on both Android and iOS—pretty cool, right?

Choosing Between React Native CLI and Expo

There are two ways to set up React Native: using the React Native CLI (Command Line Interface) or using Expo. Both have their pros and cons:

React Native CLI: This gives you more control over the app and allows you to integrate native code (like Swift or Java) if needed. It’s more complex to set up and manage, but it’s the choice for advanced users.
Expo: Expo is a toolchain that makes it much easier to set up and build React Native apps. It takes care of a lot of the complexity, making it perfect for beginners. The trade-off is that you don’t have as much control as you do with the React Native CLI.

For this tutorial, we’re going to use Expo because it’s beginner-friendly and will get us up and running quickly.

Installing Expo CLI

Install Expo CLI globally: Open your terminal and run the following command to install the Expo CLI globally on your machine:
```
npm install -g expo-cli
```
This command tells NPM to install the Expo CLI so that you can use it from anywhere on your system.
Create a new React Native project: Once Expo is installed, create a new project by running the following command:
```
expo init MyFirstApp
```
You’ll be prompted to choose a template for your project. For now, select the “blank” template. This will give us a clean slate to work with.
Navigate to your project folder: After the project is created, navigate to the project folder by running:
```
cd MyFirstApp
```
Run the app: Now, let’s see if everything is working. Run the following command to start the Expo development server:
```
expo start
```
Expo will launch a development server and open a new window in your browser. You’ll see a QR code on this page. To view your app, you can use the Expo Go app on your phone (available on both Android and iOS).

Testing Your App

Install Expo Go: On your smartphone, go to the App Store (iOS) or Google Play Store (Android) and search for “Expo Go.” Install it on your device.
Scan the QR code: Open the Expo Go app on your phone and use it to scan the QR code displayed on your browser. This will load your app on your device.

If everything went well, you should see a screen with the words “Open up App.js to start working on your app!” Congratulations—you’ve just set up your first React Native app!

Running Your App on an Emulator

If you don’t want to use your phone, you can run your app on an emulator instead. Here’s how to do it:

Android Emulator: If you’re on macOS or Windows, you’ll need to install Android Studio. It comes with an Android emulator that lets you run and test Android apps on your computer.
1. Download and install Android Studio from here.
2. Open Android Studio and create a new virtual device. This will be your emulator.
3. Start the virtual device and go back to your terminal. When you run expo start, it should automatically detect the emulator and run your app on it.
iOS Simulator: If you’re on macOS, you can use the iOS Simulator that comes with Xcode.
1. Download and install Xcode from the Mac App Store.
2. Open Xcode and go to Preferences -> Components, and install an iOS Simulator.
3. Start the simulator and, in your terminal, run expo start. Expo should automatically detect the iOS Simulator and run your app on it.

Step 3: A Quick Tour of the Project Structure

Before we wrap up this chapter, let’s take a quick look at the structure of a typical React Native project created with Expo.

When you open your project folder, you’ll see the following:

App.js: This is the main file where your app’s logic and UI will live. Think of it as the heart of your app.
node_modules/: This folder contains all the dependencies (libraries) that your app needs to run. You’ll rarely need to touch this folder, but it’s essential to your project.
package.json: This file contains metadata about your app and a list of its dependencies. It’s like your app’s CV—it tells NPM what libraries your app needs and what scripts you can run.
assets/: This is where you’ll put images, fonts, and other static files that your app will use.

That’s it for the basic setup! You now have Node.js, NPM, Expo, and a basic React Native project up and running.

Wrapping It Up

In this chapter, we went over how to set up your development environment for Node.js and React Native. You’ve installed Node.js, NPM, and Expo, and you’ve even run your first React Native app on your phone or an emulator. These tools are the foundation of everything we’ll be doing moving forward.

Now that your environment is set up and ready to go, the real fun begins! In the next chapter, we’ll dive deeper into React Native, explore its components, and start building the user interface of your app.

🚀

0x3d.Site