react 基础篇 5 函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数式组件</title>
</head>
<body>
<div id="app1"></div>
<div id="app2"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom,用于支持react操作DOM -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel,用于将jsx转为js -->
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
function MyComponent1(){
console.log(this);
return <h2>我是用函数定义的组件(适用于【无状态组件】的定义)</h2>
}
ReactDOM.render(<MyComponent1 />,document.getElementById('app1'))
function MyComponent2({text= "佳佳"}){
return <h2>姓名:{text}</h2>
}
ReactDOM.render(<MyComponent2 text= "胡佳佳"/>,document.getElementById('app2'))
</script>
</body>
</html>