<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="app">
</div>
<!--<script type="text/babel" src="domrender.js"></script>--> <!--独立js文件-->
<script type="text/babel">
//1.JSX 中使用 JavaScript 表达式;表达式写在花括号 {}中;
//2.JSX 中不能使用 if else 语句，但可以使用三元运算表达式来替代;
//3.JSX执行更快，因为它在编译为 JavaScript 代码后进行了优化。它是类型安全的，在编译过程中就能发现错误。
var newStyle = {
fontSize: 30,
color: 'red'
};
var arr = [1,2,3,4,5,6];
ReactDOM.render(
<div>
{/*注释...这是注释方法不会显示在控制台*/}
<h2>菜鸟学习 React</h2>
<p data-myselfattr = "nice">自定义属性的用法</p>
<h1>{3+3}简单计算</h1>
<h1>{2 == 1 ? 'True!' : 'False'}---三元运算符</h1>
<p style={newStyle}>React推荐使用内联样式,会在指定元素数字后自动添加 px</p>
<p>{arr}---JSX 允许在模板中插入数组，数组会自动展开所有成员结果为:123456</p>
</div>
,
document.getElementById('app')
);
</script>
</body>
</html>
react基础语法二
猜你喜欢
转载自www.cnblogs.com/lhl66/p/9928843.html
今日推荐
周排行