阅读 180

React脚手架:Create-React-App 搭建

比较常见的快速构建React脚手架的工具有:

  1. Create-React-App --> React官方出品
  2. UmiJs --> 阿里出品(推荐)
  3. Vite --> Vue作者尤雨溪开发的,可以构建 VueReact 等多种脚手架,比较全面(推荐)

本教程将介绍 Create-React-App(CRA)的使用和相关常见配置

一、准备工作

  1. 本教程示例将使用 vscode + typescript + es6 来编写,yarn 管理包;
  2. 首先需要安装 nodejs,安装长期维护(LTS)最新版即可;
  3. 安装完 nodejs 后,打开 cmd,全局安装 yarn:npm install yarn -g;
  4. 全局安装 create-react-app,在 cmd 中执行命令:npm install create-react-app -g

注意:如果在 PowerShell 中使用 yarn 命令时,可能会出现 “...系统禁用脚本” 问题
解决方案:以管理员身份打开PowerShell,执行命令:set-ExecutionPolicy RemoteSigned
然后输入Y 按回车确认即可。

二、 开始搭建

  1. 新建一个文件夹cra:打开文件夹 > 左上角“文件” > 打开Windows PowerShell > 以管理员身份打开;
  2. 执行命令 yarn create react-app my-app --template typescript,回到 cra 文件夹,可以看到已经创建好了名为 my-app 项目,打开 my-app 可以看到项目结构;

图片.png 图片.png

温馨提示:yarn create react-app [项目名称],注意名称需要全小写,默认创建的是js模板的脚手架,在命令的后面加上--template typescript,就可以指定创建typescript模板的脚手架。

  1. 使用 vs code 打开 my-app 文件夹,顶部工具栏打开:终端 > 新终端,输入命令 yarn 按回车安装依赖包,安装完成后可看到 node_modules 文件夹;接着继续在终端里执行命令 yarn start 启动项目,可以看到以下界面,这样一个基础项目框架就搭建完成了,下一步,将开始介绍项目配置和使用示例。

图片.png

本示例用到的各工具版本:
nodejs --- v14.16.0
yarn --- v1.22.15
create-react-app --- v4.0.3
vs code --- v1.60.2

PS:文中步骤或描述若有错误之处,烦请留言指正。共同学习,共同成长。

文章分类
前端
文章标签