本文转载自：众成翻译
译者：iOSDevLog
链接：http://www.zcfy.cc/article/3817
原文：https://www.fullstackreact.com/30-days-of-react/day-4/
太棒了，我们已构建了第一个组件。如今让我们来看一下，最先构建一个更庞杂的界面。
React 30天 前一章节，我们最先构建我们的第一个 React 组件。在本节中，我们将继承运用我们的App 组件，并最先构建一个更庞杂的UI。
我们能够会看到一个罕见的网页元素是用户时候轴。比方，我们能够会有一个运用显现事宜发作的汗青，如Facebook和Twitter等运用。
我们_能够_在单个组件中构建全部UI。然则，在单个组件中构建全部运用不是一个好主意，由于它能够非常大，庞杂且难以测试。
class Timeline extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<div className="header">
<div className="menuIcon">
<div className="dashTop"></div>
<div className="dashBottom"></div>
<div className="circle"></div>
</div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
<div className="content">
<div className="line"></div>
<div className="item">
<div className="avatar">
<img
alt='doug'
src="http://p0.qhimg.com/t01e9226cd16ce24fb4.jpg" />
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
</div>
<div className="item">
<div className="avatar">
<img
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
</div>
<span className="time">10 am</span>
<p>Read Day two article</p>
</div>
<div className="item">
<div className="avatar">
<img
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
</div>
<span className="time">10 am</span>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div className="item">
<div className="avatar">
<img
alt='doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
</div>
<span className="time">2:21 pm</span>
<p>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
</div>
</div>
</div>
</div>
)
}
}
拆分一下
比将其构建在单个组件中更好的做法是，我们将其分解成多个组件。
看这个组件，全部大组件有两个自力的部份：
- 题目栏
- 内容
我们能够将组件的内容部份分别红一般的关注点。内容部份内有3个差别的_项目_组件。
假如我们想进一步，我们以至能够将题目栏分解成3个组件，_菜单_按钮，_题目_和_搜刮_图标。假如我们须要，我们能够进一步深切每一个。
决议分别组件的深度比科学更显得艺术。
在任何情况下，在运用中最先寻觅运用的_组件_主意通常是一个好主意。经由过程将我们的运用分解成组件，变得更轻易测试，更轻易跟踪哪些功用在那里。
容器组件
要构建我们的关照运用，让我们最先构建容器来保留全部运用。我们的容器只是别的两个组件的包装器。
这些组件都不须要特别的功用，它们看起来类似于我们的 HelloWorld 组件，由于它只是一个具有单个衬着功用的组件。
我们来构建一个我们将要挪用的_包装器_组件 App ，它们能够类似于：
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
{/* content goes here */}
</div>
</div>
)
}
}
请注重，我们运用 React 中挪用的属性
className，而不是 HTML 版本class。请记着，我们不是直接写DOM，因而不会写HTML，而是JSX（这只是JavaScript）。我们运用
className的缘由class是JavaScript是一个保留字。
子组件
当组件嵌套在另一个组件中时，它被称为 子组件。组件能够有多个子组件。然后将运用子组件的组件称为 父组件。
跟着容器组件的定义，我们能够竖立我们 title 和 content 基础组件，从我们最初的设想抓住了源，并把源文件分别到每一个组件。
比方，题目组件包含 容器元素 <div className="header"> ，菜单图标，题目和搜刮栏 看起来像如许：
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
)
}
}
末了，我们能够 Content 运用时候轴项目编写组件。每一个时候轴项目被包装在单个组件中，具有与其相关联的头像，时候戳和一些文本。
class Content extends React.Component {
render() {
return (
<div className="content">
<div className="line"></div>
{/* Timeline item */}
<div className="item">
<div className="avatar">
<img
alt='Doug'
src="http://www.croop.cl/UI/twitter/images/doug.jpg" />
Doug
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
)
}
}
为了在 React 组件中编写解释，我们必需将其作为 JavaScript 中的多行解释放在括号中。
把它们放在一同
如今，我们有我们这两个_子组件_，我们能够设置Header和Content组件是App组件的子组件。然后，我们App 组件能够运用这些组件，就像它们是浏览器内置的 HTML 元素一样。我们的新 App 组件包含题目和内容如今看起来像：
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
)
}
}
有了这些学问，我们如今有才能编写多个组件，我们能够最先构建更庞杂的运用程序。
然则，您能够会注重到此运用没有任何用户交互或自定义数据。事实上，正如我们如今所说的那样，我们的React运用程序并不比直接构建不庞杂的HTML轻易。
鄙人一节中，我们将引见怎样使我们的组件越发动态，并运用 React 举行 数据驱动。
