How to Install ReactJS on MacOS
Want to install ReactJS on your Mac? Whether you’re using a MacBook Air, MacBook Pro, iMac, or running macOS versions like Monterey, Ventura, Big Sur, or macOS 15 Sequoia, this guide will walk you through the process step by step.
ReactJS, a powerful JavaScript library for building dynamic user interfaces, requires essential tools like Node.js and npm to get started. In this tutorial, we’ll cover everything you need—from installing Node.js to launching your first React app—ensuring a smooth setup experience for both beginners and experienced developers, no matter which macOS device or version you’re using.
Steps to Install React on MacOS
In order to install ReactJS on MacOS, you must first have NodeJS and NPM installed. NodeJS is a JavaScript runtime that 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.
Step 1: Download Node.js
ReactJS requires Node.js and its package manager, npm, to manage dependencies.
Download Node.js:
- Visit the official Node.js website.
- Download the LTS (Long Term Support) version for macOS.
Step 2: Install Node.js and npm
Once you’ve downloaded Node.js from its official website, locate the downloaded .pkg file in your Downloads folder. Double-click on the .pkg file to open it, and a setup wizard will appear, guiding you through the installation process.
Step 3: Choose Installation Type
Continue navigating through the setup wizard by clicking “Next” in each section. When you reach the “Installation Type” section, you will see a message prompting you to confirm the installation details. Then click the “Install” Button.
Step 4: Complete Installation
After the installation is complete, a final message will appear, confirming that Node.js and npm have been successfully installed.
Important: As mentioned in below screenshot, to access Node.js and npm from your project directory, ensure that /usr/local/bin is included in your system’s $PATH. This allows your terminal to recognize and execute Node.js and npm commands.
To add /usr/local/bin to your $PATH on macOS, run the following command in your terminal:
This will temporarily update your $PATH for the current session. To make this change permanent, add the line to your shell configuration file (e.g., .zshrc or .bash_profile) using a text editor. Then reload the shell configuration
Step 5: Verify Installation
Open the Terminal and run the following commands to confirm installation:
These commands will display the versions of Node.js and npm installed.
Step 6: Start the Development Server
Run the development server:
- Open the URL displayed in the terminal (e.g.,
http://localhost:3000) in your browser. - You’ll see the default React app page, confirming that ReactJS is running successfully.
Step 7: Open the Project in a Code Editor
- Open Visual Studio Code.
- Use the “Open Folder” option to load the React project folder (
my-react-app). - Start coding your React components and build your application!
