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. Check out pay after placement Full Stack Developer to kick start your career in web development.
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. To advance your career in web development, enroll in Web Development training.
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!
Looking to level up your coding skills? Join our paid Python course and unlock endless possibilities! From building websites to data analysis, Python is the language of the future. Don't miss out, enroll today!
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.
