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>

查看全文

相关阅读:
asp.net的decimal保留两位小数
 由于管理员设置的策略，该磁盘处于脱机状态-Win 2008 R2
论大公司的通病和缺点
 sql server删除数据后空间无变化处理方法
 sql server压缩数据库和日志文件
 SQL千万级数据设计和优化
 SQL Server索引怎么用
 在电脑上测试手机网站
 asp.net实现GZip压缩和GZip解压
 WebService教程和分析

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