React入门第一个程序及使用JS和JSX的区别

最新推荐文章于 2024-04-30 08:47:16 发布

06便士

最新推荐文章于 2024-04-30 08:47:16 发布

阅读量1.4k

点赞数 1

分类专栏： React初学入门第一个React程序文章标签： javascript react.js 前端 jsx

本文链接：https://blog.csdn.net/Giraffe0615/article/details/121204721

版权

React初学入门同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

第一个React程序

1 篇文章 0 订阅

订阅专栏

JS和JSX都能用来写React

但是JSX相对来说会简便些，语法规则只是在JS的基础上多了一点点，还是比较推荐使用JSX，以下用代码举例二者区别。

使用JSX创建React：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- 移动端适配 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello_react</title>
</head>
<body>
  <!-- 准备容器 -->
    <div id="test"></div>
    <!-- 按序引入 -->
    <!-- 引入核心库 -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <!-- 引入react-dom来支持react操作DOM -->
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
  <!-- 引入babel,将jsx转化为js -->
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

  <script type="text/babel">  /* babel不写默认为JS */
  // 1.创建虚拟DOM
  const VDOM = <h1>hello,react</h1>
  // 2.渲染虚拟DOM到页面
  ReactDOM.render(VDOM,document.getElementById('test'))/* (虚拟DOM，容器) */
  </script>
</body>
</html>

使用JSX创建React注意事项：

1.准备容器id一定要写

2.按序引入(先引入核心库然后是react-dom）

3.test/babel

4.ReactDOM区分大小写

使用JS创建React：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <!-- 移动端适配 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>使用JS创建虚拟DOM</title>
  </head>
  <body>
    <!-- 准备容器 -->
    <div id="test"></div>
    <!-- 按序引入 -->
    <!-- 引入核心库 -->
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin
    ></script>
    <!-- 引入react-dom来支持react操作DOM -->
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin
    ></script>
    <!-- 引入babel,将jsx转化为js
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> -->

    <script type="text/javascript">
      /* babel不写默认为JS */
      // 1.创建虚拟DOM          /* 注意id 后面是: */
      const VDOM = React.createElement('h1',{id:'tittle'}, React.createElement('span',{},'hello,react'))
      // 2.渲染虚拟DOM到页面
      ReactDOM.render(VDOM,document.getElementById('test'))/* (虚拟DOM，容器) */
    </script>
  </body>
</html>

可以看到虽然JS也可以在React中使用，但是在需要多级嵌套的时候，所写的代码量是逐级增多的，相较而言使用JSX代码量更为精简，也更容易上手。

06便士

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
React入门第一个程序及使用JS和JSX的区别

两种都能成功的运用，但是JSX相对来说会简便些，语法规则只是在JS的基础上多了一点点，还是比较推荐使用JSX，以下用代码举例二者区别。使用JSX创建React：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 移动端适配 --
复制链接

扫一扫

专栏目录