Setup React Development on macOS

Setting up React on macOS is straightforward with Homebrew and the right tools. This guide covers the complete development environment.

Prerequisites

Install Homebrew

If you don’t have Homebrew installed:

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Node.js and NPM

brew install node

Alternative: Using NVM (Recommended for Multiple Versions)

brew install nvm

Add to your ~/.zshrc (default on modern macOS):

export NVM_DIR="$HOME/.nvm"
[ -s "/usr/local/opt/nvm/nvm.sh" ] && \. "/usr/local/opt/nvm/nvm.sh"
[ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/usr/local/opt/nvm/etc/bash_completion.d/nvm"

Install and use Node.js:

nvm install 18
nvm use 18

Create React App

Using Create React App

npx create-react-app my-react-app
cd my-react-app
npm start

Your app will open at http://localhost:3000

Using Vite (Faster Development)

npm create vite@latest my-react-app -- --template react
cd my-react-app
npm install
npm run dev

Development Tools

VS Code Setup

Install VS Code:

brew install --cask visual-studio-code

Install essential extensions from the VS Code marketplace:

ES7+ React/Redux/React-Native snippets
Prettier - Code formatter
ESLint
Auto Rename Tag
Bracket Pair Colorizer

Terminal Tools

Install useful development tools:

# React Developer Tools CLI
npm install -g react-devtools

# Storybook for component development
npm install -g @storybook/cli

Browser Tools

Install React Developer Tools for your browser:

Environment Setup

Git Configuration

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

Zsh Plugins (Optional but Recommended)

Install Oh My Zsh for better terminal experience:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Add useful plugins to ~/.zshrc:

plugins=(git npm node nvm)

Troubleshooting

Permission Issues with NPM

If you encounter EACCES errors:

# Fix npm permissions
sudo chown -R $(whoami) ~/.npm
sudo chown -R $(whoami) /usr/local/lib/node_modules

Node Version Issues

If you have multiple Node.js versions:

# List installed versions
nvm ls

# Switch versions
nvm use 18

# Set default version
nvm alias default 18

Port Already in Use

# Kill process on port 3000
lsof -ti:3000 | xargs kill -9

Additional Tools

iOS Development (Optional)

If you plan to build React Native apps:

brew install --cask xcode

Design Tools

# Figma (for UI design)
brew install --cask figma

# Sketch alternative
brew install --cask lunacy

Sources

For Linux setup, see our React Linux installation guide. Windows users should check our Windows React setup.