React（二）react脚手架的搭建

最新推荐文章于 2025-06-28 16:13:48 发布

敬之

最新推荐文章于 2025-06-28 16:13:48 发布

阅读量9.4w

点赞数 47

CC 4.0 BY-SA版权

分类专栏：前端框架之 —— React 文章标签： react.js javascript 前端软件框架

本文链接：https://blog.csdn.net/weixin_53072519/article/details/121242139

前端框架之 —— React 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何搭建React本地开发环境，包括检查Node和npm版本，配置npm源，并通过CreateReactApp创建React项目。创建项目后，通过VSCode启动并运行项目，展示了项目的目录结构及启动步骤。同时，文章提供了npm常用命令的补充说明。

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

一、搭建本地开发环境

二、创建 React 脚手架项目

三、VS Code 启动脚手架项目

React脚手架我们所用的其中一个是Create React App，Create React App 是一个用于学习 React 的舒适环境，也是用 React 创建新的单页应用的最佳方式。它会配置你的开发环境，以便使你能够使用最新的 JavaScript 特性，提供良好的开发体验，并为生产环境优化你的应用程序。

一、搭建本地开发环境

使用 React 脚手架搭建项目之前先要确定自己的电脑是否有支持的本地开发环境；据官网建议系统中Node和npm版本要求如下：

所以我们在cmd下执行命令查看Node和npm版本是否符合要求：

npm默认的源地址在国外，如果网速不太好，可以将其配置到国内源；命令如下：

# 配置国内源
npm config set registry https://registry.npm.taobao.org

# 配置源地址
npm config set registry http://www.npmjs.org

# 查看当前环境源地址
npm config get registry

环境准备完成后就可以生成项目包了；

二、创建 React 脚手架项目

（1）在创建好的文件夹内打开命令提示行工具，输入命令 npx create-react-app 项目名创建一个新的项目；

（2）等待一段时间过后会出现成功提示；

（3）按照提示先进入项目名称文件夹 cd reactpro ，然后输入启动命令 npm start ，可以看到，启用的是http://localhost:3000/

（4）启动之后会自动在浏览器展示该项目的首页。

三、VS Code 启动脚手架项目

能够正常展示首页就说明我们项目包创建成功，接下来就可以在编程软件中打开了，推荐 Visual Studio Code。React脚手架项目结构如下：

启动脚手架项目：

（1）点击 package.json 文件 --> 右键 --> 在集成终端打开；

（2）在终端控制台中输入 npm start --> 回车；

（3）显示以下提示，项目启动成功。

补充 npm 命令：

npm uninstall 包名称  //卸载

npm list | findStr 包名称  //查看包是否安装