1. 犀牛前端部落首页
  2. 前端工程化

create-react-app入门教程

create-react-app 是启动React应用程序的最简单方法。

本文,将介绍create-react-app是什么,以及快速入门。

create-react-app入门教程
react

create-reat-app 是一个旨在让你快速做出反应的项目。它提供了一个现成的React应用程序启动器,因此您可以直接构建应用程序,而不必处理Webpack和Babel配置。

它提供了以下开箱即用的功能:

  • 带有热重载的开发服务器
  • 提供一个带有Jest的测试环境
  • 允许创建React应用程序
  • 接受ES6+语法
  • 捆绑所有JavaScript和资源文件
  • 带有CSS autoprefixer, SASS和CSS模块支持
  • 其他..

首先使用npx,这是一种下载和执行Node.js命令的简单方法,不需要安装它们。npx与npm一起提供(从5.2版开始),如果您还没有安装npm,现在就从https://nodejs.org开始安装(npm与Node一起安装)。

如果您不确定您拥有的是哪个版本,我建议查看是否需要更新。

当你运行npx create-react-app , npx会下载最新的create-react-app版本,运行它,然后从你的系统中删除它。这很好,因为您的系统上永远不会有过时的版本,每次运行它时,您都会获得最新的、最好的可用代码。

开始下一步~

npx create-react-app todolist
create-react-app入门教程
安装中

安装完成后:

create-react-app入门教程

create-react-app在您指定的文件夹(本例中为todolist)中创建了一个文件结构,并初始化了一个Git仓库。

它还在包中添加了一些命令在package.json文件,因此您可以立即启动应用程序,进入文件夹并运行npm start。

npm start
create-react-app入门教程
启动中
create-react-app入门教程
启动完成

除了npm start,create-react-app还提供了以下命令:

  • npm run build:在构建文件夹中构建React应用程序文件,准备部署到服务器
  • npm test: 使用Jest运行测试单元
  • npm eject: 将create- response -app配置反编译到当前项目

“ ejecting”是决定“create-react-app”已经为你做了足够多的事情,但是你想要做的比它允许的更多。

当您使用npm eject后,您失去了自动更新的能力,但是您在Babel和Webpack配置中获得了更多的灵活性。

当您使用npm eject后,此操作是不可逆的。您将在应用程序目录、配置和脚本中获得两个新文件夹。它们包含了您需要的所有配置,现在您可以开始编辑它了。

原创文章,作者:犀牛前端部落,如若转载,请注明出处:https://www.pipipi.net/3334.html

发表评论

登录后才能评论