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>

相关阅读:
使用Angular2建立项目
 你不知道的JavaScript-0
项目从0到1
登录页跳转时保存用户信息-遇坑记
 robotframework-ride快捷方式打不开
 win10 python3.8 wxpython.whl 安装步骤
 QPS
xmind 文件打开后会在当前目录生成 configuration,p2和workspace目录，artifacts.xml文件解决
 JMeter进行压力测试时查看服务器的资源使用
 JMeter和JMeterPlugin的下载安装
原文地址：https://www.cnblogs.com/Netsharp/p/10116541.html