Connect with us

    Hi, what are you looking for?

    Tech

    How to install React Native on Mac

    install react native

    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.

    Advertisement. Scroll to continue reading.

    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)

    Advertisement. Scroll to continue reading.

    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

    Advertisement. Scroll to continue reading.

    > 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

    Advertisement. Scroll to continue reading.

    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

    Advertisement. Scroll to continue reading.

    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

    Advertisement. Scroll to continue reading.

    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.

    Click to comment

    You must be logged in to post a comment Login

    Leave a Reply

    Advertisement
    Advertisement

    You May Also Like

    Movies

    Watching movies is one of the most delightful things in this modern era and most of the people love to watch movies from different...

    General

    The UEFA European Championship is one of the greatest European football festivals with a prestige second only to World Cup. The big names of...

    Tech

    How to be ultra-high net worth persons has never been a question. People do not understand that having money in the bank does not...

    Business

    Business cards have been a critical business apparatus for quite a while. And in this day and age, business cards actually have a crucial...

    Advertisement