【React基础】jsx的基础使用

最新推荐文章于 2023-05-16 17:14:21 发布

Milk595

最新推荐文章于 2023-05-16 17:14:21 发布

阅读量109

点赞数

分类专栏： React 文章标签： react

本文链接：https://blog.csdn.net/weixin_43352901/article/details/107770932

版权

React 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1.注释

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
           
      <div id="demoReact">

      </div>
      <script type="text/babel">
          // 1.注释  {/*内容*/}
          let MyDom = <div>
                        {/*我是注释的内容*/}
                        hello
                      </div>

          ReactDOM.render(MyDom, document.getElementById('demoReact'))
      </script>

</body>

2.多行标签

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="node_modules/react/umd/react.development.js"></script>
  <script src="node_modules/react-dom/umd/react-dom.development.js"></script>
  <script src="node_modules/babel-standalone/babel.min.js"></script>
</head>
<body>
           
      <div id="demoReact">

      </div>
      <script type="text/babel">
          // 2.多行标签  必须有一个父元素包裹(外加括号更好一些)，不能同级别
          let MyDom = (<div>
                         <div>我是第一个内容</div>
                         <div>我是第二个内容</div>
                      </div>)

          ReactDOM.render(MyDom, document.getElementById('demoReact'))
      </script>

</body>

Milk595

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【React基础】jsx的基础使用

1.注释<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="node_modules/react/umd/react.development.js"></script> <sc
复制链接

扫一扫

专栏目录