我能以惊人的速度构建 React 应用原型。以下是我的 5 个关键技巧。

使用 React 提升速度不仅仅取决于经验。工具、模块化和策略也至关重要。让我们深入了解一下！

_{^{照片由 Warren Wong 拍摄，来自 Unsplash}}

1. 用于npx create-react-app my-app-name立即启动并运行

（显而易见的伎俩）

2. 使用它yarn add prettier --dev来自动格式化代码，这样您就可以 100% 专注于代码构建，而不是语法/格式问题。

我遵循的步骤：

• 在你的 IDE 中启用 prettier，使其在保存文件时运行（请在 Google 上搜索适用于你所使用的 IDE 的设置）。
• 因为我讨厌分号和双引号，所以我.prettierrc在根目录下的一个文件中添加了以下内容来覆盖默认设置：

{
  "singleQuote": true,
  "semi": false
}

3. 通过即时 GitHub Pages 部署快速获得工作反馈

快速构建应用不仅仅取决于你的编码速度，还取决于你如何快速获得反馈，从而避免浪费大量时间开发错误的功能。因此，快速分享你的 React 应用至关重要。

GitHub 允许你为指定的代码仓库免费托管静态网页。🎊 默认情况下，它会直接提供分支根目录index.html下的所有内容gh-pages。

……这真是太麻烦了create-react-app！ 😦 你存储在 GitHub 上的实际上只是会被转译并构建成一个有效的 Web 应用程序的代码，index.html等等yarn build。

为了解决这个问题，有一个 npm 包，gh-pages当你运行命令时，它会自动构建你的应用程序并将构建好的应用程序发布到分支yarn deploy（非常简单！）。

4. ❌ 删除默认设置index.css和App.css文件——请改用模块化设计styled-components

任何使用过原生 CSS 文件（全局应用）的人都知道，随着 CSS 文件数量的增长，会因为意想不到的副作用而浪费多少时间。很难弄清楚究竟是哪些 CSS 相互影响。

而且，在快速构建时，你通常会混合使用 CSS 文件和直接在组件上使用的内联 CSS（例如 `<div>` <div style={{color: 'red'}}/>）。这使得查找 CSS 代码更加混乱。🙄

使用styled-componentsCSS 可以指定仅应用于特定 React 组件的 CSS，并且可以直接在 Javascript 中编写原生 CSS（无需查找文件，也无需使用驼峰命名法等backgroundColor: 'blue'）。

这大大加快了开发速度：

1. 它让您可以一次专注于一个组件，而无需浏览多个文件并纠正应用程序范围内的样式问题。
2. 它让您能够快速轻松地在项目间共享组件（及其样式）。为什么？现在您可以粘贴一个已设置样式的组件，并确保它的样式与之前项目中的完全一致。此外，如果您想提取特定组件的样式，也很容易找到它。
3. 它明确地展示了组件和样式在何处以及如何重用，从而提高效率和用户界面一致性。

_{^{对于那些还在犹豫要不要尝试另一个 CSS 库的人：我以前也是个styled-components怀疑论者。但用了十分钟之后，我就彻底爱上了它。我再也没用过别的库，工作效率也大大提升。}}

5. 🙈 故意忽略（某些）最佳实践。编写代码的方式可以让你快速构建，例如使用包含多个 React 组件的长文件。

快速开发应用时，将所有正在编写和思考的代码直接呈现在眼前会很有帮助。我通常会把所有东西都放在几个大文件中，然后再把它们拆分成更小的文件。为什么呢？

在编程中，专注力和精力通常是限制你资源的因素，而不是时间。

如果你在早期阶段花费大量精力去完美地格式化代码，就会消耗掉原本可以用来快速构建的专注力和精力。更重要的是，你的代码库很可能在早期阶段就发生剧烈的变化，因此这些精力很快就会完全白费。

但是，将代码分解不是能让代码更容易编写和使用吗？

是的，但通常这种回报是在你完成原型设计并需要扩展规模或与其他开发者（或未来的自己）共享之后才会显现。在原型设计阶段，代码记忆犹新，所以只需用最简单的方式构建即可。

祝你代码编写速度飞快！

想提升你的 React 技术吗？这里有一个从零开始创建 React 的故事……