Installation of React JS on MacOS

Installing React JS on macOS requires setting up the necessary environment and tools to run React applications smoothly.

Requires Node.js and npm to manage packages and dependencies.
Uses tools like Create React App to quickly set up a React project.
Supports efficient development with built-in scripts for running and building applications.

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

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.

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

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

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

install confirmation — Choose Installation Type

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

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

Node.js location — Complete Installation

Step 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!