React入门系列二（React-JSX）
React 使用 JSX 来替代常规的 JavaScript。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。不一定非要使用 JSX，但它有以下优点：
1）JSX 执行更快，在编译为 JavaScript 代码后进行了优化。
2）它是类型安全的，在编译过程中就能发现错误。
3）使用 JSX 编写模板更加简单快速。
一、使用JSX
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用JSX</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>你好哦，欢迎使用JSX</div>,
document.getElementById('example')
);
</script>
</body>
</html>关于ReactDOM.render
ReactDOM.render是react最基本的用法，用于将模板转化为HTML语言，并插入指定的DOM结点。
ReactDOM.render(template,targetDOM);接收两个参数，第一个参数用来创建模板，多个DOM元素外层需要使用一个标签进行包裹；第二个参数用来指定插入该模板的目标位置。
JSX允许JavaScript和HTML混写。
二、将JSX代码写入独立文件引入
HTML文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>将JSX写入独立文件引入</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel" src="js/hello_react.js"></script>
</body>
</html>
JS文件
ReactDOM.render(
<div>你好哦，欢迎使用JSX</div>,
document.getElementById('example')
);
三、在JSX中使用JavaScript表达式
可以在 JSX 中使用 JavaScript 表达式，表达式写在花括号 {} 中。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在JSX中使用JavaScript表达式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<div>{20+25}</div>,
document.getElementById("example")
);
</script>
</body>
</html>在 JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>在JSX中使用三元运算表达式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var a=1;
ReactDOM.render(
<div>{a==1?'true':'false'}</div>,
document.getElementById("example")
);
</script>
</body>
</html>四、React 推荐使用内联样式
可以使用 camelCase(驼峰命名) 语法来设置内联样式. React 会在指定元素数字后自动添加 px 。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>React 推荐使用内联样式</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var myStyle={
color:'green'
};
ReactDOM.render(
<h1 style={myStyle}>React 推荐使用内联样式</h1>,
document.getElementById("example")
);
</script>
</body>
</html>五、React注释
在标签内部的注释需要花括号，在标签外的的注释不能使用花括号
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>注释</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
/*注释*/
<div>
{/*注释*/}
<p>注释</p>
</div>,
document.getElementById('example')
);
</script>
</body>
</html>六、数组
JSX 允许在模板中插入数组，数组会自动展开所有成员
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>数组</title>
<!-- 引入React三个文件-->
<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var array=[<div>1</div>,<div>2</div>,<div>3</div>];
ReactDOM.render(
<div>{array}</div>,
document.getElementById('example')
);
</script>
</body>
</html>