react 基础 - 01 （快速入门：脚本引入、JSX语法）

最新推荐文章于 2023-06-28 00:18:49 发布

黑猫了个怪怪

最新推荐文章于 2023-06-28 00:18:49 发布

阅读量559

点赞数

文章标签： react.js javascript html

本文链接：https://blog.csdn.net/Janicecat/article/details/121938530

版权

1、脚本引入

1.1 建立挂载点 <div id="root"></div>

1.2 引入react相关库 <script src="......"></script>

1.3 脚本：

① 创建一个虚拟DOM对象：React.createElement(标签，属性，内容)

② 获取挂载对象

③ 页面渲染：ReactDOM.render(虚拟DOM对象，挂载对象)

<body>
    <!-- 挂载点，代表之后的内容插入到这里 -->
    <div id="root"></div>

    <!-- 引入react相关库 -->
    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>

    <!-- js脚本 -->
    <script>
      //1、创建一个虚拟DOM对象：React.createElement(标签，属性，内容) 
      const vNode = React.createElement(
        "div",
        { id: "mydiv", className: "cls" },
        "hello react"
      );

      //2、获取挂载对象
      const root = document.getElementById("root");

      //3、页面渲染：ReactDOM.render(虚拟DOM对象，挂载对象)
      ReactDOM.render(vNode, root);
    </script>
</body>

2、JSX语法

JSX 在javascript中写xml [可扩展的标记性语法]，类 html ，类HTML语法，不完全一样

2.1 需要先引入babel.min.js（babel：es6语法转es5语法使用）

2.2 script代码内容如果需要babel处理，需要加入type="text/babel"

<body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>
    <script type="text/babel">
      //1、创建对象：JSX语法，类HTML语法，不完全一样
      const vNode = (
        <div id="mydiv" className="cls">
          你好，react
        </div>
      );
       //2、渲染
      ReactDOM.render(vNode, document.getElementById("root"));
    </script>
</body>

黑猫了个怪怪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react 基础 - 01 （快速入门：脚本引入、JSX语法）

1、脚本引入1.1 建立挂载点 <div id="root"></div>1.2引入react相关库<script src="......"></script>1.3 脚本： ① 创建一个虚拟DOM对象：React.createElement(标签，属性，内容) ② 获取挂载对象 ③ 页面渲染：ReactDOM.render(虚拟DOM对象，挂载对象)<body>...
复制链接

扫一扫