中文官网地址:React 官方中文文档 – 用于构建用户界面的 JavaScript 库
第一步引入CND库
地址
https://unpkg.com/react@16.14.0/umd/react.development.js
https://unpkg.com/react-dom@16.14.0/umd/react-dom.development.js
https://unpkg.com/@babel/standalone@7.21.2/babel.min.js
第二步创建虚拟DOM并且渲染,注意script 使用text/babel将jsx转换为js
const VD = <div>hello react</div>
ReactDOM.render(VD,document.getElementById('hello'))
来一个class样式
className="title"
再来一个style样式
style={{color:"#fff"}}
完整html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.title{
background: red;
padding: 10px;
}
</style>
</head>
<body>
<div id="hello"></div>
<!-- 引入react库保证顺序 -->
<!-- 核心库 -->
<script type="text/javascript" src="./js/react.development.js"></script>
<!-- dom操作库 -->
<script type="text/javascript" src="./js/react-dom.development.js"> </script>
<!-- babel库将JSX/es6转化成ES5 -->
<script type="text/javascript" src="./js//babel.min.js"></script>
<script type="text/babel">
// 创建一个虚拟DOM并且只能有一个跟节点
const VD = <div style={{color:"#fff"}} className="title">hello react</div>
ReactDOM.render(VD,document.getElementById('hello'))
</script>
</body>
</html>
结果:
Jsx 语法知识点
定义虚拟DOM,不要写引号
样式类名className
内联style= {{key:value}}
虚拟DOM必须只能有一个根元素
标签必须闭合