reactjs,这里就不介绍了,如果你没听说过它,你就不会打开这篇博客,如果你打开这篇博客,说明你对它感兴趣,并且你还没有入门,你想知道它是怎么用的。
先把hello world跑起来,有个直观感受,任何新框架都是从这样的例子里跑出来的。
首先下载框架,新建一个目录,准备好脚本文件,新建一个index.html,加入内容:
<!DOCTYPE html>
<html>
<head>
<Meta charset="UTF-8" />
<title>Hello React!</title>
<script src="react.min.js"></script>
<script src="react-dom.min.js"></script>
<script src="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>
好的,双击它,在chrome里运行。
就这么简单!
再来看代码,首先引入了相关的脚本,然后嵌入了一段代码,注意script type=”text/babel”,不再是我们常见的text/javascript了。这就是react新的语言JSX,但是浏览器支持这种语言吗?答案是:不支持。但我们的确是运行成功了,也没报错,怎么回事?
实际上是我们引用的react脚本对JSX进行了翻译,转成了javascript运行的。想想,这不是绿枝搔痒-多一道么?经过一次翻译再运行,性能上不就差了么?的确这样,翻译是比较耗性能的,但是有解决办法,一般这种翻译可以在服务端做好。
好吧,难道增加了,要考虑怎么在服务端翻译它!
react的优点是虚拟DOM,提高DOM操作的性能,它是纯JS的东西,所以算不上框架,可以认为是jquery的升级版吧。
最重要的是react对模块化支持的很好。又是模块化!不错,这是前端的发展趋势。
上面的代码并不好,首先脚本没有放到底部去,其次内嵌脚本的方式不够好,我们可以把脚本独立到文件中去:
<script type="text/babel" src="src/helloworld.js"></script>
可是这么做了,浏览器未必买帐,因为它根本不识别type=”text/babel”,甚至不会去加载它。这里后你需要把代码部署到服务器里了,无论是tomcat还是nodejs,或apache,Nginx随你喜欢好了。
看看怎么做离线转换。
首先在node中安装插件。
npm install --global babel-cli
npm install babel-preset-react
然后执行命令:
babel --presets react src --watch --out-dir build
此处假设helloword.js在src目录下,就生成了build/helloworld.js文件,接下来修改index.html:
<script src="build/helloworld.js"></script>
运行效果是一样的,我们看下编译后的hellowrld.js是什么样的:
ReactDOM.render(React.createElement(
'h1',null,'Hello,world!'
),document.getElementById('example'));
实际上仍是调用react封装的方法,这样才能提供兼容性的代码,并且利用react的虚拟DOM。当然,编译后的代码并没有压缩处理,我们仍需要配合一些构建工具来压缩合并代码,以提升性能。
这个例子虽然简单,不过react的特点已经显露出来,它是纯js的东西,不像angular框架那么复杂,学习成本较低,主要是用来提升性能,至于模块化,组件化,还是得你自己来做。
如果angular和react,jquery这样的库结合得紧密一些,那将会更有市场。