react笔记之JSX 

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSX</title>
    <script src="script/react.development.js"></script>
    <script src="script/react-dom.development.js"></script>
<!-- 引入babel -->
    <script src="script/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
 
<!--设置js代码被babel处理-->
<script type="text/babel">
 
    // 创建一个React元素 <button>我是按钮</button>
    // 命令式编程
    // const button = React.createElement('button', {}, '我是按钮');
 
    // 声明式编程，结果导向的编程
    // 在React中可以通过JSX（JS扩展）来创建React元素，JSX需要被翻译为JS代码，才能被React执行
    // 要在React中使用JSX，必须引入babel来完成“翻译”工作
    // const button = <button>我是按钮</button>; // React.createElement('button', {}, '我是按钮');
 
    /*
    *   JSX就是React.createElement()的语法糖
    *       JSX在执行之前都会被babel转换为js代码
    * */
    const div = <div>
        我是一个div
        <button>我是按钮</button>
    </div>;
 
    const root = ReactDOM.createRoot(document.getElementById('root'));
    root.render(div);
 
</script>
</body>
</html>

posted @   前端导师歌谣  阅读(23)  评论(0)  编辑  收藏  举报
相关博文：
·  react笔记之JSX的注意事项
·  react笔记之JSX的注意事项
·  JSX基本语法
·  react 也就这么回事 03 —— JSX 的注意点
·  JSX是一种JavaScript的语法扩展
阅读排行：
· 25岁的心里话
· 闲置电脑爆改个人服务器（超详细） #公网映射 #Vmware虚拟网络编辑器
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· 零经验选手，Compose 一天开发一款小游戏！
· 一起来玩mcp_server_sqlite，让AI帮你做增删改查！！
点击右上角即可分享
微信分享提示