From ba4b07944d24190da0a6d24193d2cbcf00fd1f8e Mon Sep 17 00:00:00 2001
From: xszxc <2112067692@qq.com>
Date: Sat, 15 Feb 2025 22:08:30 +0800
Subject: [PATCH] day3:JSX
---
Hoshino_FullStack_Compass.md | 34 ++++++++++++++++++++++++++++++++++
1 file changed, 34 insertions(+)
diff --git a/Hoshino_FullStack_Compass.md b/Hoshino_FullStack_Compass.md
index 59760ca..f732fa8 100644
--- a/Hoshino_FullStack_Compass.md
+++ b/Hoshino_FullStack_Compass.md
@@ -21,6 +21,40 @@
还有一个css的布局属性`display:block`会使一个元素自动占据一行， 导致本该渲染在同一行的元素呈`column`布局,使用`display:inline`布局可以解决这个问题。
+### 02.15
+JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。
+
+- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
+- 它是类型安全的，在编译过程中就能发现错误。
+- 使用 JSX 编写模板更加简单快速。
+
+React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在**UI**中需要绑定处理事件、在某些时刻状态发生变化时需要通知到**UI**，以及需要在**UI**中展示准备好的数据。但是React不强制要求使用JSX。
+
+JSX是JS的语法糖，编译时JSX会通过Babel编译成JS。React源码中使用React.createElement()方法来创建JSX，该方法依次接收DOM节点（比如div、span）、属性集合（比如className、style）和children（子节点）三个参数，并返回一个JS对象，也就是虚拟DOM。
+
+以下两段示例是等价的：
+
+```jsx
+const element = (
+
+ Hello, world!
+
+);
+```
+
+```jsx
+const element = React.createElement(
+ 'h1',
+ {className: 'greeting'},
+ 'Hello, world!'
+);
+```
+
+要从组件返回多个元素，必须用一个`parent tag`包裹它们，可以使用``或者一个空标签`<>`
+
+JSX 要求标签明确关闭：像 `![]()
` 这样的自闭合标签必须写成 `![]()
`，像 `oranges` 这样的包装标签必须写成 `oranges`。
+
+可以使用[转换器](https://transform.tools/html-to-jsx)，将现有的`html`代码转换为`JSX`代码。
\ No newline at end of file