jsx小练习

Tutorial: React基础 Category: React Published: 2026-04-07 13:58:26 Views: 20 Likes: 0 Comments: 0

05_jsx 小练习

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>jsx小练习</title>
  </head>

  <body>
    <!-- 准备好一个"容器" -->
    <div id="test"></div>

    <!-- 引入react核心库 -->
    <script type="text/javascript" src="./js/react.development.js"></script>

    <!-- 引入react-dom, 用于支持react操作DOM -->
    <script
      type="text/javascript"
      src="./js/react-dom.development.js"
    ></script>

    <!-- 引入babel, 用于将jsx转为js -->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">
      /* 
		一定注意区分：【js语句(代码)】与【js表达式】
		1.表达式：一个表达式会产生一个值, 可以放在任何一个需要值的地方
		下面这些都是表达式：
			(1). a
			(2). a+b
			(3). demo(1)
			(4). arr.map() 
			(5). function test () {}
		2.语句(代码)：
		下面这些都是语句(代码)：
			(1).if(){}
			(2).for(){}
			(3).switch(){case:xxxx}
	  */

      // 模拟一些数据
      const data = ["Angular", "React", "Vue"];

      // 1.创建虚拟DOM
      const VDOM = (
        <div>
          <h1>前端js框架列表</h1>
          <ul>
            {data.map((item, index) => {
              return <li key={index}>{item}</li>;
            })}
          </ul>
        </div>
      );

      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM, document.getElementById("test"));
    </script>
  </body>
</html>
Prev: jsx语法规则 Next: 函数式组件