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>

 

posted on 2018-12-13 21:27  Netsharp  阅读(114)  评论(0)  编辑  收藏  举报

导航