Setting Up React Native Development Environment

# CHAPTER 2

Setting Up React Native Development Environment #

1. Introduction #

2. Learning Objectives #

• Install Node.js and verify npm is working.

• Understand the difference between Expo CLI and React Native CLI.

• Install the Expo Go app on your physical mobile device.

• Set up an Android Emulator using Android Studio (Optional but recommended).

• Initialize a new React Native project.

3. Step 1: Installing Node.js #

1. 1. Go to nodejs.org and download the LTS (Long Term Support) version for Windows or Mac.

1. 2. Run the installer and accept all default settings.

1. 3. To verify it worked, open your computer's terminal (or Command Prompt) and type: node -v

1. 4. Also verify npm (Node Package Manager) by typing: npm -v

4. Expo CLI vs React Native CLI #

1. Expo CLI (Recommended for Beginners & 90% of Apps):

• Pros: Incredibly easy setup. No need to install Android Studio or Xcode. You can test iOS apps on a Windows PC! It comes with pre-configured packages for Camera, Maps, and Notifications.

• Cons: You don't have direct access to the native iOS/Android folders (unless you "eject" or use Expo prebuild).

2. React Native CLI (The "Bare Workflow"):

• Pros: Full control. You have direct access to the android/ and ios/ folders to write custom Java or Swift code.

• Cons: Setup takes hours. You MUST have a Mac to compile for iOS. Prone to frustrating native build errors.

*In this course, we will use Expo, as it is the official recommendation of the React Native core team for starting new projects.*

5. Step 2: Creating an Expo Project #

1. 1. Open your terminal.

1. 2. Navigate to your desktop (or coding folder): cd Desktop

1. 3. Run the setup command:

npx create-expo-app MyFirstApp

1. 4. Wait for the tool to download the template and install the node modules.

1. 5. Move into your new folder: cd MyFirstApp

6. Step 3: Running the App on a Physical Device #

1. 1. Download the Expo Go app from the Apple App Store or Google Play Store on your physical phone.

1. 2. Ensure your phone and your computer are connected to the exact same Wi-Fi network.

1. 3. In your computer's terminal, start the local server:

npx expo start

1. 4. A massive QR code will appear in your terminal!

1. 5. Open the Expo Go app on Android (or the Camera app on iPhone) and scan the QR code.

1. 6. Your app will wirelessly bundle and appear on your phone!

7. Step 4: Setting up Emulators (Optional but Recommended) #

• For Android (Windows/Mac): Download Android Studio. During installation, ensure "Android Virtual Device (AVD)" is checked. Open Android Studio -> Virtual Device Manager -> Create a Pixel phone emulator and launch it.

• For iOS (Mac Only): Download Xcode from the Mac App Store. Open Xcode -> Go to Preferences -> Locations -> Ensure Command Line Tools are selected. Open the Simulator app.

Once your emulator is running, press a (for Android) or i (for iOS) in your npx expo start terminal, and Expo will automatically install the app onto the virtual phone!

8. Visual Learning: The Expo Workflow #

[ VS Code ] -> Save App.js -> [ Node Server (Metro Bundler) ]
                                      |
                                  (Over Wi-Fi)
                                      |
                            [ Physical Phone running Expo Go ]
                            (Instantly refreshes the screen!)

9. Common Mistakes #

• Network Errors with Expo Go: If you scan the QR code and your phone says "Network Connection failed," it is almost always because your PC and phone are on different Wi-Fi networks (e.g., PC on Ethernet, phone on Wi-Fi, or a strict corporate firewall blocking local ports).

• Fix: Connect both to the same Wi-Fi, or plug your phone into the PC via USB.

10. Best Practices #

• Use Visual Studio Code: Download VS Code as your code editor. Install the following extensions: ES7+ React/Redux/React-Native snippets (for code autocomplete) and Prettier (to format your code beautifully on save).

11. Practice Exercises #

1. 1. What command line tool provided by Node.js is used to instantly execute the create-expo-app script without installing it globally?

1. 2. If you are developing on a Windows machine, can you view an iOS version of your app on a physical iPhone using Expo Go?

12. MCQs with Answers #

13. Interview Questions #

• Q: Explain the fundamental differences between a "Bare Workflow" (React Native CLI) and a "Managed Workflow" (Expo). In what specific scenario would a CTO be forced to eject from Expo to the Bare workflow?

• Q: Walk me through the local network requirements and communication flow that allows the Expo Go app to instantly hot-reload JavaScript code from your computer's IDE to a physical mobile device.

• Q: What is the node_modules folder, and why must it always be included in a .gitignore file?

14. FAQs #

15. Summary #

16. Next Chapter Recommendation #