React.js hello world

程序员文章站 2022-07-05 15:59:24

...

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/aaa@qq.com/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>

React.js hello world

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

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

    </script>

React.js hello world

可以看到一些差别，后面深入后再来回头看。上面的代码中新的部分就是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,后者是一个无状态的组件，不明白无状态的组件是什么样子。第二点不太明白，第三点是说如果有回调方法的话，回调方法会在组件渲染或是更新完后再去执行。

React.js hello world

PS：昨天用firefox一直有问题，今天再试一次，又好了：
React.js hello world

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

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

未明白问题：

无状态组件是什么意思？
返回一个引用是什么意思？
React element 已经被渲染过，之后会怎么样？
回调函数又是怎么回事？
纯JS语法的code为什么就报错，而改成JSX格式就没问题了，是因为版本问题吗？

一个hello world就引出蛮多问题，太需要学习了！

React.js hello world

springMVC_02hello案例

blender中怎么添加天空环境贴图world贴图?

JS中‘hello’与new String(‘hello’)引出的问题详解

在CorelDRAW中绘制一个可爱的hello kitty猫

【PyQt5】（01）Hello，PyQt5！

eclipse rcp详解Hello World以及eclipse rcp和osgi的简单展示(图文)

联想发大招 Tech World多款黑科技产品亮相

Spring hello world

Surface Pro 4怎么使用Windows Hello脸部识别解锁？

国行版Surface Pro 4找不到Windows Hello怎么办?