01 入门案例
1、引入react的依赖：<script src="./static/react18.3.1/react.development.js"></script>
2、引入react-dom的依赖：<script src="./static/react18.3.1/react-dom.development.js"></script>
3、使用函数声明一个React的组件
function LikeButton(){
return React.createElement("button", {
onClick: () => {console.log("Like button is clicked")}
}, "Clike Me")
}
渲染组件：
- 创建根节点：
const rootNode = document.getElementById("root") - 创建根节点渲染对象：
const root = ReactDOM.createRoot(rootNode); - 使用根节点渲染对象渲染组件：
root.render(React.createElement(LikeButton))
const rootNode = document.getElementById("root")
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton))
完整代码：
<!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>
</head>
<body>
<!-- 创建根节点 -->
<div id="root"></div>
<!-- 引入React18的依赖 -->
<script src="./static/react18.3.1/react.development.js"></script>
<script src="./static/react18.3.1/react-dom.development.js"></script>
<!-- 核心代码 -->
<script>
// 创建一个组件
function LikeButton(){
return React.createElement("button", {
onClick: () => {console.log("Like button is clicked")}
}, "Clike Me")
}
// 渲染组件
const rootNode = document.getElementById("root")
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton))
</script>
</body>
</html>
02JSX案例
要使用JSX，必须要满足：
- 1、引入babel依赖：
<script src="./static/react18.3.1/babel.min.js"></script> - 2、声明script的类型为babel类型：
<script type="text/babel">
JSX支持像写HTML一样写JavaScript，是一种JavaScript+HTML混合编程的形式。
示例代码：
function LikeButton() {
return (
<button onClick={() => { console.log('button clicked')}}>
Click Me
</button>
)
}
完整代码：
<!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>
</head>
<body>
<!-- 创建根节点 -->
<div id="root"></div>
<!-- 引入React18的依赖 -->
<script src="./static/react18.3.1/react.min.js"></script>
<script src="./static/react18.3.1/react-dom.min.js"></script>
<script src="./static/react18.3.1/babel.min.js"></script>
<!-- 核心代码 -->
<script type="text/babel">
// 创建一个组件
// 使用JSX语法改写
function LikeButton() {
return (
<button onClick={() => { console.log('button clicked')}}>
Click Me
</button>
)
}
// 渲染组件
const rootNode = document.getElementById("root")
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton))
</script>
</body>
</html>