DEV Community

Cover image for How to Install ReactJS on MacOS?
Code_Jedi
Code_Jedi

Posted on • Updated on

How to Install ReactJS on MacOS?

ReactJS is a free and open-source front-end JavaScript library created by Facebook in 2013. ReactJS is a User Interface (UI) library, and it is used for building and manipulating UI components.
In this article, I will be walking you through the full ReactJS installation process on MacOS in detail. I will be covering:

  1. NodeJS and NPM installation.
  2. ReactJS library installation.
  3. Creating a ReactJS project.

NodeJS and NPM:

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.

Installing Nodejs & NPM:

The only way you can install NodeJS is through their official website. Installing NodeJS will also automatically download NPM on your machine. You can find their NodeJS downloads section here.
Download for MacOS

Once you've downloaded NodeJS through their website, you should find the downloaded ".pkg" file inside of your downloads folder. Simply open this ".pkg" file by double-clicking on it and you will be prompted with a pop-up containing info about the NodeJS and NPM installation process.
Pop-up

Simply go through the next sections in this pop-up, and you will be prompted with this message once you get to the "Installation Type" section:
Install confirmation

Click on "Install", or if you want to change the install location, click on "Change Install Location". This will start the NodeJS and NPM installation process. Once finished, you will be prompted with a final message displaying the location where NodeJS and NPM are installed.
Node.js location

As stated in the pop-up, to have access to NodeJS and NPM from your project's directory, make sure that "/usr/local/bin" is in your project's "$PATH". To add "/usr/local/bin" to your "$PATH" on MacOS, run the following command in your project's terminal:

export PATH=/usr/local/bin:$PATH
Enter fullscreen mode Exit fullscreen mode

You can then click "Close" to close the pop-up.

To check if both NodeJS and NPM were installed successfully, in your project's terminal, run:

node --version
Enter fullscreen mode Exit fullscreen mode

and

npm --version
Enter fullscreen mode Exit fullscreen mode

This will return your NodeJS and NPM versions.

Installing ReactJS on MacOS:

Now that you have NodeJS and NPM installed, You should now be able to install ReactJS in your project's directory by running:

npm install --save react react-dom
Enter fullscreen mode Exit fullscreen mode

Creating a ReactJS project:

Now that you have ReactJS installed, you can create a new react project directory by running:

npx create-react-app my-react-project
Enter fullscreen mode Exit fullscreen mode

This will create a new project directory named "my-react-project" that will look something like this:
A react project structure

You can then open a terminal window inside of this react project by running:

cd my-react-project
Enter fullscreen mode Exit fullscreen mode

Once you're inside a terminal window inside of this react project, you can finally run the following command to start a development server on "localhost:3000":

npm start
Enter fullscreen mode Exit fullscreen mode

Local react development server

Top comments (5)

Collapse
 
thorstenhirsch profile image
Thorsten Hirsch

Well, as a developer you will soon see the need to have different versions of NodeJS installed in parallel, being able to switch between them with a single command. And once you've experienced a package manager I'm sure you'll never go back to the old way of installing software.

So I recommend to take a look at homebrew and nodenv.

Collapse
 
careuno profile image
Carlos Merchán

use nvm for node installations

Collapse
 
bhuvanvadlapudi profile image
Bhuvan Vadlapudi

Actually,I got an error.
As I created a new project folder,I started following your steps.But when it comes to installing react.js, Using the below code as you given
npm install --save react react-dom
It raised an error related permisson issue.

npm ERR! code EPERM
npm ERR! syscall mkdir
npm ERR! path /Users/bhuvanvadlapudi/.npm
npm ERR! errno -1
npm ERR! 
npm ERR! Your cache folder contains root-owned files, due to a bug in
npm ERR! previous versions of npm which has since been addressed.
npm ERR! 
npm ERR! To permanently fix this problem, please run:
npm ERR!   sudo chown -R 501:20 "/Users/bhuvanvadlapudi/.npm"

npm ERR! Log files were not written due to an error writing to the directory: /Users/bhuvanvadlapudi/.npm/_logs
npm ERR! You can rerun the command with `--loglevel=verbose` to see the logs in your terminal
Enter fullscreen mode Exit fullscreen mode

Can you please help me with this issue..

Collapse
 
matt_vey profile image
Levr

Thanks for this installation guide!

Collapse
 
mosmn profile image
mosmn

good stuff