Hello world React

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这样的库结合得紧密一些，那将会更有市场。

Hello world React

相关文章