react页面级操作也是脚手架操作的基础原理

最新推荐文章于 2022-06-21 19:20:39 发布

苏先生前端

最新推荐文章于 2022-06-21 19:20:39 发布

阅读量176

点赞数

分类专栏： reactjs

本文链接：https://blog.csdn.net/qq_40819861/article/details/102588432

版权

reactjs 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="wrapper"></div>
    <!-- react核心库 与宿主环境无关 -->
    <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <!-- 依赖核心库 将核心库与页面结合 -->
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <!-- 引入babel工具进行转义 -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
        // React.createElement 核心库方法  该方法创建react对象 区别于document创建的dom对象
        var li =  React.createElement('li',{
            title:"wodenide"
        });
        //JS的扩展语法，需要使用babel进行转义。
        var li = <div className="wrapper0">你好祖国</div>
        //该方法将创建的react对象与页面建立联系进行渲染
        ReactDOM.render(li,document.getElementById('wrapper'));
    </script>
</body>
</html>

该方法中填写两个参数为显示内容以及容器

## React.createElement react核心库中提供

创建一个React元素，称作虚拟DOM，本质上是一个对象区别于document那个创建的dom对象

1. 参数1：元素类型，如果是字符串，一个普通的HTML元素

2. 参数2：元素的属性，以对象的形式传入

3. 后续参数：元素的子节点内层标签

## JSX

JS的扩展语法，需要使用babel进行转义。

苏先生前端

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react页面级操作也是脚手架操作的基础原理

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
复制链接

扫一扫