React开发环境搭建、项目创建、命令使用

本文链接：https://blog.csdn.net/lc8023xq/article/details/109716751

本文详细介绍了如何从零开始搭建React开发环境，包括Node.js的下载安装、React项目的创建，以及常用的npm命令使用。通过创建React项目并启动运行，帮助开发者快速上手React开发。同时，还介绍了如何切换npm镜像至淘宝源，提高下载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

前言
一、Node.js下载安装
二、创建React项目
三、React项目常用npm命令使用
总结
更多好文敬请关注公众号：main方法

前言

由于项目组前端紧缺的原因，一个后端开发安排了前端开发任务，之前有用过VUE开发过后端页面，这么说来还是有经验的，借此记录一下React开发环境搭建过程。

一、Node.js下载安装

1、百度搜索Node.js下载即可看到官网地址，打开可以看到如图，这里根据自己电脑操作系统选择下载安装包，往下滑可选历史版本下载。
在这里插入图片描述
2、双击下载安装包，无脑下一步（next）即可，中间可更改安装目录。
注：此处省略安装过程

3、打开cmd命令窗口，输入node -v 查看版本，如图则表示安装成功。

4、检查npm命令是否支持，输入npm -v 检查版本，显示版本则表示安装成功。
注：与Node.js一起安装好了，无需另外安装
在这里插入图片描述
5、安装cnpm命令，默认镜像较慢，我们需要切换到淘宝的镜像安装：npm install -g cnpm --registry=https://registry.npm.taobao.org，安装成功后，可以输入cnpm -v检查是否安装成功。
这里npm、cnpm简要说明一下，npm是官方自带包镜像命令，cnpm是国内淘宝镜像命令。
在这里插入图片描述

二、创建React项目

1、安装创建React项目的模块cnpm install -g create-react-app
在这里插入图片描述

2、切换到项目空间目录，创建React项目 react-demo，输入创建命令create-react-app react-demo在当前目录下创建。
在这里插入图片描述
中间省略N行安装信息…成功创建React项目

3、创建完成项目我们需要切到项目目录下，执行npm start启动命令运行项目，下图我们可以看到启动成功日志。

4、浏览器访问启动成功日志中的路径：http://localhost:3000/，到这就算成功创建React项目了。
在这里插入图片描述

三、React项目常用npm命令使用

命令	说明
npm install 模块名 -g	安装依赖模块，加-g全局安装，否则本地安装
npm uninstall -g 模块名	卸载依赖模块，加-g全局卸载，否则本地卸载
npm install 模块名 -g	安装依赖模块，加-g全局安装，否则本地安装
npm install 模块1 模块2 模块n --save	安装多个模块
npm start	启动项目
npm run build	打包构建项目（构建成静态文件）