hello react
geekymv 发表于：2024-08-09 11:39:17 阅读数：212
通过 JSX 创建虚拟DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>hello react</title>
</head>
<body>
<div id="test"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 引入 babel, 用于将 jsx 转为 js -->
<!-- Don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- 此处一定要写 babel -->
<script type="text/babel">
<!-- 创建虚拟DOM -->
const VDOM = <h1>hello react</h1>
/* 渲染虚拟 DOM 页面 */
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
通过 JS 创建虚拟DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>hello react</title>
</head>
<body>
<div id="test"></div>
<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
<!-- 使用 js 创建虚拟DOM -->
<script type="text/javascript">
<!-- 创建虚拟DOM -->
const VDOM = React.createElement('h1', {id:'title'}, 'hello react')
/* 渲染虚拟 DOM 页面 */
ReactDOM.render(VDOM, document.getElementById('test'))
</script>
</body>
</html>
jsx 语法规则：
- 定义虚拟DOM，不要写引号；
- 标签中混入js表达式时要使用{}；
- 样式的类名指定不要用class，要用className；
- 内联样式，要使用style={{key:value}} 的形式去写；
- 只有一个根标签；
- 标签必须闭合；
- 标签有首字母
- 若小写字母开头，则将该标签转为html中同名元素，若html中无该标签则报错；
- 若大写字母开头，react就去渲染对应的组件，若组件没有定义则报错。
