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>

查看全文

相关阅读:
missing requires of libmysqlclient.so.18()(64bit)
Ambari安装HDP问题：User root is not allowed to impersonate anonymous.User: hcat is not allowed to impersonate ambari-qa
ambari2.6.50 openssl 版本问题：SSLError: Failed to connect. Please check openssl library versions. Openssl error upon host registration
HDP 2.6 requires libtirpc-devel
Kafka 如何读取offset topic内容 (__consumer_offsets)
Linux集群时间同步方法
 centos7 ambari2.6.1.5+hdp2.6.4.0 大数据集群安装部署
 Centos7.3离线(rpm方式)安装mysql服务
 ubuntu安装rpm的方法
 kerberos环境storm配置：Running Apache Storm Securely

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