Welcome again! The topic of today’s article is how to install React NAtive on Mac. Before we start with the instructions, let’s find out what React Native is.
React Native is a framework for developing cross-platform iOS and Android apps:
- appeared in early 2015;
- built on top of React;
- does not use WebView and HTML technologies;
- native components are bound in JS and wrapped in React;
- iOS support is better than Android, but the dynamics are promising.
Is it the first of this type? Well, no. A range of several frameworks already exist. Among them are:
- PhoneGap – implementation of native components on web technologies, runs in WebView;
- Xamarin – from Mono developers for Linux, applications are written in C # (bought by Microsoft);
- NativeScript – Similar ideas to React Native: XML + JS + CSS.
Developer tools
- Your favorite JS editor;
- Xcode and $ 100 per year for the Developer account to collect and publish apps;
- Patience + Android Studio + SDK + Emulator.
React Native: Top View
- Release about every 2 weeks;
- All the charms of early adopters: incompatible changes, stackoverflow driven development.
React Native: Inside Look
- no HTML, but there are platform components in JSX;
- no CSS, but there are CSS-like polyfills;
- no DOM API;
- ES6 / ES7 and everything babel can, but no JIT (on iOS).
Now, let’s take a look at how to install and set up the React Native on Mac. You can use Expo CLI and React Native CLI to develop your app on Mac. You can also see the detailed description on the official website.
You need to install Homebrew, NodeJS, and Watchman first.
Homebrew
Homebrew is a Mac package manager for installing and managing packages.
First, open a terminal and run the command below to check if Homebrew is installed on your system.
brew –version
If Homebrew is installed then you will see its version.
Homebrew 2.2.13
Homebrew / homebrew-core (git revision 976650; last commit 2020-04-13)
If the version is not displayed then you can install it using the command below.
/ bin / bash -c “$ (curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)”
Once installed, run the command below again.
brew –version
If the installation was successful, you will see its version. For example:
Homebrew 2.2.13
Homebrew / homebrew-core (git revision 976650; last commit 2020-04-13)
NodeJS
React native is Javascript, so we need to install NodeJS to run it. You can download it from https://nodejs.org/
To install NodeJS, run the Homebrew command below.
brew install node
Once installed, run the command below to check if NodeJS is installed correctly.
node -v
> v13.11.0
Along with installing NodeJS, npm (Node Package Manager) is also installed. Run the command below to check your npm version.
npm -v
> 6.13.7
Watchman
Watchman is a library from Facebook that monitors certain folders or files and if they change, then it can initiate some actions. In React Native, Watchman keeps track of the source files and if they are added or changed, it rebuilds them.
You can download Watchman from this link: https://facebook.github.io/watchman/
Run the command below to install Watchman.
brew install watchman
After installation, you need to check the version of Watchman.
watchman -v
> 4.9.0
Now we need to install React Native CLI.
React Native CLI
Run the npm command below to globally install the React Native CLI.
npm install -g react-native-cli
After installation, we check the version as usual.
react-native –version
> 4.6.3
Xcode
We need Xcode to develop apps for IOS. Click on the link below to install Xcode via the App Store
https://apps.apple.com/us/app/xcode/id497799835
You also need to install Xcode command line tools. Open Xcode, then choose Preferences from the Xcode menu. Go to the Location panel and install the tools by selecting the most recent version from the Command Line Tools drop-down list.
Once Xcode is installed, the command line tools also need to be installed. Open Xcode and click “Preferences”. Then go to the “Locations” tab in the top menu. Then you need to select the latest version in the “Command Line Tools” drop-down list.
Project creation
Run the command below to initialize your React Native project.
react-native init TestApp
Now let’s run the application in the IOS simulator.
cd TestApp
npm run ios or react-native run-ios
After starting the project, another terminal window will open. If everything was installed correctly, the emulator will open and the project will start in it.
If during the launch of the application an error occurred about the incorrectly configured environment, you should run the command below and then run the project again.
source ~ / .bash_profile
npm run ios
Conclusion
To summarize everything, I hope that this article will be a helpful guide for you during the installation of React Native on your Mac device. Or maybe you can consider a React Native development company for your project.
