Installation of React on Mac

Read it in 9 Mins

Last updated on
07th Jun, 2022
Published
18th Jan, 2021
Views
4,181
Installation of React on Mac

Hello learners! In this tutorial we are going to learn the installation of React.js library on macOS. React.js is a library which helps developers to develop highly efficient data-driven SPA apps. It is based on functional programming, relies on the concept of immutability and encourages component-based architecture based on the Single reusability principle. In this article, we will understand the steps involved in the installation of React on Mac OS. We recommend React training once you go through the installation steps. 

For more information on using React, you can visit usereducer in React. 

Installing React on MacOS - Steps

Before we perform the installation steps, we need to look at the prerequisites needed for installation.

1. Prerequisite

  • System requirements: mac OS > 10.10
  • Minimum RAM: 4 GB
  • Storage space: 10 GB available space
  • Internet browser: Chrome, Safari, Opera, Microsoft Edge
  • Internet connectivity: 512 kbps and above

2. Introduction to React

In this tutorial, we will install the react library on macOS. Before the installation, we need to have a quick understanding of React.

React is a library which helps web developers and architects to serve the needs of customers having demands of high data flow and fast responsive UIs in the context of data.
It is based on the components-based architecture. The webpage can be represented in the form of Parent and Child based components.  
It relies heavily on Virtual DOM, which acts as a performance optimization to DOM operations.

A Web page which is composed of HTML has a DOM tree, with the help of which the web page is rendered by the browser.

When the user is interacting on a page, it involves addition and insertion of information based on the user activity.  for e.g. A user has added an item to the cart. The cart is showing the updated item to reflect the user’s decision.

Behind the scene, the HTML document undergoes a certain transform which helps to share the updated page. As we have mentioned, the HTML document is represented by the DOM tree. In the above scenario, the DOM needs some changes which involve addition and deletion of certain HTML nodes. This helps to show the relevant information which represents what a user is trying to achieve in the context of updating his buying choice.

For this insertion and deletion operation on HTML DOM, there is a memory cost involved.Virtual DOM acts as a performance optimizer as far as the DOM update operations are concerned.  

It maintains two copies; one is the real copy of the DOM (react DOM) and another one is the change to be done. The process by which minimal change takes place on the react DOM is also studied under the process called reconciliation.

To understand the DOM we can visualise it as a tree.  

The tree has roots and branches. In a similar manner the DOM has the HTML element at the top and down below there are nodes which are connected to the parent node. In terms of tree analogy, we can represent the parent node as the trunk, with various nodes connected to the trunk. And on these nodes, the insertion and deletion operations get optimized by using React.

3. A short intro to Node.js & npm

Ryan Dahl is the inventor of Node.js.
Node.js code is an open source, cross-platform, JavaScript runtime environment that runs JavaScript code. It is based on the Chrome V8 engine. Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.

After installation of Node.js, we can run the react based project locally on our system during development. This also allows us to deploy our app on the production server.

Some of the features of Node.js include:

a. Uses JavaScript as primary language
b. Non-blocking I/O
c. Supports Asynchronous programming
d. Can handle multiple connections requests by using a single server

Node.js allows us to perform read, write operations on the server. It also provides the functionality to work with the databases.

Npmjs.org is an online code repository of thousand modules (npm) and it allows us to install node modules using basic commands. Some modules are independent and some are interrelated to run effectively, due to dependencies between them.

Node.js hosts several modules and instead of building functionality from scratch, it is easier for us to look for a module and reuse and extend its functionality. Developer projects generally have time and budget constraints. For the developer community, npmjs.org acts as a lifesaver as far as the Node.js based development is concerned.

4. Download Node.js and installation

To install Node.js there are various steps.  

It can be installed by visiting here.

Once we have downloaded the Node.js version based on the operating system, we can perform the installation steps.
One thing we need to note is that NPM is auto-installed with Node.js installation.

We need to click on the package file which we have downloaded node-v14.15.1.pkg

In the below installation we can see it will install Node.js  v14.15.1 and npm v6.14.8

When we click on the Continue button, the installer will ask to ‘Read Licence’.  

It also shows two-buttons-- Disagree and Agree.

To install the Node.js we need to click on Agree.

To proceed further we need to specify the Login password to continue the installation.

In the below screenshot the user has administrative rights for software installation. So, the admin needs to type the password in order to proceed further.

After clicking on the Install Software button, click on the Install button.

In the next screen, the progress bar will indicate the installation progress.

Post-installation, it will provide us with a summary as below.

After closing this window by clicking on the close button, we need to verify whether we have installed the said version of Node.js

To open command terminal, press Command + Space bar

This will open Spotlight search as below.

We need to type Terminal and hit enter.

Once the terminal is visible, we need to type the following command

node - v

As we can see it is showing us the node version (v14.15.1) as in the screenshot.

So, we have installed Node version 14. Each build is denoted by semantic versioning. The first digit, in this case, is 14, which represents a major release. The second digit represents new features with the release and the third digit represents patch and bug fixes as associated with the major release.

Node.js installation by command line.

As an alternative method, we can install node.js by the terminal as well. 

But as a prerequisite, we need to have homebrew in MacOS.

We are assuming, we have homebrew installed in our system.

And to proceed with the command-line installation, we need to open the terminal and type the following command.

brew - v

The above command will inform us about the homebrew version.

To update the brew, type the following command

brew update

After the above command has been executed, we need to type

brew install node

The installation will take some time, so give some time to the system and be patient.

To verify the Node.js installation use

node -v

To verify the npm installation use

npm -v

Congratulations, we have installed Node.js and NPM.

5. Create-react-app for react app on macOS

Now, we are going to install create-react-app on macOS.

Create-react-app is a quick way to set up a single page application code with minimal steps and no configuration.

Let’s proceed with the installation steps.

Please type the following command in the terminal to create a folder with the name react-app. 

mkdir react-app

Then navigate to directory react-app as follows:

cd react-app

To verify directory, type command and enter as below

pwd

Once we have confirmed that we are in the right directory type below command.

npx create-react-app my-app


npx is a module which is included with npm.

The installation steps as shown in the above screenshot will take some time.

So, sit back and relax.

Once the above command has been executed successfully....

….navigate to my-app directory

cd  my-app

And type

npm start

When the command is executed successfully, it will open the browser at localhost:3000 in the browser.

And we can give ourselves a pat on back for the small win!

6. Download and Install React (Explicit command)

This step is for awareness only.

In the previous step, we have not explicitly installed React.js as this is installed with the help of create-react-app package.

We can also install the React.js  by using the following command.  And we may need to install the module dependencies on our own.

npm install react --save

7. File folder and structure

We can see that we have not touched the codebase but found the minimal single page web application running on our macOS.

To see the code structure, we need to open the code editor e.g. Sublime, Atom etc.

And open the folder my-app

As we can see, there are various folders and at a high level there are below folders:

node_modules
public
src

In the public folder, we can see index.html. This is the page template.

The index.js in src folder is the JavaScript entry point.

The app is displaying the code from the App.js in the src folder.

In the my-app folder, the package.json is an important file which mentions the app name and module dependencies. Feel free to explore further.

8. Summary

In this tutorial, we have learnt about React.js, and the component-based architecture model in React.js. We also had a high-level overview of the virtual DOM.

We touched on the concept of reconciliation, the usage of Node.js in the world of JavaScript and its capability to handle non-blocking I/O output to fulfil client connection requests simultaneously.

We have checked two methods for Node.js installation, namely with the package manager and another one by using the command line.

To install React.js, we have relied on the create-react-app module for a quick start. We can also install the React.js by command line. To prevent being overwhelmed with too many details we have picked the create-react-app method for this tutorial.
We created our first react app and saw it running.

To become familiar with the code in terms of development perspective, we quickly checked the important files which are running the app.

Profile

Gaurav Mishra

Author

Gaurav Mishra is an expert in user-interface development and user-experience design, with more than 13+ years of experience. Comfortable to work with any kind of technology, he has growth mindset and keep a beginner mind. He has provided workshops and training in UI development, UX design, and Drupal. He has mentored and trained various students around the world. Gaurav has played the key role in the success of many organizations and likes to build products and services from scratch which delight people.  He likes to challenge the status quo to bring out the best from team & reshape the organisation culture. He likes all genres of music, from Indian classical to club music.