react page-level operation is the basis of the principles of operation of scaffolding

<!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>

The two process parameters of the display content to fill the container, and

 

## React.createElement react core library provided

React to create an element , called a virtual DOM, is essentially an object different from the document that created the object dom

1 1. Parameters: element type, if the string is, an ordinary HTML element

2. Parameter 2: attribute element in the form of an object passing

3. Follow-up parameters: children of the element inner label

## JSX

JS's extended syntax, you need babel escaped.

 

Published 56 original articles · won praise 1 · views 1199

Guess you like

Origin blog.csdn.net/qq_40819861/article/details/102588432