Install React on MacOS

The following is a step by step process to install ReactJS on you macOS.

Step 1: Install Homebrew

Homebrew is a popular package manager for macOS that simplifies the installation of software.

  1. Open the Terminal app.
  2. Enter the following command to install Homebrew:
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
  1. After installation, verify Homebrew by running:
brew --version
Install React on MacOS - Prerequisite : Verifying brew version after installation

Step 2: Install Node.js and npm

React requires Node.js and npm (Node Package Manager) to run.

  1. Use Homebrew to install Node.js:
brew install node
  1. Verify the installation:
node --version
npm --version

Step 3: Install a Code Editor (Optional)

While any code editor can be used, Visual Studio Code is highly recommended for React development.

Step 4: Create a New React Application

React applications are typically created using Create React App, a CLI tool for React setup.

  1. Open the Terminal.
  2. Navigate to the directory where you want to create your project:
cd /path/to/your/directory

Let us say that we would like to create our project in /Users/tutorialkart/workspace/react_tutorial directory. We have created the missing directories and navigated to the same, as shown in the following screenshot.

  1. Run the following command to create a new React app:
npx create-react-app my-app

If you get any error like “Found: react@19.0.0. Could not resolve dependency: peer react@”^18.0.0″ from @testing-library/react@13.4.0”, it means that there is a version mismatch between the installed version of React (react@19.0.0) and the peer dependency required by @testing-library/react (react@"^18.0.0"). 

  1. Replace my-app with your desired project name. The npx command ensures you’re using the latest version of Create React App without installing it globally.
  2. Navigate into the project directory:
cd my-app
  1. Start the development server:
npm start
  1. Your default browser should open, displaying the React starter page at http://localhost:3000.

Step 5: Customize Your Environment (Optional)

Install React Developer Tools

  1. Install the React Developer Tools extension for your browser:
  2. This tool helps you inspect and debug React components.

Step 6: Explore Your React Application

  • The src folder contains the main files for your application.
  • Modify src/App.js to make changes to the app.
  • Use npm run build to create a production-ready build of your app.

Next Step: Begin your React journey by learning about components, props, and state!