react学习笔记02-面向组件编程
面向组件编程，直白来说，就是定义组件，使用组件。
以下内容则简单介绍下组建的声明与使用，直接复制demo观测结果即可。
步骤：
1、定义组件
a、轻量组件-函数组件（局限性：只能用在没有state、prop属性的场景，后面会解释）
// 方式一：（轻量组件）函数组件
function ComponentA(){
return <div>轻量组件A</div>
}
b、复杂组件-类组件（ES6）
// 方式二：（复杂组件）类组件【ES6】
class ComponentB extends React.Component{
render(){
return <div>类组件B</div>;
}
}
2、使用组件
<!DOCTYPE html><html>
<head>
<meta charset="utf-8" />
<title>React Tutorial</title> </head>
<body>
<!--react基础库-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.3/react-dom.js"></script>
<!--bable转换库，ES语法以及Jax语法的转换-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> <div id="content"></div>
<div id="app1"></div>
<div id="app2"></div>
<div id="app3"></div> <script type="text/babel">
//定义组件
// 方式一：（轻量组件）函数组件
function ComponentA(){
return <div>轻量组件A</div>
}
//渲染组件标签
ReactDOM.render(<ComponentA />,document.getElementById("app1"))
// 方式二：（复杂组件）类组件【ES6】
class ComponentB extends React.Component{
render(){
return <div>类组件B</div>;
}
}
ReactDOM.render(<ComponentB />,document.getElementById("app2")) </script> </body>
</html>
页面显示结果：
