React使用JSX来替代常规的JavaScript, JSX是一个看起来很像XML的JavaScript语法扩展，React不强制我们一定要使用JSX(但是推荐使用)，它有以下优点：
- JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化。
- 它是类型安全的，在编译过程中就能发现错误。
- 使用 JSX 编写模板更加简单快速。
JSX中的注释
{/*注释...*/}
JSX操作React元素
- 创建元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>test1</title>
<!-- react核心 -->
<script src="./node_modules/react/umd/react.development.js"></script>
<!-- react-dom -->
<script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
<!-- 处理jsx -->
<script src="./node_modules/babel-standalone/babel.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.getElementById('app');
{/*定义元素, 注: 这是JSX中注释的写法*/}
let element_h1 = <h1>Hello, JSX</h1>;
{/*
将元素渲染到DOM中
*/}
ReactDOM.render(
element_h1,
app
);
</script>
</body>
</html>
查看效果
渲染元素
- 更新元素
<body>
<!--
1. React元素是不可变的, 也就是创建之后, 你是无法改变其内容或属性的
2. 目前唯一的办法就是创建一个新的元素, 然后将它传入到ReactDOM.render()方法
-->
<div id="app"></div>
<script type="text/babel">
function tick() {
{/*
创建元素
当代码中嵌套多个 HTML 标签，需要使用一个 div 元素包裹它, 否则报错
*/}
let element = (
<div>
<h1>Hello, JSX</h1>
<h2>现在时间是: {new Date().toLocaleTimeString()}</h2>
</div>
);
{/*将元素渲染到DOM中*/}
ReactDOM.render(
element,
document.getElementById('app')
);
}
setInterval(tick, 1000);
</script>
</body>
查看效果
更新元素
JSX中使用Javascript表达式
我们可以在JSX中使用JavaScript 表达式。表达式写在花括号 {} 中
- 字符串表达式
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.getElementById('app');
let name = "张三";
ReactDOM.render(
<div>
<label>姓名: {name}</label>
</div>,
app
);
</script>
</body>
效果
字符串表达式
- 运算
<div id="app"></div>
<script type="text/babel">
let app = document.getElementById('app');
ReactDOM.render(
<div>
//输出 100
<p>{10 * 10}</p>
//输出 true
<p>{((100 > 5) && (5 < 7)).toString()}</p>
// 输出 3 > 2, 在 JSX中不能使用 if else 语句，但可以使用三元运算表达式来替代
<p>{(3 > 2)? '3 > 2':'3 < 2'}</p>
</div>,
app
);
</script>
样式
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.getElementById('app');
//样式
let h1_style = {
color: '#ff0000'
};
ReactDOM.render(
<h1 style={h1_style}>hello JSX</h1>,
app
);
</script>
</body>
效果
样式
数组
<body>
<div id="app"></div>
<script type="text/babel">
let app = document.getElementById('app');
//定义数组
let arr = [
<h1>Java</h1>,
<h1>Php</h1>,
<h1>Golang</h1>,
<h1>Python</h1>,
<h1>Node.js</h1>,
];
//渲染数据
ReactDOM.render(
<div>
{arr}
</div>,
app
);
</script>
</body>
效果
数组
