How to Install ReactJS on MacOS?
Last Updated :
30 Jun, 2025
Are you looking to set up ReactJS on your Mac? Whether you’re using a MacBook Air, MacBook Pro, iMac, or any macOS version like Monterey, Ventura, Big Sur, or macOS 15 Sequoia, this step-by-step guide is here to help.
How To Install React on macOS
To install ReactJS on macOS, you first need to have NodeJS and NPM installed. NodeJS is a tool that lets you run JavaScript outside of a web browser. NPM (Node Package Manager) is used to install libraries, like ReactJS, through the command line. Here are the steps to install React on macOS.
- Download Node.js
- Install Node.js and npm
- Choose Installation Type
- Complete Installation
- Verify Installation
Step 1: Download Node.js
To get started with ReactJS, you first need to install Node.js, which comes with npm (Node Package Manager). Follow these steps:
- Visit the Node.js download page.
- Choose the macOS installer that suits your system.
- Download and run the installer to complete the installation of Node.js and npm on your macOS.
Download for MacOSStep 2: Install Node.js and npm
After downloading Node.js from the official website, go to your Downloads folder and find the .pkg file. Double-click on the file to open it, and a setup wizard will guide you through the installation steps.
Help: The wizard will provide information about what will be installed, including Node.js and npm (Node Package Manager). Simply follow the on-screen instructions to complete the installation.
Install Node.jsStep 3: Choose Installation Type
Continue following the steps in the setup wizard by clicking "Next" on each screen. When you get to the "Installation Type" section, a message will appear asking you to confirm the installation details. Once you've checked everything, simply click the "Install" button to proceed.
Help: This section allows you to customize the installation location if needed, but it’s recommended to stick with the default settings for a smooth setup process.
Choose Installation TypeStep 4: Complete Installation
Once the installation is finished, you’ll see a message confirming that Node.js and npm have been successfully installed.Node.js and npm have been successfully installed.
Important: To use Node.js and npm from your project folder, make sure that /usr/local/bin is included in your system’s $PATH. This lets your terminal recognize and run Node.js and npm commands.
To add /usr/local/bin to your $PATH on macOS, run the following command in your terminal:
export PATH=/usr/local/bin:$PATH
This will update your $PATH for the current session. To make the change permanent, you need to add the line to your shell configuration file (like .zshrc or .bash_profile). Use a text editor to open the file and add the line, then reload the shell configuration for the changes to take effect.
Complete InstallationStep 5: Verify Installation
Open the Terminal and run the following commands to confirm installation:
node -v
npm -v
These commands will display the versions of Node.js and npm installed.
Step 6 : Create Your React App
Before starting the development server, you need to create a new React project. To set up your React project, it's best to use Vite (modern, fast). You can also use the older Create React App (CRA) if needed.
Using Vite (Recommended)
Vite is a modern build tool that offers faster startup and better developer experience compared to CRA.
npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
Using Create React App (Deprecated)
Create React App was the traditional way to start React projects, but it's now deprecated and not recommended for new apps.
npx create-react-app my-react-app
cd my-react-app
Note: Use only lowercase letters in the app name to avoid npm errors.
Step 7: Start the Development Server
Run the development server:
npm run dev
- 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 8: 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!
Conclusion
By following these steps, you’ve successfully set up ReactJS on your macOS system. With Node.js, npm, and a code editor like Visual Studio Code installed, you’re now ready to create dynamic and interactive web applications using React.
Also Read
Similar Reads
Non-linear Components In electrical circuits, Non-linear Components are electronic devices that need an external power source to operate actively. Non-Linear Components are those that are changed with respect to the voltage and current. Elements that do not follow ohm's law are called Non-linear Components. Non-linear Co
11 min read
Spring Boot Tutorial Spring Boot is a Java framework that makes it easier to create and run Java applications. It simplifies the configuration and setup process, allowing developers to focus more on writing code for their applications. This Spring Boot Tutorial is a comprehensive guide that covers both basic and advance
10 min read
Class Diagram | Unified Modeling Language (UML) A UML class diagram is a visual tool that represents the structure of a system by showing its classes, attributes, methods, and the relationships between them. It helps everyone involved in a project—like developers and designers—understand how the system is organized and how its components interact
12 min read
Backpropagation in Neural Network Back Propagation is also known as "Backward Propagation of Errors" is a method used to train neural network . Its goal is to reduce the difference between the model’s predicted output and the actual output by adjusting the weights and biases in the network.It works iteratively to adjust weights and
9 min read
3-Phase Inverter An inverter is a fundamental electrical device designed primarily for the conversion of direct current into alternating current . This versatile device , also known as a variable frequency drive , plays a vital role in a wide range of applications , including variable frequency drives and high power
13 min read
Polymorphism in Java Polymorphism in Java is one of the core concepts in object-oriented programming (OOP) that allows objects to behave differently based on their specific class type. The word polymorphism means having many forms, and it comes from the Greek words poly (many) and morph (forms), this means one entity ca
7 min read
CTE in SQL In SQL, a Common Table Expression (CTE) is an essential tool for simplifying complex queries and making them more readable. By defining temporary result sets that can be referenced multiple times, a CTE in SQL allows developers to break down complicated logic into manageable parts. CTEs help with hi
6 min read
What is Vacuum Circuit Breaker? A vacuum circuit breaker is a type of breaker that utilizes a vacuum as the medium to extinguish electrical arcs. Within this circuit breaker, there is a vacuum interrupter that houses the stationary and mobile contacts in a permanently sealed enclosure. When the contacts are separated in a high vac
13 min read
Python Variables In Python, variables are used to store data that can be referenced and manipulated during program execution. A variable is essentially a name that is assigned to a value. Unlike many other programming languages, Python variables do not require explicit declaration of type. The type of the variable i
6 min read
Spring Boot Interview Questions and Answers Spring Boot is a Java-based framework used to develop stand-alone, production-ready applications with minimal configuration. Introduced by Pivotal in 2014, it simplifies the development of Spring applications by offering embedded servers, auto-configuration, and fast startup. Many top companies, inc
15+ min read