【全栈React】第3天: 咱们的第一个组件

时间 2019-11-05

原文原文链接

本文转载自：众成翻译
译者：iOSDevLog
连接：http://www.zcfy.cc/article/3799
原文：https://www.fullstackreact.com/30-days-of-react/day-3/html

这个系列的前两篇文章是很重要的讨论。在今天的课程中，咱们来看看一些代码，并写下咱们的第一个React应用。react

让咱们重温第一天介绍的Hello world应用。此次，略有不一样：ajax

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">``</script>
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
  ``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">`` </script>
</head>
<body>
  <div id="app"></div>
  ``<script type="text/babel">``
    var app = <h1>Hello world</h1>
    var mountComponent = document.querySelector('#app');
    ReactDOM.render(app, mountComponent);
  </script>
</body>
</html>

加载React库

咱们在包含了React的来源做为<script>`标签在`<head>元素里面。在咱们开始编写咱们的React应用以前放置咱们的<script>加载标签很重要，以便咱们使用ReactReactDOM。npm

head还有一个script标签包括在一个babel-core库。可是什么babel-core？浏览器

Babel

昨天咱们谈了ES5和ES6。咱们提到对ES6的支持仍然不稳定。为了使用ES6，最好是将ES6 JavaScript转换为ES5 JavaScript。服务器

Babel是一个将ES6转换到ES5的库。babel

在body里面咱们有一个script。在script里咱们定义了咱们的第一个React应用。请注意，script标签具备type的text/babel：app

<script type="text/babel">`

这告诉Babel，咱们但愿它处理这个script主体内的JavaScript的执行。咱们可使用ES6 JavaScript编写咱们的React应用，并确保Babel将在仅支持ES5的浏览器中处理它的执行。dom

React应用

在Babel script中，咱们定义了咱们的第一个React应用。咱们的应用由一个单一的元素组成<h1>Hello world</h1>。调用ReactDOM.render()实际上将咱们的袖珍React应用放置在页面上。若是不调用ReactDOM.render()，DOM中不会呈现任何内容。ReactDOM.render()的第一个参数是呈现 _什么_，第二个是 _哪里_：函数

ReactDOM.render(<what>, <where>)`

咱们写了一个React应用。咱们的“app”是一个表明一个h1 标签的React元素。但这不是颇有趣。富Web应用接受用户输入，根据用户交互更改其形状，并与Web服务器通讯。让咱们经过构建咱们的第一个React组件来开始接触这个力量。

组件和更多

咱们在本系列的开头提到，全部React应用的核心是_组件_。理解React组件的最好方法是编写它们。咱们将把React组件写成ES6类。

Let's look at a component we'll call App. Like all other React components, this ES6 class will extend the React.Component class from the React package:
让咱们来看一个咱们要调用的组件App。像全部其余React组件同样，这个ES6类将扩展（继承）React包中的React.Component 类：

class App extends React.Component {
  render() {
    return <h1>Hello from our app</h1>
  }
}

全部React组件至少须要一个render() 函数。此render() 函数应返回浏览器DOM元素的虚拟DOM表示形式。

有多种方法来编写React组件。在本系列中，咱们将介绍几种编写方法。咱们将使用的最多见的形式是上面使用的ES6类表示。

另外一种编写咱们的App 组件的方式是使用该React.createClass()函数。
var App = React.createClass({
  render: function() {
    return <h1>Hello from our app</h1>
  }
});
到目前为止，社区一直采用ES6类声明。可是这两种方法都产生具备相同特性的React组件。

在咱们的index.html，咱们用以前的新App 组件替换咱们的JavaScript。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello world</title>
  <!-- Script tags including React -->
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js">``</script>
  ``<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js">``</script>
  ``<script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js">``</script>
</head>
<body>
  <div id="app"></div>
  ``<script type="text/babel">``
    class App extends React.Component {
      render() {
        return <h1>Hello from our app</h1>
      }
    }
  </script>
</body>
</html>

然而，什么都不会在屏幕上呈现。你还记得为何吗？

咱们没有告诉React咱们要在屏幕上渲染任何东西，或者在什么地方渲染它。咱们须要再次使用ReactDOM.render() 函数来表达React咱们想要呈现的内容和位置。

添加ReactDOM.render() 函数将在屏幕上呈现咱们的应用：

var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);

请注意，咱们可使用App类来渲染咱们的React应用，就像它是一个内置的DOM组件类型（像<h1 />和<div />标签同样）。这里咱们使用它，就像它是一个带尖括号的元素：<App />。

咱们的React组件的行为就像咱们页面上的任何其余元素同样，咱们能够像构建一个本地浏览器树同样构建一个组件树。

虽然咱们如今渲染一个React组件，咱们的应用仍然缺少丰富性或交互性。很快，咱们将看到如何使React组件数据驱动和动态。但首先，在本系列的下一期中，咱们将探讨如何对图层组件进行分层。嵌套组件是丰富的React Web应用的基础。