RCT001 Hello world in react.js

react.js的Hello World。

我的笔记里对react.js的学习包含了以下8个内容：

1. import react.js (This note)
2. JSX (This note)
3. 渲染 (This note)
4. Components and props
5. react 生命周期
6. 事件处理
7. 条件渲染 if-else
8. 列表渲染 for loop

react的基本语法

• ReactDOM.render() 渲染元素
• React.createElement() 创建元素
• React.Compoment() 创建组件

在项目中引入react.js

使用CDN来引入react

直接在html页面里通过<script>标签引入：

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- 生产环境中不建议使用 -->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

其中，第一个是react.js的核心库，第二个是react操作DOM的库，第三个是Babel，用于解析 ES6 的语法。同时，Babel 内嵌了对 JSX 的支持。

使用npm来引入react

与第一种方法类似，只是script里面的src内容换成npm下载下来的本地文件。

react 的 Hello World

react原始语法

react使用render()方法将元素渲染到html中的一个div中：

<!-- We will put our React component inside this div. -->
<div id="react_container"></div>

<script>
  var hello = React.createElement('h3', {}, "Hello, react world!");
  ReactDOM.render(
    hello,
    document.getElementById('react_container')
  );
</script>

React.createElement()的第一个参数是标签名，第二个参数是标签属性，第三个参数是标签里面的内容。

以上是react最原始的语法，现在很少使用了。以后的代码都使用 JSX，即在js中嵌套html，html中也嵌套js。

使用 JSX

上述的代码可以改成这样：

<!-- We will put our React component inside this div. -->
<div id="react_container"></div>

<script type="text/babel">
  ReactDOM.render(
    <h3>Hello, react world!</h3>,
    document.getElementById('react_container')
  );
</script>

注意：使用了babel编译了JSX，<script>标签里面需要加入type="text/babel"。

当然，以上的例子很简单，我们定义的<h3>标签里面还可以有class，name等属性。

定义标签属性

使用了JSX后，定义标签属性就很直接了，只需要注意以下几点：

• class属性写成className
• tabindex属性写成tabIndex

JSX 语法上更接近 JavaScript 而不是 HTML，所以 React DOM 使用 camelCase（小驼峰命名）来定义属性的名称，而不使用 HTML 属性名称的命名约定。

<!-- We will put our React component inside this div. -->
<div id="react_container"></div>

<script type="text/babel">
  ReactDOM.render(
    <h3 className='hello' name='hello-h3'>Hello, react world!</h3>,
    document.getElementById('react_container')
  );
</script>

更新渲染的元素

React 元素是不可变对象。一旦被创建，就无法更改它的子元素或者属性。一个元素就像电影的单帧：它代表了某个特定时刻的 UI。

根据我们已有的知识，更新 UI 唯一的方式是创建一个全新的元素，并将其传入 ReactDOM.render()。

但是，React 只更新它需要更新的部分，React DOM 会将元素和它的子元素与它们之前的状态进行比较，并只会进行必要的更新来使 DOM 达到预期的状态。

结合下面这个例子，我们首先渲染了一个<div>以及内部的两个<h3>，然后2s后再一次调用render()方法，修改了第二个<h3>里面的内容，但是第二次渲染只会修改更新的部分：

<script type="text/babel">
  ReactDOM.render(
    <div>
      <h3 className='hello' name='hello-h3'>Hello, react world!</h3>
      <h3 className='hello'>This is a mseeage.</h3>
    </div>,
    document.getElementById('react_container')
  );

  function change() {
    ReactDOM.render(
    <div>
      <h3 className='hello' name='hello-h3'>Hello, react world!</h3>
      <h3 className='hello'>The message will change.</h3>
    </div>,
    document.getElementById('react_container')
  );
  }
  setTimeout("change()", 3000); // re-render after 3 seconds
</script>