<!DOCTYPE html>
<html lang="en">
<head>
<script src="../build/react.js"></script> <!-- 加载react核心类库 -->
<script src="../build/react-dom.js"></script> <!-- react-dom提供 对dom的相关功能 -->
<script src="../build/browser.min.js"></script> <!-- browser.js 将jsx语法转为js -->
<title>Document</title>
</head>
<body>
<div id="example"></div>
<div id="abc"></div>
<script type="text/babel">
ReactDOM.render( //ReactDOM.render 是render最基本的方法，将模版转为html语言，并插入指定的dom节点
<h1>hello react</h1>, //html在js中，不加任何引号，使用jsx语法（允许js和html混写）
document.getElementById("example")
);
</script>
<script type="text/babel">
const arr = {
obj1:<h2>arr 1</h2>,
obj2:<h3>arr 2</h3>,
}
ReactDOM.render(
<div>{arr.obj1}{arr.obj2}</div>,
document.getElementById("abc")
);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<div id="abc"></div>
<script type="text/babel">
// 封装组件 在react中通常约定组件类的第一个字母必须大写 小写没结果呵呵了
var MyComponent = React.createClass({ //createClass 用于生成一个组件类
render:function(){ //所有的组件类都必须有自己的render，用于输出组件
return <div>hello</div>;
}
});
// 使用组件类，输出在任意地方
ReactDOM.render(
<MyComponent />, //MyComponent组件类，会自动生成MyComponent实例
document.getElementById("example")
);
ReactDOM.render(
<MyComponent />,
document.getElementById("abc")
);
</script>
</body>
</html>
4983
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
