浅谈React的妙处
大家好,这一期呢,我们说一下react。我们首先看它有哪些好处,然后看一下如何快速的在几分钟内写一个使用react的网页。
故事要从jQuery特别流行的那个时代开始, 我们先中规中矩的说一下react的好处。
第1条,以组件为核心的理念是未来网络程序开发的关键。React就是以组件为单位的。
第2条, react.js非常高效。以这么小的体积可以做很多事情,这一点是非常了不起的。
第3条,对搜索引擎的优化支持做得非常棒。
第4条,它使得JavaScript写起来更容易。
它的核心文件是一种叫做jsx的文件格式,它可以把html跟JavaScript合在一起写。
第5条,开发工具的多样性。你可以随意选择自己喜欢的开发工具。
第6条,脸书是这个项目的庄家,是最坚强的后盾。
好,接下来我们就用reactjs写一个网页。
前往如下地址:
https://shripadk.github.io/react/downloads.html
点击下载按钮, 解开下载的文件你会看到如下内容:
打开build文件夹:
拷贝上面这几个文件到你自己的工程文件夹里面。
然后在你的工程目录下创建一个html文件。
你可以选择自己喜欢的编辑工具,我这里用的是Visual Studio Code.
首先我们要添加reactjs,这个是必须的,因为我们今天就要用到react.
<scriptsrc="react/react.min.js"></script>
<scriptsrc="react/JSXTransformer.js"></script>
接下来我们要添加jsx内容,记住,这是react给开发者提供的福利。
<!DOCTYPE html>
<html>
<head>
<script src="react/react.min.js"></script>
<script src="react/JSXTransformer.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/jsx">
/** @jsx React.DOM */
React.renderComponent(
<h1>Hello, 丁哥开讲!</h1>,
document.getElementById('hello')
);
</script>
</body>
</html>
显示效果:
上面只是我个人对这个话题的一点心得体会,分享给大家,希望与大家讨论,共同提高,欢迎拍砖。