React的 JSX 语法
概念
HTML 语言直接写在 JavaScript 语言中，不加任何引号，这就是 JSX 语法。它允许 HTML 和 JavaScript 混写
const element = <h1>Hello, world!</h1>;
它是一个 JavaScript 的语法扩展。建议在 React 中配合使用 JSX ， JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。 JSX 可能会使人联想到模版语言，但它具有 JavaScript 的全部功能
React 认为渲染逻辑本质上与其他 UI 逻辑内在耦合，比如，在 UI 中需要绑定处理事件、在某些时刻状态发生变化时需要通知到 UI ，以及需要在 UI 中
环境配置
非模块化环境： babel-standalone ，执行时编译，速度比较慢，只适用于开发环境测试 模块化环境：结合 webpack 配置 babel 响应的工具完成预编译，浏览器执行的是预编译的结果 babel REPL 环境基本语法规则
换行或者多标签，推荐加括号，避免 JavaScript 自动分号不往后执行的问题
<div ></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
function getEl() {
return (
<div>
<h1>hello world</h1>
<p>hello react</p>
</div>
)
}
ReactDOM.render(getEl(),document.getElementById('app'))
</script>
单标签必须以 /> 结束
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
function getEl() {
return (
<div>
<b />hello react
</div>
)
}
ReactDOM.render(getEl(),document.getElementById('app'))
</script>
在 JSX 中嵌入 JavaScript 表达式：遇到 < 按 html 解析，遇到 { 按 JavaScript 解析
<div ></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const user ={
name:'eric',
age:18,
gender:0
}
const element = (
<div>
<h3>姓名：{user.name}</h3>
<h3>年龄：{user.age}</h3>
<h3>性别：{user.gender}</h3>
<h3>三元表达式：{user.gender === 0 ? '男': '女'}</h3>
<h3>数字相加：{ 1 + 1}</h3>
<h3>字符串拼接：{'hello' + 'world'}</h3>
<h3>es6字符串拼接：{`hello' ${user.name}`}</h3>
</div>
)
ReactDOM.render(element,document.getElementById('app'))
</script>
注释：推荐单行注释
<div ></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const element = (
<div>
<h3>hello</h3>
{
//注释1
//注释2
}
<h3>hello</h3>
{/*注释3*/}
<h3>hello</h3>
{
/*注释4*/
/*注释5*/
}
</div>
)
ReactDOM.render(element,document.getElementById('app'))
</script>
在 JavaScript 中嵌入 JSX ：在编译之后， JSX 表达式会被转为普通 JavaScript 函数调用，并且对其取值后得到 JavaScript 对象。
也就是说，你可以在 if 语句和 for 循环的代码块中使用 JSX ，将 JSX 赋值给变量，把 JSX 当作参数传入，以及从函数中返回 JSX
<div ></div>
<script src="node_modules/@babel/standalone/babel.js"></script>
<script src="node_modules/react/umd/react.development.js"></script>
<script src="node_modules/react-dom/umd/react-dom.development.js"></script>
<script type="text/babel">
const user ={
name:'eric',
}
function getHi(user) {
if (user) {
return <h1>hello {user.name}</h1>
}
return <h1>hello world</h1>
}
const element = getHi(user)
//const element = getHi()
ReactDOM.render(element,document.getElementById('app'))
</script>
JSX 中特定属性
//可以通过使用引号，来将属性值指定为字符串字面量
const element = <div tabIndex="0"></div>;
//也可以使用大括号，来在属性值中插入一个 JavaScript 表达式:在属性中嵌入 JavaScript 表达式时，不要在大括号外面加上引号
const element = <img src={user.avatarUrl}></img>;
//因为 JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定
const element = (
<div className="box">
<laber htmlFor="name">姓名</laber>
<input type='text' id='name' />
</div>
)
JSX 防止注入攻击： React DOM 在渲染所有输入内容之前，默认会进行转义。它可以确保在你的应用中，永远不会注入那些并非自己明确编写的内容。所有的内容在渲染之前都被转换成了字符串。这样可以有效地防止 XSS （ cross-site-scripting , 跨站脚本）攻击
const title = response.potentiallyMaliciousInput;
// 直接使用是安全的：
const element = <h1>{title}</h1>;
JSX 表示对象：“React 元素”描述了你希望在屏幕上看到的内容，React 通过读取这些对象，然后使用它们来构建 DOM 以及保持随时更新
//方式1
const element = (
<h1 className="greeting">
Hello, world!
</h1>
);
//方式2
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, world!'
);
//React.createElement() 的处理（这是简化过的结构）：变为 “React 元素”
const element = {
type: 'h1',
props: {
className: 'greeting',
children: 'Hello, world!'
}
};