zoukankan      html  css  js  c++  java
  • react-01

    比较了半天VUE、Angular、React,最终选择React,下面从几个例子开始React的学习,先从单个的index.html,引用react.js开始

    一.最简单的纯JS的代码

    <!DOCTYPE html>
    <html>
      <head>
        <title>react直接引用js</title>
        <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
          <script type="text/javascript">
            window.onload = function() {
              var h1 = React.createElement("h1", null, "hello REACT!");
              ReactDOM.render(h1, document.getElementById("root"));
            };
          </script>
    
      </body>
    </html>

    二、使用JSX的语法

    JSX是React提供的语法,React会把JSX编译成JS,这个编译器使用了一个组件babel

    <!DOCTYPE html>
    <html>
      <head>
        <title>react直接引用js</title>
        <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
          window.onload = function() {
            ReactDOM.render(
              <h1>Hello, REACT!</h1>,
              document.getElementById("root")
            );
          };
        </script>  
      </body>
    </html>

    三、通过组件的方式添加元素

    <!DOCTYPE html>
    <html>
      <head>
        <title>react直接引用js</title>
        <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
          class Welcome extends React.Component{
            render(){
              return <h1>Hello, REACT!</h1>
            }
          }
    
          window.onload = function() {
            ReactDOM.render(<Welcome />,
              document.getElementById("root")
            );
          };
        </script>
      </body>
    </html>

    四、给组件添加属性功能

    <!DOCTYPE html>
    <html>
      <head>
        <title>react直接引用js</title>
        <script src="https://cdn.staticfile.org/react/16.6.3/umd/react.production.min.js"></script>
        <script src="https://cdn.staticfile.org/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
        <!-- 生产环境中不建议使用 -->
        <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
      </head>
      <body>
        <div id="root"></div>
        <script type="text/babel">
          class Welcome extends React.Component{
            render(){
              return <h1>Hello, {this.props.name}!</h1>
            }
          }
    
          window.onload = function() {
            ReactDOM.render(<Welcome name='react16.3'/>,
              document.getElementById("root")
            );
          };
        </script>
      </body>
    </html>
  • 相关阅读:
    springcloud12-spring cloud stream
    Linux上安装gitbook并拉取git项目编译
    Python 之一条命令生成项目依赖包文件 requirements.txt
    python跨模块使用全局变量的实现方法
    微信朋友圈测试用例
    linux安装maven
    jenkins上集成sonar
    windows上安装sonar并使用其分析项目
    jquery 点击同级元素隐藏,再点击显示
    10进制转16进制自动补全8位 并高低位转换
  • 原文地址:https://www.cnblogs.com/Netsharp/p/10116541.html
Copyright © 2011-2022 走看看