本文通过一个简单的React实例介绍了React的基本用法，包括组件渲染、JSX语法特性、内联样式的设置及变量表达式的使用。
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<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"> //注意type的类型
var a = 2;
var sty1 = { //可设置样式
color:'pink'
}
var arr =[
<p>arr1</p>, //数组
<p>arr2</p>
]
<div>
<h1>Hello, world!</h1>
<p>{12+12}</p> //表达式：注意{ }的使用 返回：24
<p>{a==2?'true':'false'}</p> //true
<p style={sty1}>sunshine</p>
{arr} //返回arr1 arr2
</div>,
document.getElementById('example')
);
</script>
</body>
</html>
扫一扫
297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
