react学习记录-helloworld

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_34378922

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量83

点赞数

文章标签： javascript 前端 ViewUI

原文链接：https://my.oschina.net/tbd/blog/617541

版权

为什么80%的码农都做不了架构师？>>>

react真是太火了，最近有朋友问我知道react吗，她们公司打算使用这个框架，我前年就听过，不过从没有去接触过，今天就去github看了下，。在没接触之前，我所听说的react是这样的：

虚拟dom的技术
可以绑出数据到页面
速度非常的快
facebook的项目

1.hello world

无环境不编程，下载reactjs，然后运行官网文档的demo使我们的第一部工作：

react说明文档地址：http://facebook.github.io/react/docs/getting-started.html

react下载地址： http://124.202.164.3/files/2107000007A1FCC2/facebook.github.io/react/downloads/react-0.14.7.zip

复制demo代码，根据说明react是可以工作在前端，我们直接打开页面预览：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

结果如下：

我们先不考虑react的处理，对于数据的绑定和显示，我们运用原生js其实可以实现同样效果：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello React!</title>
    <script src="build/react.js"></script>
    <script src="build/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  <body>
    <div id="example"></div>    
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
    <div id="example2"></div>
    <script type="text/javascript">
      var example2=document.getElementById("example2");
   var hello=document.createElement("h1");
   hello.innerHTML="你好";
   example2.appendChild(hello);
    </script>
  </body>
</html>

对比发现：