我在开始我的第一个 React 项目时犯的 5 个错误

您知道选择一门新语言或框架是什么感觉。 有时有很好的文档可以帮助您找到解决方法。 但即使是最好的文档也不能涵盖所有内容。 当您处理新事物时，您一定会发现没有书面解决方案的问题。

这就是我第一次创建 React 项目时的感受——React 是那些拥有出色文档的框架之一，尤其是现在有了 beta 文档。 但我仍然挣扎着走过来。 从那个项目开始已经有一段时间了，但我从中得到的教训仍然记忆犹新。 尽管那里有很多 React“how-to”教程，但我还是想分享一下我第一次使用它时希望知道的内容。

所以，这就是这篇文章的目的——列出我早期犯过的错误。 我希望它们能帮助你更顺利地学习 React。

使用 create-react-app 启动一个项目

TL;DR 使用 Vite 或 Parcel。

创建React应用程序 (CRA) 是一个帮助你建立一个新的 React 项目的工具。 它为大多数 React 项目创建了一个具有最佳配置选项的开发环境。 这意味着您不必花时间自己配置任何东西。

作为初学者，这似乎是我开始工作的好方法！ 没有配置！ 刚开始编码！

CRA 使用两个流行的包来实现这一点，webpack 和 Babel。 webpack 是一个网络打包器，可以优化项目中的所有资产，例如 JavaScript、CSS 和图像。 Babel 是一种允许您使用更新的 JavaScript 功能的工具，即使某些浏览器不支持它们。

两者都很好，但是有更新的工具可以更好地完成工作，特别是 螺丝钉 和 快速网页编译器 （SWC）。

这些新的和改进的替代品比 webpack 和 Babel 更快更容易配置。 这使得在不弹出的情况下更容易调整在 create-react-app 中很难做到的配置。

要在设置新的 React 项目时同时使用它们，你必须确保你有 Node 安装版本 12 或更高版本，然后运行以下命令。

npm create vite

您将被要求为您的项目选择一个名称。 完成后，从框架列表中选择 React。 之后，您可以选择 Javascript + SWC or Typescript + SWC

然后你必须改变目录 cd 进入您的项目并运行以下命令；

npm i && npm run dev

这应该使用 URL 为您的站点运行开发服务器 localhost:5173

就这么简单。

运用 defaultProps 默认值

TL;DR 使用默认函数参数代替。

数据可以通过一个叫做 props. 它们就像 HTML 元素中的属性一样被添加到组件中，并且可以通过从作为参数传入的 prop 对象中获取相关值来在组件的定义中使用。

// App.jsx
export default function App() { return <Card title="Hello" description="world" />
} // Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> );
} export default Card;

如果需要默认值 prop是， defaultProp 可以使用属性：

// Card.jsx
function Card(props) { // ...
} Card.defaultProps = { title: 'Default title', description: 'Desc',
}; export default Card;

使用现代 JavaScript，可以解构 props 对象并在函数参数中为其全部分配一个默认值。

// Card.jsx
function Card({title = "Default title", description= "Desc"}) { return ( <div> <h1>{title}</h1> <p>{description}</p> </div> )
} export default Card;

这是更有利的，因为代码可以被现代浏览器读取而不需要额外的转换。

不幸， defaultProps 确实需要浏览器读取一些转换，因为开箱即用不支持 JSX（JavaScript XML）。 这可能会影响使用大量的应用程序的性能 defaultProps.

不要使用 propTypes

TL;DR 使用 TypeScript。

在 React 中， propTypes property 可用于检查组件是否为其 props 传递了正确的数据类型。 它们允许您指定应该用于每个 prop 的数据类型，例如字符串、数字、对象等。它们还允许您指定是否需要某个 prop。

这样，如果一个组件传递了错误的数据类型或者没有提供所需的 prop，那么 React 将抛出错误。

// Card.jsx
import { PropTypes } from "prop-types"; function Card(props) { // ...
} Card.propTypes = { title: PropTypes.string.isRequired, description: PropTypes.string,
}; export default Card;

打字稿 为传递给组件的数据提供一定程度的类型安全。 所以，当然， propTypes 在我刚开始的时候是个好主意。 然而，既然 TypeScript 已经成为类型安全的首选解决方案，我强烈建议使用它而不是其他任何东西。

// Card.tsx
interface CardProps { title: string, description?: string,
} export default function Card(props: CardProps) { // ...
}

TypeScript 是一种通过添加静态类型检查构建在 JavaScript 之上的编程语言。 TypeScript 提供了更强大的类型系统，可以捕获更多潜在的错误并改善开发体验。

使用类组件

TL;DR: 将组件写成函数

React 中的类组件是使用 JavaScript 类创建的。 它们具有更面向对象的结构以及一些附加功能，例如使用 this 关键字和生命周期方法。

// Card.jsx
class Card extends React.Component { render() { return ( <div> <h1>{this.props.title}</h1> <p>{this.props.description}</p> </div> ) }
} export default Card;

我更喜欢用类编写组件而不是函数，但是 JavaScript 类对于初学者来说更难理解和 this 会变得非常混乱。 相反，我建议将组件编写为函数：

// Card.jsx
function Card(props) { return ( <div> <h1>{props.title}</h1> <p>{props.description}</p> </div> )
} export default Card;

函数组件只是返回 JSX 的 JavaScript 函数。 它们更易于阅读，并且没有像 this 关键字和 生命周期方法 这使它们比类组件更高效。

函数组件也有使用钩子的优势。 反应钩 允许您在不编写类组件的情况下使用状态和其他 React 功能，从而使您的代码更具可读性、可维护性和可重用性。

不必要地导入 React

TL;DR：没有必要这样做，除非你需要钩子。

由于 React 17 于 2020 年发布，现在无需在创建组件时在文件顶部导入 React。

import React from 'react'; // Not needed!
export default function Card() {}

但我们必须在 React 17 之前这样做，因为 JSX 转换器（将 JSX 转换为常规 JavaScript 的东西）使用了一种名为 React.createElement 这仅在导入 React 时有效。 从那时起，一个新的转换器已经发布，它可以在没有 createElement 方法。

你仍然需要导入 React 来使用钩子， 片段，以及您可能需要从库中获取的任何其他函数或组件：

import { useState } from 'react'; export default function Card() { const [count, setCount] = useState(0); // ...
}

这些是我早期的错误！

也许“错误”这个词太苛刻了，因为后来出现了一些更好的做法。 尽管如此，我仍然看到很多实例，其中“旧”的做事方式仍在项目和其他教程中积极使用。

老实说，我在开始的时候可能犯了五个以上的错误。 每当您使用一种新工具时，它都更像是一次有效使用它的学习之旅，而不是按一下开关。 但这些是多年后我仍然随身携带的东西！

如果您已经使用 React 一段时间了，您希望在开始之前知道哪些事情？ 如果能有一个系列来帮助其他人避免同样的困境，那就太好了。

• SEO 支持的内容和 PR 分发。 今天得到放大。
• 柏拉图区块链。 Web3 元宇宙智能。 知识放大。 访问这里。
• Sumber: https://css-tricks.com/5-mistakes-starting-react/