函数式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Demo</title>
<!-- 引入React -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!-- 引入ReactDOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
///1、函数式组件
function Demo() {
return <h2>我是哈哈哈 适用于【简单组件】</h2>
}
// 2、渲染
ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>
</body>
</html>
类式组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React Demo</title>
<!-- 引入React -->
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<!-- 引入ReactDOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<!-- 引入Babel用于转换JSX（如果你不是通过构建工具如Webpack来转换的话） -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
// 1、创建类式组件
class MyDemo extends React.Component {
//render是放在哪里的?- MyComponent的原型对象上，供实例使用。
//render中的this是谁?- MyComponent的实例对象<=>MyComponent组件实例对象。
render() {
return <h2>我是嘻嘻，适用于【复杂组件】</h2>
}
}
///2、渲染
ReactDOM.render(<MyDemo/>,document.getElementById('test'))
/*
执行了ReactDoM.render(<Mycomponent/>.......之后，发生了什么?
1.React解析组件标签，找到了MyComponent组件。
2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
*/
</script>
</body>
</html>
效果图
![[Java安全入门]三.CC1链](https://img-blog.csdnimg.cn/direct/b4108b1b0dbd4426ac10d49274c8696e.png)