React.js hello world

最新推荐文章于 2024-09-13 15:06:03 发布

Stangor

最新推荐文章于 2024-09-13 15:06:03 发布

阅读量3.2k

点赞数

分类专栏： react-js 文章标签： react-js

本文链接：https://blog.csdn.net/stanxl/article/details/78603928

版权

react-js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

React 官网上对它的介绍：A JavaScript library for building user interfaces

从图书馆借了一本《React 快速上手开发》–Stoyan Stefanov写的，很薄，不到200页，开始啃。从它官网的宣传语可以看出来，React应该侧重点在于构建用户界面，它通过组件的方式来构建，实际开发中应该是根据需要自定义组件，再将这些组件通过一定的方式进行组合，来满足项目需要。

写一个hello world，书上讲的是直接去下载react.js和react-dom.js这两个库，直接引用。但是到官网发现并没有找到直接去download的页面，而且这两个库的名字也变成了react.development.js 和 react-dom.development.js，看了一眼这个书也就是今年刚出的，所以不自觉的感叹前端变化真的很快。把两个库下载到local试试：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="react.development.js"></script>
    <script src="react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>hello world</h1>, //JSX格式
        document.getElementById("root")
      );

    </script>
  </body>
</html>

不出意外，hello world就出来了，但是当把render()方法里的h1改成下面这样时，就出错了：

    <script type="text/babel">
      ReactDOM.render(
        React.DOM.h1(null,"hello world"), // 纯JS语法
        document.getElementById("root")
      );

    </script>

结果h1就不会被识别了,想了想会不是babel的原因，把它改成下面这样：

    <script type="text/javascript">
      ReactDOM.render(
        React.DOM.h1(null,"hello world"),
        document.getElementById("root")
      );

    </script>

可以看到一些差别，后面深入后再来回头看。上面的代码中新的部分就是ReactDOM.render()。ReactDOM是一个对象，官网上是这样描述的：

If you load React from a script tag, these top-level APIs are
available on the ReactDOM global.

这个对象中包含了几个方法，render()就是其中一个。下面是它的Overview描述：

The react-dom package provides DOM-specific methods that can be used at the top level of your app and as an escape hatch to get outside of the React model if you need to. Most of your components should not need to use this module.

最后一句说大多数的组件都没有必要用这个模块。后面深入后再回头来看。

render() 官网上的描述：

ReactDOM.render(element, container[, callback])

Render a React element into the DOM in the supplied container and
return a reference to the component (or returns null for stateless components).
If the React element was previously rendered into container, this
will perform an update on it and only mutate the DOM as necessary to reflect the latest React element.
If the optional callback is provided, it will be executed after the
component is rendered or updated.

它把一个React element渲染到了dom中，如h1元素，返回组件的引用或者返回null,后者是一个无状态的组件，不明白无状态的组件是什么样子。第二点不太明白，第三点是说如果有回调方法的话，回调方法会在组件渲染或是更新完后再去执行。

PS：昨天用firefox一直有问题，今天再试一次，又好了：

上面的引入React.js的方式，也可以直接换成用CDN的方式：

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>