Nextjs入坑指南(三)

type

status

date

slug

summary

⛩️一、React入门

加载React

可以从https://unpkg.com/中加载React Script。其中

react是React库的核心。

react-dom提供了特定于DOM的方法，使您能够将React与DOM一起使用。

直接选择一个在社区中流行的以React驱动的框架(例如：Nextjs)。

使用react

在

Nextjs入坑指南(二) 提到的例子中加载react。

删除之前添加的DOM方法，添加ReactDOM.createRoot（）方法来定位特定的DOM元素并创建一个根来显示React组件。然后，添加root.render（）方法将React代码渲染到DOM。

这将告诉React在#app元素中渲染我们的<h1>标题。但是如果运行它可能会得到一个语法错误，因为<h1>Develop. Preview. Ship.</h1>不是有效的JavaScript语法，在React中我们将其称作JSX。

🤖二、介绍JSX

jsx看起来很像HTML，它实际上是一个语法扩展，允许在JavaScript中使用类似HTML的语法描绘UI。

jsx只需要遵循3个规则，其余几乎与HTML相同。

JSX规则

返回单个根元素。

若要从组件返回多个元素，请用单个父标记包装它们。例如：

如果我们不想添加一个额外的<div>，我们可以使用<>和</>替代它。此空标签(<></>)称为 Fragment。片段允许您对事物进行分组，而不会在浏览器 HTML 树中留下任何痕迹。

闭合所有标签

JSX 要求标签显式闭合：自闭合标签，像<img>必须变成<img />; <li>oranges这样的包装标签必须写成<li>oranges</li>。

大多采用驼峰式命名

JSX 变成 JavaScript，用 JSX 编写的属性成为 JavaScript 对象的键。在您自己的组件中，您经常希望将这些属性读入变量中。但 JavaScript 对变量名称有限制。例如，它们的名称不能包含破折号或保留字（如类）。

这就是为什么在 React 中，许多 HTML 和 SVG 属性都是用驼峰命名法编写的。例如，您可以使用strokeWidth而不是stroke-width。由于 class 是保留字，因此在 React 中您可以写 className，以相应的 DOM 属性命名。

可以在 DOM 组件列表中找到所有这些属性。如果你弄错了，别担心，React 会在浏览器控制台上打印一条消息，并可能进行更正。

注意：

在实践中，转换这些属性可能会很繁琐。但是，我们可以使用转换器将现有的HTML和SVG转换为JSX，这也是React官方推荐的方式。转换器在实践中非常有用，但仍然值得了解正在发生的事情，以便可以轻松地自己编写JSX。

上节我们已经知道浏览器实质上是构筑了DOM树，那么，我们可以在JavaScript中使用DOM方法操作DOM树，继而操纵UI组件。我们开始一个小项目，以帮助我们理解。

首先，创建一个index.html文件，写入如下内容：

如果不出意外，你的浏览器渲染出来的HTML应该是(在浏览器中按F12调出开发者工具查看)：

可以看到，JavaScript和DOM是我们具有了动态操做UI的能力。

但是，我们写了很长的代码只是为了添加一个元素，这明显是不划算的。使用这种方法，开发人员花费大量时间编写指令来告诉计算机应该如何做事情。那么，是否可以描述想要显示的内容并让计算机计算出如何更新DOM呢？

🍱三、解析JSX

浏览器无法立即理解 JSX，因此需要一个 JavaScript 编译器（例如 Babel）来将 JSX 代码转换为常规 JavaScript。Babel 是一个工具链，主要用于将 ECMAScript 2015+ 代码转换为当前和旧版本浏览器或环境中向后兼容的 JavaScript 版本，同时，它可以转换 JSX 语法。

使用<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>引入Babel到我们的项目。同时要更改Script类型(<script type=”text/javascript”> —> <script type=”text/jsx”>)以便babel应该转换哪些代码。

在使用React之后，我们开始减少大量的重复性工作。

🤠总结

介绍了如何加载和使用React

介绍了React中的JSX语法，包括其基本规则和使用方法

讨论了如何使用DOM方法在JavaScript中操作UI

解释了如何使用Babel对JSX代码进行编译

强调了React作为声明式库在构建用户界面中的优势

💡

有关React和Next.js安装或者使用上的问题，欢迎您在底部评论区留言，一起交流~