jsx语法 jsx优点：js逻辑和html标签，是一个 JavaScript 的语法扩展，具有JavaScript全部功能；
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合
const element = Hello, world!;// js与html相结合；const name = 'Josh Perez';// 定义name变量；
const element = Hello, {name};// 在标签中用大括号可以使用变量；
2.在必须使用ReactDOM.render(); 函数才可以渲染使用
3.为方便阅读可将jsx拆分为多行
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}const element = (Hello, {formatName(user)}!);
const user = {
firstName: 'Harper',
lastName: 'Perez'
};
ReactDOM.render(
element,
document.getElementById('root')
);
- 可以在if语句和for循环中使用jsx以及从函数中返回jsx
function getGreeting(user) {
if (user) {
return Hello, {formatName(user)}!;
}
return Hello, Stranger.;
}
2.可以用引号将属性值指定为字符串字面量；
const element = ;
3.也可以使用大括号插入js表达式；
const element = 
;
4.同一属性不能同时使用引号和大括号
5.所有的属性都是小驼峰命名法
JSX 里的 class 变成了 className，而 tabindex 则变为 tabIndex。6.如果标签中没有内容，可以用
/>闭合标签7.jsx标签里可以包含喝多子元素
8.可以安全的在jsx当中输入内容：
React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。9.Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
const element = (Hello, world!);
两种代码完全等效
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
【react.js|react学习----jsx语法】10.React.createElement() 会预先执行一些检查，以帮助你编写无错代码，但实际上它创建了一个这样的对象：
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};
推荐阅读
- react.js|react学习----组件
- javascript|Vite Server 是如何处理页面资源的（）
- java|学习java的第四十二天，GUI编程的基础认知
- 机器学习|K-近邻算法学习
- 机器学习|Pandas 学习
- 机器学习|Numpy学习
- React报错之Expected an assignment or function
- JavaScript|数组乱序、数组去重
- html网页设计|使用html+css+js实现一个静态页面（含源码）