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. 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, acts as a lifeline when it comes to Node.js-based development.

(Video) How to install react js in mac ? How to create your first react app in mac ?

4. Download and install Node.js

There are several steps to installing Node.js.

It can be installed by visitingon here.

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

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

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

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.

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

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.

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

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.

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

(Video) React JS Installation in M1 Macbook Air/Pro 2021 | SachinHere

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.

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

We must type terminal and press Enter.

Once the terminal is visible we must enter the following command


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.

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

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


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.

(Video) First React app using create-react-app on Macbook M1 | VS code | npx | npm

To verify the use of Node.js installation

or -v

How to check using npm installation


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

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

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....

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

.... navigate to my application directory

CD my app

and type

start npm

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

(Video) ReactJS Environment Setup | Creating First React App | Setup VScode for MacOS | Window the same

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

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

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


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.

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

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.

(Video) How to install React on Apple MacBook Air M1 macOS #howtoinstallreact 100% working

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


How do you install and configure react? ›

Create your React app
  1. Open a terminal(Windows Command Prompt or PowerShell).
  2. Create a new project folder: mkdir ReactProjects and enter that directory: cd ReactProjects .
  3. Install React using create-react-app, a tool that installs all of the dependencies to build and run a full React.js application:
Sep 20, 2022

How do I set up react manually? ›

Step by Step
  1. Make sure node is installed in your system. Install Node. ...
  2. Create project folder and package. json. ...
  3. Install webpack dependencies. npm i --save-dev webpack webpack-cli webpack-dev-server. ...
  4. Install the Babel dependencies. ...
  5. Install required Linters and path. ...
  6. Install react and react-dom. ...
  7. Create index. ...
  8. Create App.

How do I know if react is installed on my Mac? ›

  1. Open cmd and type 'react-native --v' or 'react-native --version'
  2. Open your project and open package.json file. U will see react-native version.

How to install npm in mac? ›

Now, if you are using a macOS, let's understand the process of Node.js and NPM installation.
How to Install Node.js and NPM on Mac?
  1. Step 1: Download the .pkg Installer. ...
  2. Step 2: Run Node.js Installer. ...
  3. Step 3: Verify Node.js Installation. ...
  4. Step 4: Update Your NPM Version.
Oct 6, 2022

How much RAM is required for react? ›

The minimum memory requirement for R.E.A.C.T is 8 GB of RAM installed in your computer. Additionally, the game developers recommend somewhere around 16 GB of RAM in your system.

How to install React using npm command? ›

You can install React using npm package manager by using the below command.
  1. import React from 'react';
  2. import logo from './logo.svg';
  3. import './App.css';
  4. function App() {
  5. return (
  6. <div className="App">
  7. <header className="App-header">
  8. <img src={logo} className="App-logo" alt="logo" />

How do you install React using npm install? ›

ReactJS installation and setup
  1. npm install -g create-react-app.
  2. create-react-app test-project.
  3. cd test-project npm start.
  4. <div id="root"></div>
  5. <div id="root"></div>
  6. ReactDOM. render( <h1>Welcome to React World</h1>, document. getElementById('root') );

What is the command used to install React? ›

Once the React installation is successful, we can create a new React project using create-react-app command. Here, I choose "reactproject" name for my project.

Why is React so hard to setup? ›

This is due to its modular nature. Most React modules are interrelated and require you to use other software to build a complex application. You'll also need knowledge of functional programming. You need to know the concepts of curried, immutable, and higher-order functions, which are useful for React.

Do you need to install anything to use React? ›

You don't need to install anything to play with React.

How do you setup React without create-React-app? ›

  1. Create a node project. create a new folder, open it in VSCode and run npm init -y this will initialize a new node project and add the package. ...
  2. Install Babel dependencies. ...
  3. Install Webpack dependencies. ...
  4. Install HtmlWebpackPlugin. ...
  5. Install React dependencies. ...
  6. Add React files. ...
  7. configure Babel. ...
  8. configure Webpack.
Apr 18, 2022

How do I open react app in Terminal Mac? ›

Open up your terminal.
  1. If you've previously installed create-react-app globally via npm install -g create-react-app , it is recommended that you uninstall the package first. ...
  2. If you've never installed create-react-app before, you can simply run this command: npx create-react-app myfirstreactapp.

Does macOS use react? ›

You can run React Native for macOS apps on Mac devices with versions Catalina (10.15) or newer. For a full and detailed list of the system requirements and how to set up your development platform, see our System Requirements documentation on our website.

How to install react on M1 Mac? ›

How to set up React Native on M1 Mac 2022 edition
  1. Make sure you have Xcode installed. ...
  2. Make sure to install Xcode Command Line tools are installed. ...
  3. Install homebrew. ...
  4. Install the current LTS version of Node. ...
  5. Install watchman. ...
  6. Install Cocoapods. ...
  7. Lets' create a new project to make sure your installation is working properly.
Apr 13, 2022

Can I use npm in Mac? ›

You should have some familiarity with the Mac Terminal application since you'll need to use it to install and test Node and NPM. You'll also need the Terminal to use Node. js and NPM. The Terminal application is located in the Utilities folder in the Applications folder.

Where is npm config Mac? ›

npm gets its config settings from the command line, environment variables, and npmrc files.
The . npmrc file
  1. per-project config file (/path/to/my/project/. npmrc)
  2. per-user config file (~/. npmrc)
  3. global config file ($PREFIX/etc/npmrc)
  4. npm builtin config file (/path/to/npm/npmrc)

How do I know if npm is installed on my Mac? ›

To see if NPM is installed, type npm -v in Terminal. This should print the version number so you'll see something like this 1.4.

What are the biggest limitations of React? ›

5 Big Limitations of React
  • It's a Library, Not a Framework. Like other Javascript libraries, React contains pre-written code. ...
  • It Uses JSX. React uses JSX, a syntax extension to JavaScript. ...
  • Does Not Support SEO. React, by design, was not built with SEO in mind. ...
  • Lack of Updated Documentation. ...
  • Fast Development Speed.
Jan 7, 2023

Is 1 month enough for ReactJS? ›

You can learn JavaScript basics over the course of a few months. Yep. Even though JavaScript is a step up from the most fundamental web languages like HTML and CSS (which can be learned in under a month), web development professionals agree that that's about as long as it takes to get started.

Is React overkill for small apps? ›

Using React can be overkill if the requirements are too simplistic. For example, you need to make a few pages with no dynamic elements or customization. In cases like these, it might suffice to use simple HTML and a bit of JavaScript.

How do you install and run ReactJS on Mac? ›

In order to install ReactJS on MacOS, you must first have NodeJS and NPM installed. NodeJS is a JavaScript runtime which makes it possible to run JavaScript outside of the browser. NPM(node package manager) is used to install libraries such as ReactJS on the command line.

Why we use npm install in React? ›

NPM modules consume the various functions as a third-party package when installed into an app using the NPM command npm install . Third-party NPM modules are the unit of logic for a specific functionality or a full-fledged library, such as reactstrap, material-ui, redux-form, and so on.

Do I have to install React every time? ›

Since all of your projects might be different based on what they are, you simply can't use the same react library everywhere by installing it once.

How do I install the first React app? ›

If you don't have it installed on your system, then you need to head to the official Node. js website to download and install Node, which also includes NPM (Node Package Manager). Select the "Recommended For Most Users" button and download the current version for your operating system.

Is npm I for npm install? ›

There is no difference, since "npm i" is an alias for "npm install". They both do the exact same thing (install or update all the dependencies in your package-lock.

How do I start npm React? ›

How to NPM Start for React Tutorial Project
  1. Installing create-react-app.
  2. Create a New React App.
  3. What Does package. json Look Like?
  4. Build and Run Our App.
  5. Eject.
  6. Unit Testing.
Apr 10, 2019

Do you need node JS for React? ›

Some people mistakenly assume that Node is required in order to use React. It is not. You don't need Node to run a React project. You don't even need a browser.

Can you learn React in 2 days? ›

For a programmer who is already familiar with HTML and at least one other programming language, learning React will take no more than a single day. React may be learned by a novice programmer in a matter of days. There are more libraries and technologies that may be used with React, such as Redux or Relay.

Can I learn React in 2 weeks? ›

If you've mastered HTML/CSS as well as JavaScript, learning React should take you no longer than a few weeks. React restructures the way you code, but fundamentally many of the concepts will be the same as what you're accustomed to.

What is the best way to start with React? ›

The quickest way start learning React is to write React directly in your HTML files.

Can a beginner learn React without knowing JavaScript? ›

You don't need to be a JavaScript expert to start your ReactJS journey, but just as knowledge of ingredients is a must for any chef hoping to master cooking, the same is true for learning ReactJS.

Should I install React globally or locally? ›

You should install it globally in order to create a react project anywhere inside your system. It's not even needed to install create-react-app anymore since you can do npx create-react-app my-app and always use the latest version without polluting your system.

Is React easy for beginners? ›

Both HTML and CSS are integral to any web development project. If you have these skills already, then learning React should be a relatively straightforward process. It has its own unique set of challenges, but it is an excellent tool to have in order to start or further your career as a web developer.

Is there any other way to create React app? ›

The easiest option to make a React web application is by using the <script> tag on an HTML web page. Using this simple method, you can create a React-based web app within a few minutes without requiring any tools.

Can you build a website with just React? ›

React is a fantastic and wildly popular tool for building websites and apps. It creates a world where JavaScript and HTML live in happy harmony in the same files, and it efficiently renders your ever-changing data to the browser.

How do I run react in Xcode? ›

✅ Running App through Xcode
  1. Go to your App folder, then go to ios folder. You'll see a file named AwesomeProject. xcworkspace .
  2. Open this file and it will open your App in Xcode.
  3. Select the desired simulator and click the ▶️ button to run your App.

How do I find ReactJS version on Mac? ›

1. Another simple method to check the ReactJS app version is by navigating to the node_modules/react/cjs/react. development. js You can check the version under the comment section below the image.

How do I run react JS app? ›

Instead of using webpack and babel you can install ReactJS more simply by installing create-react-app.
  1. Step 1 - install create-react-app. ...
  2. Step 2 - Delete all the source files. ...
  3. Step 3 - Add files. ...
  4. Step 4 - Run the project.

How do I change my default browser to react? ›

By default, Create React App will open the default system browser, favoring Chrome on macOS.
If you want to change the default browser when you are running a npm start or yarn start , the simplest way to do that is edit your package. json file.
  1. BROWSER=firefox.
  2. BROWSER=google-chrome-stable.
  3. BROWSER=vivaldi.
Aug 6, 2018

Can you make Mac apps on react? ›

React Native can also be used to create desktop applications for Windows and macOS devices using the Microsoft framework - React Native for Windows + macOS. As we can read on the framework's site: "it brings React Native support for the Windows SDK as well as the macOS 10.14 SDK.

Which command is used to install react app? ›

Installation. Then you create a new React project with the command create-react-app , followed by the name of your project.

How to install react via npm? ›

ReactJS installation and setup
  1. npm install -g create-react-app.
  2. create-react-app test-project.
  3. cd test-project npm start.
  4. <div id="root"></div>
  5. <div id="root"></div>
  6. ReactDOM. render( <h1>Welcome to React World</h1>, document. getElementById('root') );

Is it OK to install Rosetta on Mac M1? ›

Rosetta is an Apple framework that allows Apps not written for the new M1 CPUs to be translated to code the M1 understands and can run. Its made by Apple, and should not affect your Mac in any way. Its perfectly safe.

How to install using npm? ›

To install a package, npm uses the following algorithm:
  1. load the existing node_modules tree from disk.
  2. clone the tree.
  3. fetch the package.json and assorted metadata and add it to the clone.
  4. walk the clone and add any missing dependencies.
  5. dependencies will be added as close to the top as is possible.
Jun 14, 2018

How to install npm and node? ›

How to Install Node.js and NPM on Windows
  1. Step 1: Download Node.js Installer. In a web browser, navigate to ...
  2. Step 2: Install Node.js and NPM from Browser. Once the installer finishes downloading, launch it. ...
  3. Step 3: Verify Installation.
Oct 28, 2019

Which web server is best for React? ›

Here are the best platforms that developers and businesses can use to host React apps seamlessly.
  • Netlify.
  • Firebase.
  • Vercel.
  • Heroku.
  • AWS S3.
  • AWS Amplify.
  • Render.
  • Surge.

Can you make a whole website with React? ›

React is a fantastic and wildly popular tool for building websites and apps. It creates a world where JavaScript and HTML live in happy harmony in the same files, and it efficiently renders your ever-changing data to the browser.

What is the default browser for React app? ›

By default, Create React App will open the default system browser, favoring Chrome on macOS. Specify a browser to override this behavior, or set it to none to disable it completely. If you need to customize the way the browser is launched, you can specify a node script instead.

Is Apple website built on React? ›

Seems like apple is using an open-source JS framework, built by Facebook (React).

Does Apple use ReactJS? ›

For those who complain about Electron apps on macOS, we now know that Apple themselves use Javascript/React/Webview inside macOS menus and Apple Music. For example, Apple uses React (made by Facebook and most popular web framework), on parts of Apple Music.


1. React Setup MacOS
(Derek Banas)
2. React Native Environment Setup for MacOS (M1 and Intel)
3. How to Download and Install React Js In MacBook || How Install Node Js in Macbook
(WSCode Pixel)
4. React Native Environment Setup for MacOS M1 M2 and intel | Mr DevGeek | Muhammad Aamir Malik
(Mr DevGeek)
5. How to install react in Mac and Create first app.
(MyMackbook Air)
6. How To Install React Js & Setup Your First Project ✅
(Rishav Chanda)
Top Articles
Latest Posts
Article information

Author: Geoffrey Lueilwitz

Last Updated: 07/09/2023

Views: 6022

Rating: 5 / 5 (60 voted)

Reviews: 83% of readers found this page helpful

Author information

Name: Geoffrey Lueilwitz

Birthday: 1997-03-23

Address: 74183 Thomas Course, Port Micheal, OK 55446-1529

Phone: +13408645881558

Job: Global Representative

Hobby: Sailing, Vehicle restoration, Rowing, Ghost hunting, Scrapbooking, Rugby, Board sports

Introduction: My name is Geoffrey Lueilwitz, I am a zealous, encouraging, sparkling, enchanting, graceful, faithful, nice person who loves writing and wants to share my knowledge and understanding with you.