介绍
欢迎来到 React 的世界！在本实验中，你将深入了解 JSX，它是使用 React 构建用户界面的基础部分。JSX (JavaScript XML) 是 JavaScript 的一种语法扩展，它允许你在 JavaScript 文件中直接编写类似 HTML 的代码。这使得你的 UI 代码更具可读性、表现力，并且更易于维护。
在本实验中，你将学习 JSX 的核心规则，包括：
- 编写类似 HTML 的元素。
- 嵌入动态 JavaScript 表达式。
- 应用 CSS 类。
- 使用自闭合标签。
- 使用 Fragments 将多个元素分组。
一个基础的 React 项目已在 ~/project/my-app 目录中为你设置好。让我们开始吧！
在组件 return 中编写类似 h1 的 JSX 元素
在本步骤中，你将编写一个基础的 JSX 元素，并看到它在浏览器中渲染。JSX 允许你在 React 组件中直接编写看起来非常像 HTML 的标记语言。
首先，让我们运行开发环境。你所有的工作都将在 ~/project/my-app 目录下进行。
在终端中导航到项目目录，安装必要的依赖项，然后启动开发服务器。
cd ~/project/my-app
npm install
安装完成后，运行以下命令启动开发服务器：
npm run dev -- --host 0.0.0.0 --port 8080
你将看到输出表明服务器正在运行。现在，点击屏幕顶部的 Web 8080 标签页，查看你的实时应用程序。它应该显示 "Hello, React!"。
接下来，从左侧的文件浏览器中打开 src/App.jsx 文件。该文件包含一个名为 App 的简单 React 组件。
让我们修改 h1 元素。将 <h1> 标签内的文本更改为 "Welcome to JSX"。
用以下代码替换 src/App.jsx 的内容：
import "./App.css";
function App() {
return <h1>Welcome to JSX</h1>;
}
export default App;
保存文件 (Ctrl+S 或 Cmd+S)。Web 8080 标签页中的应用程序将自动更新，显示新文本。
使用花括号嵌入 JavaScript 表达式
在本步骤中，你将学习如何使用花括号 {} 将 JavaScript 表达式直接嵌入到你的 JSX 中。这是一个强大的功能，允许你渲染动态内容。
你可以在花括号内放置任何有效的 JavaScript 表达式。这可以是一个变量、一个函数调用或一个算术运算。
让我们修改 App 组件来显示一个动态标题。再次打开 src/App.jsx 文件。
在 App 函数中，return 语句之前，声明一个名为 title 的 JavaScript 常量，并为其分配一个字符串值。然后，在 <h1> 元素中使用这个常量。
用以下代码更新你的 src/App.jsx 文件：
import "./App.css";
function App() {
const title = "React JSX Basics";
return <h1>{title}</h1>;
}
export default App;
保存文件。现在，查看 Web 8080 标签页。你将看到标题已更新为 "React JSX Basics"。React 会评估 {title} 表达式，并将其值渲染为 <h1> 标签的内容。
添加 className 属性以应用 CSS 类
在本步骤中，你将学习如何为你的 JSX 元素添加 CSS 类以进行样式设置。
在普通的 HTML 中，你使用 class 属性来分配一个 CSS 类。然而，class 是 JavaScript 中的一个保留关键字。为了避免冲突，JSX 使用 className 代替。
首先，让我们添加一个样式规则。打开 src/App.css 文件，并添加以下 CSS 代码来为我们的标题定义样式：
.title-style {
color: #61dafb;
text-align: center;
}
保存 src/App.css 文件。
现在，让我们将这个类应用到我们的 <h1> 元素上。打开 src/App.jsx，并在 h1 标签中添加 className 属性。
将你的 src/App.jsx 文件更新为如下内容：
import "./App.css";
function App() {
const title = "React JSX Basics";
return <h1 className="title-style">{title}</h1>;
}
export default App;
保存文件并切换到 Web 8080 标签页。你现在应该看到标题文本居中并显示为浅蓝色，这与你在 App.css 中定义的样式一致。
为 img 元素使用自闭合标签
在本步骤中，你将学习如何在 JSX 中使用自闭合标签。在 HTML 中，一些元素如 <img>、<br> 和 <input> 是“空”或“无效”元素，这意味着它们没有闭合标签。
在 JSX 中，你必须显式地闭合每个标签。对于没有子元素的元素，你使用自闭合语法，在闭合的尖括号前添加一个斜杠 /，例如 <img />。
一个 React 组件只能返回一个根元素。要渲染多个元素，你必须将它们包裹在一个容器中，例如 <div>。
让我们在标题下方添加一个图片。我们将把 <h1> 和新的 <img> 标签都包裹在一个 <div> 中。
用以下代码更新你的 src/App.jsx 文件：
import "./App.css";
function App() {
const title = "React JSX Basics";
const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";
return (
<div>
<h1 className="title-style">{title}</h1>
<img src={imageUrl} alt="LabEx Logo" width="200" />
</div>
);
}
export default App;
在这段代码中，我们添加了一个 <img> 标签。请注意它是自闭合的 (/>)。我们还使用了花括号从 imageUrl 变量动态设置了 src 属性。
保存文件并查看 Web 8080 标签页。你将看到 LabEx logo 显示在标题下方。
使用 fragment <> </> 渲染多个元素
在本步骤中，你将学习一种更好的方法来组合多个元素，而无需向 DOM 添加额外的节点：React Fragments。
在上一步中，我们使用 <div> 来包裹 <h1> 和 <img> 元素，因为一个组件必须返回一个单一的根元素。然而，有时这个额外的 <div> 是不必要的，并且可能会干扰你的 CSS 布局（例如，使用 Flexbox 或 Grid 时）。
React 提供了一个名为 Fragments 的解决方案。Fragment 允许你组合一系列子元素，而无需向 DOM 添加额外的节点。你可以使用简写语法 <> ... </>。
让我们重构我们的 App 组件，使用 Fragment 代替 <div>。
打开 src/App.jsx 文件，并将开头的 <div> 和结尾的 </div> 分别替换为 <> 和 </>。
你最终的 src/App.jsx 代码应该如下所示：
import "./App.css";
function App() {
const title = "React JSX Basics";
const imageUrl = "https://labex.io/_ipx/s_98x30/labex-logo-light.svg";
return (
<>
<h1 className="title-style">{title}</h1>
<img src={imageUrl} alt="LabEx Logo" width="200" />
</>
);
}
export default App;
保存文件。在 Web 8080 标签页中的视觉输出将与上一步完全相同。但是，如果你在浏览器的开发者工具中检查 HTML，你会发现 <h1> 和 <img> 元素现在是直接的同级元素，没有父 <div>。这创建了一个更简洁、更高效的 DOM 结构。
总结
恭喜你完成了 React JSX Basics 实验！你已经学习了在 React 应用中编写 UI 的基本规则和语法。
在本实验中，你练习了：
- 在组件的 return 语句中编写类似 HTML 的元素，如
<h1>。 - 使用花括号
{}将动态的 JavaScript 变量和表达式嵌入到你的标记中。 - 使用
className属性应用 CSS 类。 - 使用
/>语法为<img>等元素使用自闭合标签。 - 使用 React Fragments (
<> </>) 将多个元素分组，而无需添加额外的 DOM 节点。
这些概念是使用 React 创建复杂和动态用户界面的基石。继续练习，以便更熟练地掌握 JSX 的强大功能和灵活性。
