您的位置：首页 > Web前端 > React

React 和组件

2018-02-28 11:24 351 查看

<!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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： React

相关文章推荐

新的分享

章节导航