全栈React: 第3天 我们的第一个组件

全栈React: 第3天 我们的第一个组件

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

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

让我们重温第一天介绍的Hello world应用。这次，略有不同：

  
  
  
  ``
  ``
  ``


  

  ``

加载React库

我们在包含了React的来源作为 `` ``

``

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

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

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

var mount = document.querySelector('#app');
ReactDOM.render(, mount);

请注意，我们可以使用App类来渲染我们的React应用，就像它是一个内置的DOM组件类型（像

和

标签一样）。这里我们使用它，就像它是一个带尖括号的元素：。

我们的React组件的行为就像我们页面上的任何其他元素一样，我们可以像构建一个本地浏览器树一样构建一个组件树。

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