React - 安装配置 配置详解

$ node --version
v16.19.0
$ npm --version
8.19.3

# Ubuntu/Debian
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
$ source ~/.bashrc

# CentOS/RHEL（需要先装git和curl）
$ yum install -y git curl
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
$ source ~/.bashrc

$ command -v nvm
nvm
$ nvm --version
0.39.3

$ nvm install --lts
Installing node v18.17.0 (with npm 9.6.7)...
$ nvm use --lts
Now using node v18.17.0 (npm 9.6.7)
$ node --version
v18.17.0

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

或者换回官方源：

$ npm config set registry https://registry.npmjs.org

步骤5：创建React项目
环境准备好了，现在创建你的第一个React项目。这里用create-react-app，官方脚手架：
$ npx create-react-app my-react-app
Creating a new React app in /home/username/my-react-app.

Installing packages. This might take a couple of minutes.
Installing react, react-dom, and react-scripts...

added 1386 packages in 3m 42s

Success! Created my-react-app at /home/username/my-react-app
Inside that directory, you can run several commands:

  npm start     - Starts the development server.
  npm run build - Bundles the app into static files for production.
  npm test      - Starts the test runner.
  npm run eject - Removes this tool and copies build dependencies

Happy hacking!

步骤6：启动开发服务器验证
进入项目目录，启动开发服务器看看能不能跑起来：
$ cd my-react-app
$ npm start

Compiled with warnings.

Compiled successfully!
You can now view my-react-app in the browser.

Local:            http://localhost:3000
On Your Network:  http://192.168.1.100:3000

Note that the development build is not optimized.
To create a production build, use: npm run build.
浏览器打开 http://localhost:3000，看到React默认页面就说明环境配好了。

步骤7：安装Vite作为替代方案（可选）
create-react-app虽然香，但启动慢。Vite快得多，大项目推荐用这个。先创建个项目试试：
$ npm create vite@latest my-vite-app -- --template react

Scaffolding project in /home/username/my-vite-app...

Done. Now run:

  cd my-vite-app
  npm install
  npm run dev

$ cd my-vite-app
$ npm install
added 58 packages in 8s
$ npm run dev

  VITE v4.4.7  ready in 567 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: http://192.168.1.100:5173/

步骤8：配置ESLint和Prettier（推荐）
代码规范还是要配的，不然团队协作时风格不一致能吵起来。VSCode用户推荐装插件+配置文件：
$ npm install -D eslint prettier eslint-plugin-react eslint-config-prettier
$ npx eslint --init
? How would you like to use ESLint? ...
  To check syntax only
  To check syntax and find problems
> To check syntax, find problems, and enforce code style

? What type of modules does your project use? ...
  JavaScript modules (import/export)
> CommonJS (require/module.exports)
  None of these
创建.prettierrc配置文件：
$ cat > .prettierrc << 'EOF'
{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "es5",
  "printWidth": 80
}
EOF



三、常见问题FAQ

Q：npm install卡在某个包不动了，删了重装还是一样，怎么破？
别死磕，先看网络问题。换国内源基本能解决，如果还是慢，用cnpm或者直接指定包版本。最烦的是某些包被墙了，只能科学上网或者找镜像替代。实在不行直接去npm官网找tarball链接手动下。

Q：nvm use node版本显示徽标符号乱码，什么鬼？
终端编码问题，nvm默认输出的箭头符号兼容性差。直接export LC_ALL=en_US.UTF-8，或者简单点用nvm use --lts跳过那个emoji输出。别浪费时间折腾这个，不影响正常使用。

Q：create-react-app创建项目时报EBUSY错误，删了node_modules还是不行？
Windows上这破问题最常见，杀掉所有node进程再试。Linux/macOS用户看看是不是打开了太多文件描述符，ulimit -n调大点。还有个土办法——换个目录创建，别在有奇怪权限的路径下搞。

Q：项目跑起来了，但修改代码后页面没热更新？
查两件事：浏览器控制台有没有报错，网络代理有没有拦截webpack的ws连接。开发服务器终端有没有显示Compiled successfully？什么都没显示的话，看是不是被防火墙拦了localhost请求。



四、总结
React环境搭建核心就几步：Node版本选LTS、用nvm管理、npm源配国内、create-react-app创建项目。10分钟搞定，碰到问题别慌，80%是网络问题或版本不兼容。换源+科学上网基本能解决所有幺蛾子。
延伸阅读：

React官方文档：https://react.dev
Vite中文文档：https://cn.vitejs.dev
nvm官方仓库：https://github.com/nvm-sh/nvm

相关推荐
InfluxDB - 安装配置 深入理解
LVS - 安装配置 完全指南
Cursor 安装配置-星耀云
Claude：安装配置
AutoGPT：安装配置
Trae：安装配置
Vue3：安装配置
Go语言安装配置 - 星耀云专业指南
                

                   

                                       上一篇：
                    Ansible - Ansible安装与入门配置
                                      
                   

                                       已经是最后一篇啦！