React（二）react脚手架的搭建_react脚手架搭建项目

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 文件 --> 右键 --> 在集成终端打开；

最后

🍅 硬核资料：关注即可领取PPT模板、简历模板、行业经典书籍PDF。
🍅 技术互助：技术群大佬指点迷津，你的问题可能不是问题，求资源在群里喊一声。
🍅 面试题库：由技术群里的小伙伴们共同投稿，热乎的大厂面试真题，持续更新中。
🍅 知识体系：含编程语言、算法、大数据生态圈组件（Mysql、Hive、Spark、Flink）、数据仓库、Python、前端等等。

网上学习资料一大堆，但如果学到的知识不成体系，遇到问题时只是浅尝辄止，不再深入研究，那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友，可以戳这里无偿获取

一个人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！