react学习记录-helloworld

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

<!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.jb51.cc/article/p-rkowmlmt-bnx.html了解到了0.14.x中类库的作用：

再看这个截图：

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

原文链接：https://www.f2er.com/react/307195.html

react学习记录-helloworld

猜你在找的React相关文章