1.函数式组件
最简单的定义组件的方法是写一个 JavaScript 函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content="width=device-width, initial-scale=1.0">
<title>1_函数式组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id = "test"></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">
// 1.创建函数式组件 ; 函数定义首字母必须大写
function MyComponent(){
console.log(this) // 此处的this是undefined,因为babel编译后开启了严格模式
return <h2>我是用函数定义的组件(适用于简单组件的定义)</h2>
}
// 2.渲染组件到页面
ReactDOM.render(<MyComponent/>,document.getElementById('test'))
/*
执行了ReactDOM.render(<MyComponent/> ...) 之后发生了什么?