How do I install and configure React on a Mac? (2023)

Hello trainees! In this tutorial, we will learn how to install React.js library on macOS. React.js is a library that helps developers build highly efficient data-driven SPA applications. It is based on functional programming, based on the concept of immutability, and promotes a component-based architecture based on the principle of reuse once. In this article, we will understand the steps required to install React on Mac OS. We recommendreaction trainingafter following the installation steps.

For more information on using React, seeReact.

Installing React on MacOS - Steps

Before we go through the installation steps, we need to look at the necessary prerequisites for the installation.

1. Prerequisite

• System requirements: Mac OS > 10.10
• Minimum RAM memory: 4 GB
• Storage space: 10 GB available storage space
• Internetbrowser: Chrome, Safari, Opera, Microsoft Edge
• Internet connection: 512 kbps and higher

2. Introduction to React

In this tutorial we will install the React library on macOS. Before installing, we need to quickly understand React.

React is a library that helps web developers and architects meet the needs of customers who demand high data flow and responsive user interfaces in the context of the data.
It is based on a component-based architecture. The web page can be rendered in terms of parent and child based components.
It relies heavily on Virtual DOM, which acts as a performance optimizer for DOM operations.

A website consisting ofHTMLhas a DOM tree that the browser uses to render the web page.

When the user interacts on a page, this involves adding and entering information based on the user's activity. Example: A user has added an item to their shopping cart. The shopping cart will display the updated item to reflect the user's decision.

Behind the scenes, the HTML document undergoes a specific transformation that helps share the updated page. As already mentioned, the HTML document is represented by the DOM tree. In the scenario above, the DOM needs some modifications that involve adding and removing certain HTML nodes. This helps display relevant information that represents what a user is trying to achieve in the context of updating their purchase decision.

This insert and delete operation in the HTML DOM incurs storage costs. The virtual DOM acts as a performance optimizer in terms of DOM update operations.

He keeps two copies; One is the actual copy of the DOM (react DOM) and the other is the change to be made. The process by which a minimal change is generated in the Reaction DOM is also explored in the process called Reconciliation.

To understand the DOM, we can visualize it as a tree.

The tree has roots and branches. Likewise, the DOM has the HTML element at the top and the nodes connected to the parent node below it. Regarding the tree analogy, we can represent the head node as a trunk, with multiple nodes connected to the trunk. And on these nodes, insert and delete operations are optimized with React.

3. A brief introduction to Node.js and npm

Ryan Dahl is the inventor ofNode.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. The Chrome V8 engine is written in C++. It runs on Windows, macOS and Linux.

After installing Node.js, we can run the React-based project locally on our system during development. This also allows us to deploy our application to the production server.

Some of Node.js features include:

one. to formJavaScriptas the main language
B. I/O without blocking
C. Supports asynchronous programming
i.e. You can handle multiple connection requests with a single server

Node.js allows us to perform read and write operations on the server. It also offers functions for working with databases.

Npmjs.org is an online code repository with thousands of modules (npm) and allows us to install node modules with basic commands. Some modules are independent and others are linked to work effectively due to the dependencies between them.

Node.js hosts many modules, and instead of building the functionality from scratch, it's easier to find a module, reuse it, and extend its functionality. Developer projects often have time and budget constraints. For the developer community, npmjs.org acts as a lifeline when it comes to Node.js-based development.

4. Download and install Node.js

After downloading the Node.js version based on the operating system, we can follow the installation steps.
One thing to note is that NPM is automatically installed with the Node.js installation.

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

In the installation below we can see that Node.js v14.15.1 and npm v6.14.8 are installed

When you click the "Continue" button, the installer will ask for "Read license".

It also shows two buttons: disagree and agree.

To install Node.js we need to click OK.

To continue we must provide the login password to proceed with the installation.

In the screenshot below, the user has administrator rights to install the software. Therefore, the administrator must enter the password to continue.

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

On the next screen, the progress bar shows the progress of the installation.

After the installation we will get a summary as shown below.

After closing this window by clicking on the "Close" button, we must verify that we have installed the mentioned version of Node.js

To open the command terminal, press Command + Spacebar

This will open Spotlight search as shown below.

We must type terminal and press Enter.

Once the terminal is visible we must enter the following command

node-v

As we can see, it shows us the node version (v14.15.1) according to the screenshot.

So we installed version 14 of Node. Each build is indicated by semantic versions. The first digit in this case is 14, which is a big release. The second digit stands for new features of the version and the third digit for patches and bug fixes associated with the main version.

Installing Node.js from the command line.

As a workaround, we can also install node.js via terminal.

But as a premise, weI need homemade beernot macOS.

We assume we have Homebrew installed on our system.

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

prepare - v

The above command informs us about the homebrew version.

To refresh the drink, enter the following command

Bier-Update

After running the above command, we need to write

The bee installation node

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

To verify the use of Node.js installation

or -v

How to check using npm installation

npm-v

Congratulations, we have Node.js and NPM installed.

5. Create React App for React App without macOS

Now let's install the create-react-app app on macOS.

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

Let's continue with the installation steps.

Type the following command in the terminal to create a folder called react-app.

mkdir reaction app

Then navigate to the React app directory as follows:

cd react application

To check the directory, type and enter the command as shown below

people with disabilities

After confirming that we are in the right directory, enter the following command.

npx create-react-app meine-app

npx is a module included in npm.

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

So sit back and relax.

Once the above command has run successfully....

.... navigate to my application directory

CD my app

and type

start npm

If the command runs successfully, it opens the browser at localhost:3000 in the browser.

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

6. Download and install React (explicit command)

This step is for awareness raising only.

In the previous step, we didn't install React.js explicitly because it is installed using the create-react-app package.

We can also install React.js with the following command. And we may need to install module dependencies ourselves.

npm install respond --save

7. File Folders and Structure

We can see we haven't touched the codebase, but we found the minimal one-page web app running on our macOS.

To see the structure of the code, we need to open the code editor, for example Sublime, Atom, etc.

and open the foldermy application

As we can see there are several folders and at a high level there are the following folders:

node_modulespublicsrc

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

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

The application displays the App.js code in the src folder.

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

8. Summary

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

We've covered the concept of voting, the use of Node.js in the JavaScript world, and its ability to handle non-blocking I/O to serve client connection requests concurrently.

We tested two methods to install Node.js, namely through the package manager and another through the command line.

To install React.js, we'll rely on the create-react-app module for a quick start. We can also install React.js from the command line. In order not to be overwhelmed with too many details, we have chosen the create-react-app method for this tutorial.
We built our first React app and saw that it works.

To familiarize ourselves with the code from a development perspective, we quickly reviewed the critical files that run the application.