创建React应用程序的详细指南

热门技术勘探工
235 阅读5分钟

开始一个新的React项目并不那么简单。你必须花时间配置正确的构建工具来设置本地开发环境、单元测试和生产构建，而不是直接进入代码并将你的应用程序带入生活。幸运的是，Create React App的帮助就在眼前。

Create-React-App是Facebook的一个命令行工具，允许你生成一个新的React项目，并使用预先配置的webpack构建进行开发。它早已成为React生态系统的一个组成部分，它消除了在你的项目中维护复杂构建管道的需要，让你专注于应用程序本身。

Create React App是如何工作的？

Create React App是一个独立的工具，可以使用npm或Yarn运行。

你可以使用npm生成和运行一个新的项目，只需几个命令。

npx create-react-app new-app
cd new-app
npm start

如果你喜欢Yarn，你可以这样做。

yarn create react-app new-app
cd new app
yarn start

创建React App将设置以下项目结构。

new-app
├── .gitignore
├── node_modules
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── README.md
├── src
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   ├── reportWebVitals.js
│   └── setupTests.js
└── yarn.lock

它还会给你的项目添加一个react-scripts 包，其中包含所有的配置和构建脚本。换句话说，你的项目依赖于react-scripts ，而不是依赖于create-react-app 本身。一旦安装完成，你就可以启动开发服务器，开始在你的项目上工作。

基本功能

本地开发服务器

你需要的第一件事是一个本地开发环境。运行npm start ，将启动一个带有观察器的webpack开发服务器，一旦你改变了什么，它将自动重新加载应用程序。从第四版开始，Create React App支持React的快速刷新，作为热模块替换的一种替代。和它的前身一样，这允许我们在代码库中进行修改后快速刷新应用程序的部分内容，但也有一些新功能。快速重新加载将尝试只重新加载应用程序的修改部分，保留功能组件和钩子的状态，并在纠正语法错误后自动重新加载应用程序。

你也可以通过HTTPS为你的应用程序提供服务，在运行服务器之前将HTTPS 变量设置为true 。

应用程序的生成将内置许多功能。

ES6和ES7

该应用程序带有自己的Babel预设--babel-preset-react-app，以支持一系列ES6和ES7特性。支持的一些特性有：。

  • 异步/等待
  • 对象休息/传播属性
  • 动态导入()
  • 类字段和静态属性

请注意，Create React App不提供任何运行时特性的polyfills，所以如果你需要任何这些特性，你需要自己包含它们。

资产导入

你可以从你的JavaScript模块中导入CSS文件、图像或字体，允许你捆绑应用程序中使用的文件。一旦应用程序被构建，Create React App将把这些文件复制到构建文件夹中。这里有一个导入图片的例子。

import image from './image.png';

console.log(image); // image will contain the public URL of the image

你也可以在CSS中使用这个功能。

.image {
  background-image: url(./image.png);
}

样式设计

如上一节所述，Create React App允许你只需导入所需的CSS文件就可以添加样式。当构建应用程序时，所有的CSS文件将被串联成一个单一的包，并添加到构建文件夹中。

Create React App还支持CSS模块。根据惯例，以*.module.css 命名的文件被视为CSS模块。这种技术使我们能够避免CSS选择器的冲突，因为Create React App将在生成的CSS文件中创建唯一的类选择器。

另外，如果你喜欢使用CSS预处理器，你可以导入Sass .scss 文件。然而，你需要单独安装node-sass 包。

此外，Create React App提供了一种方法，通过在CSS文件的任何地方添加@import-normalize; ，来添加CSS重置。样式也会经过后处理，它可以将它们最小化，使用Autoprefixer添加供应商前缀，并对不支持的功能进行聚类，如all 属性、自定义属性和媒体查询范围。

运行单元测试

执行npm test ，将使用Jest运行测试，并启动一个观察器，以便在你改变某些东西时重新运行它们。

 PASS  src/App.test.js
  ✓ renders learn react link (19 ms)

Test Suites: 1 passed, 1 total
Tests:       1 passed, 1 total
Snapshots:   0 total
Time:        0.995 s
Ran all test suites.

Watch Usage
 › Press f to run only failed tests.
 › Press o to only run tests related to changed files.
 › Press q to quit watch mode.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press Enter to trigger a test run.

Jest是一个测试运行器，也是由Facebook开发的，作为Mocha或Karma的替代品。它在Node环境中而不是在真正的浏览器中运行测试，但使用jsdom提供了一些浏览器特有的globals。

Jest还与你的版本控制系统集成，默认情况下只对上次提交后改变的文件运行测试。关于这一点，请参考 "如何使用Jest测试React组件"。

ESLint

在开发过程中，你的代码也将通过ESLint运行，这是一个静态代码分析器，将帮助你在开发过程中发现错误。

继续阅读Create React App:让React项目在SitePoint上快速就绪。

avatar
文章
阅读
粉丝