如何在Mac上搭建Reactjs环境？搭建遇多错误求解决方案

Hey there! Let me walk you through setting up a React.js development environment on your Mac, plus troubleshoot some common pitfalls you might hit along the way. I’ve helped tons of devs work through these issues, so let’s dive in.

一、先搞定基础依赖：Node.js 和 npm #

React relies on Node.js (which comes with npm, the package manager) to run and manage dependencies. You’ve got a few solid options to install them:

• Option 1: Homebrew (Mac’s go-to package manager)
  If you don’t have Homebrew installed yet, run this in your terminal first:

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

  Then install Node.js:

  brew install node
  

• Option 2: nvm (Node Version Manager, great for switching versions)
  nvm lets you juggle multiple Node.js versions easily. Install it with:

  curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
  

  Then install the latest LTS (long-term support) version:

  nvm install --lts
  

• Option 3: Direct download from Node.js官方安装包
  Just grab the installer from the official site, but I don’t recommend this as much—it’s harder to switch versions later.

To verify everything worked, run node -v and npm -v in your terminal. You should see version numbers pop up.

二、创建你的第一个React项目（两种主流方式） #

方式1: Create React App (传统稳定款) #

This is the classic, zero-config way to spin up a React app. Run:

npx create-react-app my-react-app

Replace my-react-app with whatever you want to name your project. Then:

1. Jump into the project folder: cd my-react-app
2. Start the dev server: npm start
   Your browser should automatically open to http://localhost:3000 with the React welcome page—you’re good to go!

方式2: Vite (现代快速度款) #

Vite is way faster for development and builds, so it’s become the go-to for most new projects. Here’s how to use it:

1. Create the project:

   npm create vite@latest my-react-app -- --template react
   

2. Enter the directory: cd my-react-app
3. Install dependencies: npm install
4. Launch the dev server: npm run dev
   Check the terminal for the local URL (usually http://localhost:5173) and open it in your browser—you’ll see your React app ready to edit.

三、常见错误及快速修复 #

Let’s cover the most annoying issues people run into and how to fix them fast:

1. npm install 卡住或抛出EACCES权限错误 #

• Why it happens: Either your npm global directory doesn’t have proper permissions, or network issues are blocking dependency downloads.
• Fixes:
  • Permission fix: Don’t use sudo with npm (it causes more problems). Instead, reconfigure npm to use a local directory:

    mkdir ~/.npm-global
    npm config set prefix '~/.npm-global'
    

    Then add this path to your shell config (like ~/.zshrc or ~/.bash_profile):

    export PATH=~/.npm-global/bin:$PATH
    

    Run source ~/.zshrc (or your config file) to make it take effect.
  • Network fix: Switch to a domestic npm mirror to speed up downloads:

    npm config set registry https://registry.npmmirror.com/
    

    Then re-run npm install.

2. "Port 3000/5173 is already in use" error when starting the dev server #

• Why it happens: Another app or process is using the default port.
• Fixes:
  • Kill the process using the port:
    For port 3000: lsof -ti:3000 | xargs kill -9
    For port 5173: lsof -ti:5173 | xargs kill -9
  • Or start the server on a different port:
    Create React App: PORT=3001 npm start
    Vite: Edit the dev script in package.json to "dev": "vite --port 3001", then run npm run dev.

3. "npx: command not found" when creating a project #

• Why it happens: npx comes with npm 5.2+, so your npm version is out of date.
• Fixes:
  • Upgrade npm globally: npm install -g npm
  • If you’re using nvm, just install the latest LTS Node.js version—it includes the latest npm automatically.

4. "'React' must be in scope when using JSX" error in components #

• Why it happens: Before React 17, you had to import React in every file using JSX. React 17+ supports automatic imports, but old templates or misconfigured setups might still throw this.
• Fixes:
  • For React <17: Add import React from 'react'; at the top of every file using JSX.
  • For React 17+: Check your package.json to make sure React is version 17 or higher. Create React App and Vite’s default templates already handle this, so you shouldn’t need to tweak anything.

5. Homebrew fails to download Node.js ("Error: Failed to download resource 'node'") #

• Why it happens: Homebrew’s default sources might be slow or unavailable, or your cache is corrupted.
• Fixes:
  • Update Homebrew and clean the cache:

    brew update
    brew clean
    

  • If that doesn’t work, switch Homebrew’s core and bottles sources to a domestic mirror (like Tsinghua University’s) to improve download speeds.

内容的提问来源于stack exchange，提问作者Omar Al