So far, you've used React to build websites. But what if you could use the same skills to build mobile apps for both iOS and Android? That's the core idea behind React Native.

React Native is a framework for building actual native mobile apps using JavaScript and React. It's not a website pretending to be an app inside a container. When you write React Native code, it gets converted into the real, native user interface elements that iOS and Android use. A <View> component in your code becomes a UIView on an iPhone and an android.view on an Android device. This gives your app the speed and feel of a native application because, well, it is one.

The biggest advantage is code reusability. Instead of maintaining two separate codebases, one for iOS in Swift or Objective-C and another for Android in Kotlin or Java, you can share a large portion of your code. This saves time, money, and makes it easier to ship features on both platforms at once.

Before you can create a React Native app, you need to set up your development environment. This involves a few key pieces of software.

First, you need Node.js, which is a JavaScript runtime that lets you run JavaScript outside of a web browser. It comes bundled with npm (Node Package Manager), which you'll use to install other tools. You'll also need a code editor like VS Code.

Next, you need the tools for the specific mobile platforms you want to build for: Xcode for iOS (which only runs on macOS) and Android Studio for Android.

For our purposes, we'll use the official React Native Command Line Interface (CLI). To install it, open your terminal and run this command:

This makes the react-native command available globally on your system.

Creating a new project is straightforward. In your terminal, navigate to the directory where you want to store your project and run:

This command creates a new directory called MyFirstApp with all the necessary files and configurations. It might take a few minutes to complete as it downloads all the required packages.

Once it's done, navigate into the new project directory: cd MyFirstApp

Inside, you'll see a few important files and folders:

• App.tsx: This is the main component of your application, similar to App.js in a web React project. This is where you'll start writing your code.
• node_modules/: Contains all the JavaScript dependencies for your project.
• ios/: This folder holds the generated Xcode project. You'll open this folder if you need to configure something specific to the iOS platform.
• android/: This folder holds the generated Android project. You'll work in here for Android-specific configurations.

For most of your work, you will stay inside App.tsx and create new component files, just like in a standard React project.

To run your app, you'll need an emulator (a virtual device running on your computer) or a physical device.

First, you need to start the Metro bundler, which is a JavaScript bundler that comes with React Native. It takes all your JavaScript code and dependencies and combines them into a single file that the mobile app can understand.

This will start the Metro server in your terminal. Now, open a new terminal window, navigate to your project directory again, and run one of the following commands.

To run on an iOS simulator (macOS only):

To run on an Android emulator:

The first time you run this, it will build the native app, which can take some time. After that, a simulator or emulator window will pop up on your screen showing your new app. You should see a welcome screen. Now you can open App.tsx in your code editor, make a change to the text, and save the file. The app in the emulator will update automatically!