• 日常搜索
  • 百度一下
  • Google
  • 在线工具
  • 搜转载

使用创建React应用程序

react已迅速成为创建客户端和服务器端视图的流行框架。工具的进入门槛更高,社区对javascript的疲劳也有一些挫败感。create-react-app就是为了解决这些问题而创建的。

入门

您首先要确保在系统上安装了node。您至少需要安装节点版本 4,但他们建议安装版本 6 以加快下载速度和更好地使用磁盘。您也可以使用nvm在 Node 版本之间轻松切换。 

安装 Node 后,您将需要打开您最喜欢的命令行工具并全局安装 create-react-app,以便您可以在系统上的任何位置执行它。 

npm install -g create-react-app

如何创建您的第一个应用程序

您将需要首先打开命令行并导航或创建一个目录,您将在其中进行开发。接下来我们将通过运行来创建应用程序create-react-app tuts-plus-react-app。这将执行 cli 工具来创建我们的 tuts-plus-react-app。 

使用创建React应用程序  第1张

CLI 工具完成后,您将进入一个摘要屏幕,让您知道应用程序的创建位置并显示您可以使用的命令列表。

使用创建React应用程序  第2张

接下来,您将要通过执行导航到我们的新应用程序cd tuts-plus-react-app。

启动应用程序

您可以通过执行在本地运行应用程序npm start。应用程序启动后,您将在浏览器中自动导航到http://localhost:3000/并查看新的 React 应用程序。 

使用创建React应用程序  第3张

该应用程序使用webpack运行本地开发服务器。有一个监视功能,所以当你编辑你的 React 代码并保存时,你会看到更改自动显示在浏览器中。 

使用创建React应用程序  第4张

如果您的代码出现任何错误,您将在浏览器中看到这些错误或警告。

使用创建React应用程序  第5张

代码样式和测试

包含ESLint 是为了确保您的代码遵循常见的代码样式。这将帮助您确保您的代码是一致的,这在一个项目有多个贡献者时特别有用。如果您也是 React 新手,我建议您使用它来学习良好的 React 和 JavaScript 编码风格。 

如果您熟悉为代码编写测试, 则包含Jest 以运行测试。Jest 是一个测试框架,由 React 的创建者 Facebook 创建和维护。要执行测试, npm test 请在命令行工具中执行。这将运行测试,然后在您的生产代码更改时启动一个观察程序来执行您的测试。有一个现有的测试文件可以添加到 src/App.test.js.

部署您的应用程序

完成所有编辑后,就该部署应用了。您需要做的就是npm run build在您的应用程序目录中执行。这将使用Babel将您的 React 代码转换为浏览器可以理解的代码。它还将缩小您的代码,以确保您在浏览器中获得最佳性能。

用户指南

如果您决定继续使用 create-react-app,我建议您花时间阅读用户指南。它有很多关于其他视图相关主题的有用信息,例如添加css样式表、导入其他组件、导入图像和字体等。它还包含有关 Web 开发实践的信息,例如使用 HTTPS、连接到 Node 后端、创建渐进式 Web 应用程序等等。 

还有一些关于测试和部署应用程序的广泛文档。


文章目录
  • 入门
  • 如何创建您的第一个应用程序
  • 启动应用程序
  • 代码样式和测试
  • 部署您的应用程序
  • 用户指南