react学习记录-helloworld
react真是太火了,最近有朋友问我知道react吗,她们公司打算使用这个框架,我前年就听过,不过从没有去接触过,今天就去github看了下,。在没接触之前,我所听说的react是这样的:
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类型设置和类库的作用。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- cocos2d-x3.2中error C2440: “类型转换”: 无法从“void (
- 基于PostgreSQL中的时间戳的移动平均线
- TMS320F28335学习笔记-启动过程
- storyboard tableview section
- 多项式的储存与运算c++
- 正则表达式匹配日期时间
- 正则表达式 – 如何实现最大 – 蒙克?
- HightLight / ScrollTo – ListView,React-Native上的Scrol
- HttpRequest.ServerVariables vs HttpRequest.UserAgent Pr
- oracle RAC LOG_ARCHIVE_DEST_1 与 LOG_ARCHIVE_DEST 冲突解