定义
-
全称 JavaScript XML,是一种嵌入式的类似XML的语法扩展
XML是用于储存和传输数据,例如微信登录 现在普遍使用JSON储存和传输
React为什么要使用JSX
- jsx是js创建虚拟dom的语法糖,提高开发效率
<body>
<div id="root"></div>
<!-- 引入react的核心库 -->
<script
crossorigin
src="https://unpkg.com/react@18.2/umd/react.development.js"
></script>
<!-- 引入react-dom用于支持react操作dom -->
<script
crossorigin
src="https://unpkg.com/react-dom@18.2/umd/react-dom.development.js"
></script>
<!-- 引入babel转换jsx为js -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<!-- jsx 写法 -->
<script type="text/babel">
// 原生 js 写法
// 1.创建虚拟dom 原生 js 写法
// const vdom = React.createElement("div", {id:'lqy'}, "hello react")
// 多层嵌套,原生 js 写法就不靠谱了
// const vdom = React.createElement("div", {id:'lqy'}, React.createElement("h1",{},"hello react"))
// jsx 写法
// 1.创建虚拟dom
// const vdom = <div id="lqy"> hello react </div>;
// 多层嵌套, jsx 写法很直观
const vdom = <div id="lqy"> <h1>hello react</h1> </div>;
// 打印查看 dom 内容
const TDOM = document.getElementById('root')
console.log("虚拟 dom vdom->",vdom);
console.log("真实 dom TDOM->",TDOM);
// 2.找到容器,将虚拟dom渲染到页面中
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(vdom);
</script>
</body>