zoukankan      html  css  js  c++  java
  • Hello React!

    Hello React!

    首先引入了三个库: react.development.min.js 、react-dom.development.min.js 和 babel.min.js:

    • react.min.js - React 的核心库
    • react-dom.min.js - 提供与 DOM 相关的功能
    • babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码,这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包(package)一同使用可以让源码的语法渲染上升到一个全新的水平。

    声明一个虚拟DOM,使用ReactDOM.render()函数将它渲染到对应的容器中。

    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    </head>
    
    <body>
        <div id="example"></div>
        <script type="text/babel">
            const VDOM = <h1>Hello, world!</h1>// 此处不需要写引号
            const container = document.getElementById('example')
            ReactDOM.render(
                VDOM,
                container
            );
        </script>
    
    </body>
    
    </html>
    
  • 相关阅读:
    最小花费
    LOJ10090
    LOJ2436
    loj10087
    LOJ2632
    LOJ10021 Addition Chains
    LOJ10019生日蛋糕
    loj10018数的划分
    LOJ10015扩散
    loj10014数列分段二
  • 原文地址:https://www.cnblogs.com/pangqianjin/p/14700126.html
Copyright © 2011-2022 走看看