React - 安装配置配置详解

综合新闻

React - 安装配置配置详解

2026-05-03 18:01

Zabbix - Zabbix故障排查完全指南 Ansible - Ansible安装与入门配置

React安装配置：从Node.js环境到项目创建，手把手带你完成开发环境搭建

一、前言

干过前端的人都知道，新机器上配React环境是最烦的——Node版本不对、npm源太慢、create-react-app卡在半空，各种坑轮着踩一遍。这次把10年踩坑经验整理出来，照着做10分钟跑起来。

二、操作步骤

步骤1：检查并安装Node.js环境

React 18要求Node 14.18以上，先看看你机器上有没有Node。

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

如果显示command not found，说明没装。继续往下看。

步骤2：通过nvm管理Node版本（推荐）

搞前端的都知道，用nvm管理Node版本比直接装强太多了，切换版本不打架。CentOS/RHEL和Ubuntu通用安装方式：

# 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

安装完成后验证nvm是否正常工作：

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

$ 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语言安装配置 - 星耀云专业指南
`
    content = content.indexOf('') > 0 ? content.replace('', viewstyle + '') : viewstyle + content
    const iframe = document.querySelector('#viewcontent')
    const viewdoc = iframe.contentDocument
    viewdoc.open()
    viewdoc.write(content)
    viewdoc.close()
    iframe.height = viewdoc.body.scrollHeight + 20
  })






	
		
			
				© 星耀云.
			
			
				
					
				
			
		
	




 Powered by ©智简魔方

React - 安装配置 配置详解

React - 安装配置 配置详解

一、前言

二、操作步骤

步骤1：检查并安装Node.js环境

步骤2：通过nvm管理Node版本（推荐）

步骤3：安装Node LTS版本

步骤4：配置npm国内镜像源

步骤5：创建React项目

步骤6：启动开发服务器验证

步骤7：安装Vite作为替代方案（可选）

步骤8：配置ESLint和Prettier（推荐）

三、常见问题FAQ

四、总结

相关推荐

React - 安装配置配置详解

React - 安装配置配置详解