JSX 基础语法

本章主要包括以下内容：
● JSX 基础语法
● createElement 方法
JSX 基础语法
在 React 中，使用 JSX 来描述页面。
function App() {
return (

Hello React~

);
}
你可以把类似于 HTML 的代码单独提取出来，例如：
function App() {
const ele =

Hello React~

return (
ele
);
}
注意这种类似于 HTML 的语法在 React 中称之为 JSX， 这是一种 JavaScript 的语法扩展。在 React 中推荐使用 JSX 来描述用户界面。JSX 乍看起来可能比较像是模版语言，但事实上它完全是在 JavaScript 内部实现的。

使用 JSX 来描述页面时，有如下的一些语法规则：
● 根元素只能有一个；
● JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中；
● 属性值指定为字符串字面量，或者在属性值中插入一个 JavaScript 表达式；
● style 对应样式对象，class 要写作 className；
● 注释需要写在花括号；
● JSX 允许在模板中插入数组，数组会自动展开所有成员。

示例：
function App() {
// 数组遍历
const arr = [
(

Array1

),
(

Array2

),
( Array3),
];

const obj = [
{ id: 1, name: ‘Jack’, age: 20 },
{ id: 2, name: ‘Bob’, age: 22 },
{ id: 3, name: ‘John’, age: 24 }
]

const res1 = obj.map(item => {
return (

姓名：{item.name} 年龄：{item.age}

)
})

const el = (
<>

Hello React

{arr}
{res1}
</>
)
return (
el
);
}

export default App;

createElement 方法
JSX 是一种 JavaScript 的语法扩展，Babel 会把 JSX 转译成一个名为 React.createElement 函数调用。
React.createElement(type, [props], […children]);
参数说明：
● type：创建的 React 元素类型（可选的值有：标签名字符串、React 组件）。
● props（可选）：React 元素的属性。
● children（可选）：React 元素的子元素。
例如，下面两种代码的作用完全是相同的：
const element1 = (

Hello, world!

);
const element2 = React.createElement(
‘h1’,
{className: ‘greeting’},
‘Hello, world!’
);
这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。
可以看出，JSX 的本质其实就是 React.createElement 方法的一种语法糖。

-EOF-