This article will help you set up the React Native working environment on the macOS operating system for the iOS mobile operating system.
To work, you need the following components: Node, Watchman, XCode, and the React Native CLI.
You need an editor to create program code. We recommend using
VS Code But you can use any other editor you like.
Homebrew - a command line utility in macOS and Linux that allows you to install packages and applications. In short,
Homebrew is a package manager for macOS.
Node.js - is a
Node before, make sure it is version 10 or higher.
Watchman - An open source file viewer that monitors files and takes action when they change. Install it to improve performance.
CocoaPods - it is a powerful yet elegant tool for managing the dependencies of Cocoa libraries that developers use in their iOS and MacOS projects.
XCode - is an integrated development environment (IDE) for macOS software developed by Apple. The easiest way to install
XCode - through Mac App Store. Inside
Xcode, you need to install the desired
iOS simulator and command line tools.
The simulator is installed in the Xcode settings, in order to enter the application settings in the top panel, select
A window with settings will open. To install the simulator, go to the
Components tab. The list of available simulators opens, choosing the one you like, install it by clicking on the arrow next to the simulator name.
To configure the tools, go to the
Locations tab in the
Xcode settings. The line
Command Line Tools: in the drop-down list select the most recent version of the command line tools.
Creating a project and further working with a project in React Native is similar to creating a project in Windows 10. The built-in command line interface React Native
npx is used to create a project. Let's create a project called
MyReact. After starting the command in the terminal, the process of creating a project will go, it is not quick.
Metro Bundler is a
Metro has compiled the
The launch is carried out in the terminal, before starting the command, go to the directory with our project
MyReact and write the following command:
If no errors were found at startup, we will see the following picture:
Do not turn off the terminal where Metro Bundler is running. To launch the application, open a new terminal. This step also requires you to go to the root of the
MyReact project. After the transition, execute the command:
This command will launch the application of the project
MyReact in the simulator
iOS. If you haven't changed any files in the project, you should see a greeting from
As mentioned at the beginning of this article, any editor will work, but we recommend using
VS Code. To install the recommended editor, you can use the previously specified
Homebrew package manager, for this you need to write the following command in the terminal:
VS Code, launch it. To open the project
MyReact in the main menu we find the line
Open folder ..., by clicking on which a dialog box will open, in which you need to select the folder with our project
After selecting a project, the Navigator navigation panel will appear for working with the project.
After we have installed and launched
VS Code, we can start working. To do this, open the file
App.js in the root of the project. This file describes what the user will see when the application starts. On first launch, we saw a greeting from
React Native. We can change several lines and when saving, the picture on the simulator will change. Replace all the code in the
App.js file with the one below and save the file:
Thanks goes to these wonderful people (emoji key):