使用入门:优化您的 React 应用
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
想让您的 React 网站尽可能快速且易于访问吗?你来对地方了!
React 是一个开源库,可用于构建界面
。此学习路线将涵盖
来提升性能和
应用的易用性
本指南将为您介绍如何设置和运行 React 应用。
本部分的其他所有指南都会介绍优化
React 应用的无障碍功能。
为什么搜索渠道报告非常实用?
有很多内容说明了如何构建快速可靠的
但介绍如何构建快速可靠的 React
应用。这些指南从 React 的角度介绍上述内容
其中只有
还提到了 React 生态系统
您将学到什么?
本学习路线中的教程不侧重于:
虽然我们会在需要的时候涉及这两个概念,
而本节中的 Codelab 将重点介绍如何快速构建
React 网站。因此,关于 React 的基本知识
必需。
创建 React 应用
Create React App (CRA) 是
开始构建 React 应用的最简单方法。它提供一个默认的
且内置了许多核心功能,包括构建系统
包含模块打包器 (webpack) 和转译器 (Babel)。
在命令行 shell 上,您只需运行以下命令即可新建
应用:
npx create-react-app app-name
命令执行完毕后,您可以导航到并运行应用
使用以下命令:
cd new-app
npm start
以下嵌入显示了新目录的目录结构和实际网页
自管式 CRA 应用。
CRA 使用多个配置文件和 build 脚本来设置
Webpack 和 Babel 构建流程,其中包括
Jest 设置,用于测试。为了简化
用户,这些文件处于隐藏状态,在您从 CRA 中弹出之前无法访问。它
最好总是尽可能避免退出,因为这意味着
作为您自己的源代码,这可能很难
管理。
新 CRA 应用的目录结构仅包含
您实际上需要进行修改才能使您的应用正常运行。通过
CRA 文档
将对此进行详细介绍
后续操作
现在,您已了解如何开始构建 Create React 应用,不妨学习
来提升应用的性能和无障碍功能。
学习路线:
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):2019-04-29。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"没有我需要的信息"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"太复杂/步骤太多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"内容需要更新"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻译问题"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/代码问题"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"易于理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"解决了我的问题"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]
{"lastModified": "\u6700\u540e\u66f4\u65b0\u65f6\u95f4 (UTC)\uff1a2019-04-29\u3002"}
[[["易于理解","easyToUnderstand","thumb-up"],["解决了我的问题","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["没有我需要的信息","missingTheInformationINeed","thumb-down"],["太复杂/步骤太多","tooComplicatedTooManySteps","thumb-down"],["内容需要更新","outOfDate","thumb-down"],["翻译问题","translationIssue","thumb-down"],["示例/代码问题","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["最后更新时间 (UTC):2019-04-29。"],[],[]]