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>

查看全文

相关阅读:
ES7 cat API的小结
 zabbix5.0 使用elasticsearch7.6按日期索引存储历史数据
 Archlinux爬坑指南
 ArchLinux安装常用软件QQ、TIM、微信等常用软件(三)
ArcnLinux安装KDE桌面环境（二）
ArchLinux安装步骤（一）
DDD领域驱动及落地方案
 Text Classification with Keras
Mattermost Server安装及配置AD/LADP
使用队列问题

原文地址：https://www.cnblogs.com/Netsharp/p/10116541.html