How To Install And Set up React on macOS X

We know that React is getting more popular among developers nowadays. It is a JavaScript library that is easy to learn and code. macOS is one of the most loved operating systems by developers. In this article, we will discuss the steps to install React JS on MacOS X.

React is maintained by Facebook and a community of individual developers and companies. It can be used as a base, for the development of single-page or mobile applications.

It also enables the feature of reusability of components which significantly reduces the number of lines in our project.

React is a powerful library to deal with complex projects in an easy manner. React Native, one of the most lovable hybrid mobile application development frameworks is also based on React.

Here we are going to install and set up a React app on macOS X Operating System.

Prerequisites

To continue with this article, the reader must know the basics of working with terminal in MacOS.

1. Install and Update Homebrew

Homebrew is a popular package manager for macOS. We can install all the packages and dependencies required to install React using Homebrew. So at first, we need to install it on our system.

To install Homebrew, open the Terminal and run the below command.

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

So we have installed Homebrew on our system successfully. Now we need to update it so that we can get the latest version of packages available on HomeBrew.

brew update

2. Install Nodejs

In this tutorial, we are going to install React using the Node Package Manager(NPM). So first, we need to install Nodejs on our system. NPM will be installed with Nodejs itself.

Nodejs can be installed on our system using the brew.

brew install node

Alternative method

Alternatively, we can download and install Nodejs from the official website. If so, it does not need Homebrew to be installed on our system.

Currently, 14.16.0 is the stable version of Nodejs and it can download and install on our system using the URL below.

 https://nodejs.org/en/download/current/ 

From the page, select the macOS installer option and download the pkg file. Then install it on our system.

3. Install Create-React-App Tool

Now we need to install a tool named create-react-app globally using NPM. This tool is used in the future to create a new react application.

npm install -g create-react-app

4. Creating a New React Project

After successful installation of create-react-app, we can create our first react application using this tool.

create-react-app awesome-project

The above command will create a new react project named awesome-project.

We can combine steps 3 and 4 with a single command using NPX( package runner tool that comes with NPM 5.2+).

npx create-react-app awesome-project

Here NPX will temporarily install the create-react-app tool and create a new react project with the name awesome-project.

5. Running the Application

So we have created a new React project in our macOS system. Now let’s start the app with the below commands.

cd awesome-project
npm start

This will opens up the newly created react app in a new tab on our browser with the URL http://localhost:3000. If port 3000 is busy, the app will open up in any other port available.

Summary

Here we discussed the steps to install React on MacOS. As the favorite operating system of developers, macOS is getting more popular. React developers can use this guide to quickly set up an environment for React in their mac system.

Be the first to reply

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.