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>
方法)
