React脚手架搭建及VS Code插件

1,833 阅读1分钟

快速搭建一个React项目

首先了解一下Node.js

Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境。 所以说 Node.js 不是库,是一个运行环境,或者说是一个 JS 语言解释器。

然后了解npm是干什么的?

npm (node package manager)是 JavaScript 世界的包管理工具,并且是 Node.js 平台的默认包管理工具,也是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,里面包含超过 600000 个 包的结构,能够使您轻松跟踪依赖项和版本

安装React脚手架

由于安装好的npm的源默认是国外的源,会因为网络原因导致执行npm操作有延时,我们可以切换npm的源为淘宝的源镜像。 执行 npm config set registry registry.npm.taobao.org

node环境下输入:

npm i -g create-react-app

创建项目

切换至指定路径,执行  create-react-app myreact(项目名),最后出现 Happy hacking说明创建成功。

Snipaste_2022-01-05_21-06-05.png

启动项目

在项目所在路径下执行 npm start。自动打开浏览器

Snipaste_2022-01-05_21-07-35.png

VS Code插件

在扩展中搜索react Snipaste_2022-01-05_21-05-00.png

在文件中使用快捷代码段:

类组件 rcc Snipaste_2022-01-05_21-10-56.png

函数组件 rfc

Snipaste_2022-01-05_21-11-37.png

导入 imp

Snipaste_2022-01-05_21-14-18.png