react demo2 (JSX入门)

最新推荐文章于 2022-01-16 23:54:04 发布

酷jjs

最新推荐文章于 2022-01-16 23:54:04 发布

阅读量404

点赞数

分类专栏：前端笔记 react 文章标签： react

本文链接：https://blog.csdn.net/qq_32584661/article/details/71250125

版权

前端笔记同时被 2 个专栏收录

165 篇文章 2 订阅

订阅专栏

react

19 篇文章 0 订阅

订阅专栏

react dome 2
JSX入门
需求：渲染一行标题，显示“Hello, world!”

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react dome</title>
    <script src="./build/react.js"></script>
    <script src="./build/react-dom.js"></script>
    <script src="./build/browser.min.js"></script>

</head>

<body>

<div id="container"></div>


<script type="text/babel">

   // 需求：JSX入门
   // 渲染一行标题，显示“Hello, world!”

   //1.JSX必须借助react环境运行

   /*
    2.JSX标签其实就是html标签，只不过我们在javascript中书写这些标签的时候，不用使用“”括起来，可以像xml一样书写
    ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('container')
    );

    */

   /*
   3.转换：JSX语法能够让我们更加直观的看到dom结构，不能直接在浏览器上运行，最终会转换成javascript代码
    var child1 = React.createElement('li', null, 'First Text Content');
    var child2 = React.createElement('li', null, 'Second Text Content');
    var child3 = React.createElement('li', null, 'Third Text Content');
    var root = React.createElement('ul', { className: 'my-list' }, [child1, child2, child3]);
    ReactDOM.render(
    root,
    document.getElementById('container')
    );
   */




  /*
   4.在 JSX 中使用 JavaScript 表达式。表达式写在花括号 {} 中
   var text = "啊哈哈";
   ReactDOM.render(
   <h1>{text}</h1>,
   document.getElementById('container')
   );


   */


</script>

</body>
</html>

酷jjs

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react demo2 (JSX入门)

JSX入门需求：渲染一行标题，显示“Hello, world!”<!doctype html><html lang="en"><head> <meta charset="UTF-8"> <title>react dome</title> <script src="./build/react.js"></script> <script src="./build
复制链接

扫一扫