Hello world React

最新推荐文章于 2023-06-01 00:47:41 发布

zhenzigis

最新推荐文章于 2023-06-01 00:47:41 发布

阅读量312

点赞数

分类专栏： JavaScript 文章标签：框架 reactjs

本文链接：https://blog.csdn.net/zhenzigis/article/details/50517194

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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

zhenzigis

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Hello world React

reactjs,这里就不介绍了，如果你没听说过它，你就不会打开这篇博客，如果你打开这篇博客，说明你对它感兴趣，并且你还没有入门，你想知道它是怎么用的。
复制链接

扫一扫

专栏目录

Hello world React

“相关推荐”对你有帮助么？