这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天
| 青训营笔记
一、从 JavaScript 到 React
1.呈现用户界面
要了解 React 的工作原理，我们首先需要基本了解浏览器如何解释您的代码以创建交互式用户界面 （UI）。然后，浏览器读取 HTML 并构造文档对象模型 （DOM）
2.什么是 DOM？
DOM 是 HTML 元素的对象表示形式。它充当代码和用户界面之间的桥梁，并具有具有父子关系的树状结构。可以使用 DOM 方法和编程语言（如 JavaScript）来侦听用户事件，并通过选择、添加、更新和删除用户界面中的特定元素来操作 DOM。DOM 操作不仅允许您定位特定元素，还可以更改它们的样式和内容。
3.命令式编程与声明式编程
在构建用户界面时，声明性方法通常是首选，因为它可以加快开发过程。如果开发人员能够声明他们想要显示的内容（在本例中为带有一些文本的标签），而不是编写 DOM 方法，这将很有帮助。
换句话说，命令式编程就像给厨师提供如何制作披萨的分步说明。声明式编程就像订购披萨一样，而不关心制作披萨所需的步骤。
帮助开发人员构建用户界面的流行声明式库是 React。
4.什么是JSX？
JSX 是 JavaScript 的语法扩展，它允许您用熟悉的类似 HTML 的语法描述您的 UI。JSX的好处是，除了遵循三个JSX规则之外，你不需要学习HTML和JavaScript之外的任何新符号或语法。
请注意，浏览器不能理解开箱即用的JSX，因此您需要一个JavaScript编译器（例如Babel）将JSX代码转换为常规JavaScript。
5.循环访问列表
通常需要将数据显示为列表。可以使用数组方法来操作数据并生成样式相同但包含不同信息的 UI 元素。
注意： React 在数据获取方面是没有主见的，这意味着您可以选择最适合您需求的解决方案。稍后，我们将在Next.js中讨论数据获取选项。但现在，您可以使用一个简单的数组来表示数据。
请注意你如何使用大括号来编织“JavaScript”和“JSX”领域。
如果你运行这段代码，React 会给我们一个关于缺少道具的警告。这是因为 React 需要一些东西来唯一标识数组中的项目，以便它知道要在 DOM 中更新哪些元素。key
您现在可以使用这些名称，因为它们当前是唯一的，但建议使用保证唯一的名称，例如项目 ID。
6.反应资源
多年来，已经创建了许多课程、视频和文章来帮助开发人员学习 React。虽然很难推荐适合您学习风格的资源，但一个宝贵的参考是 React 文档，其中包含交互式沙箱来帮助您练习这些主题。
在学习 React 时，最好的学习方法是构建。你可以通过使用和你到目前为止所学到的知识来逐步采用 React，向现有网站添加小组件。然而，许多开发人员已经发现 React 的用户和开发人员体验足够有价值，可以直接潜入并在 React 中编写他们的整个前端项目。<script>
7.从 React 到 Next.js
虽然 React 擅长构建 UI，但将 UI 独立构建为功能齐全的可扩展应用程序确实需要一些工作。好消息是 Next.js 处理了大部分设置和配置，并具有其他功能来帮助您构建 React 应用程序。
作者：笨鱼fly
链接：juejin.cn/post/719443…
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
