DEV Community

loading...

RCT001 Hello world in react.js

declair profile image Jihao ・2 min read

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>
Enter fullscreen mode Exit fullscreen mode

其中,第一个是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>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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

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

定义标签属性

使用了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>
Enter fullscreen mode Exit fullscreen mode

更新渲染的元素

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>
Enter fullscreen mode Exit fullscreen mode

Discussion

pic
Editor guide