加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

react学习记录-helloworld

发布时间:2020-12-15 04:40:10 所属栏目:百科 来源:网络整理
导读:react真是太火了,最近有朋友问我知道react吗,她们公司打算使用这个框架,我前年就听过,不过从没有去接触过,今天就去github看了下,。在没接触之前,我所听说的react是这样的: 虚拟dom的技术 可以绑出数据到页面 速度非常的快 facebook的项目 1.hello wo

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

  1. 虚拟dom的技术

  2. 可以绑出数据到页面

  3. 速度非常的快

  4. 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是可以工作在前端,我们直接打开页面预览:

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>HelloReact!</title>
<scriptsrc="build/react.js"></script>
<scriptsrc="build/react-dom.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Hello,world!</h1>,document.getElementById('example')
);
</script>
</body>
</html>

结果如下:

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

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8"/>
<title>HelloReact!</title>
<scriptsrc="build/react.js"></script>
<scriptsrc="build/react-dom.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
</head>
<body>
<divid="example"></div>
<scripttype="text/babel">
ReactDOM.render(
<h1>Hello,document.getElementById('example')
);
</script>
<divid="example2"></div>
<scripttype="text/javascript">
varexample2=document.getElementById("example2");
varhello=document.createElement("h1");
hello.innerHTML="你好";
example2.appendChild(hello);
</script>
</body>
</html>

对比发现:

react的写法会大大简化我们的书写量,删除原生js代码,我们去了解react的处理方式。

2.看完运行demo我认为的react

1.react可以做到mv**的处理方式,假如我们拿到ajax的数据,利用react的处理就可以显示到页面中

2.react和单纯书写js不一样,我们看这script标签的type定义:

其余的我还完全不知道,需要在继续学习的路上去摸索了。

3.其他了解

我下载了2个版本的react,发现了很大的区别,对于我们0.14.x引入的类库如下:

0.13.x使用的类库如下:

我查看了几个类库的用途,在这篇博客http://www.52php.cn/article/p-rkowmlmt-bnx.html了解到了0.14.x中类库的作用:

再看这个截图:

结合去看,向我们完美的解释了script类型设置和类库的作用。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读