本文介绍了如何在网页中引入React库，通过CND链接加载react.development.js和react-dom.development.js。然后展示了使用jsx创建虚拟DOM，包括设置class样式和内联style，并利用ReactDOM.render进行渲染。同时强调了jsx语法中的关键点，如虚拟DOM的单根元素规则和属性的写法。
中文官网地址：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必须只能有一个根元素
标签必须闭合
扫一扫
369
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
