挑战：如何构建一个React组件

学习新技能的最好方法是付诸实践。所以这对你来说是一个挑战。创建一个用于显示 Twitter 头像的 react 组件的挑战。您可以尝试自己解决（带有提示），或者您可以让我引导您完成解决方案。

挑战：构建一个 React 组件

挑战

在这个挑战中，您需要构建一个 React 组件来显示 Twitter 头像。从下面的 CodePen 可以看出，它只需要props.handle并打印出图像标签中的一个小 URL。很简单。 

我们需要做的是编写一个配置文件组件，该组件使用 Twitter 头像组件来显示图像和名称。你可以看到一些提示的调用。Reactdom.render

如果你想自己尝试这个挑战，那就来吧！否则，请在我引导您完成解决方案时继续阅读。

解决方案

首先分叉笔 ，以便您可以构建我们自己的组件，然后通过添加“我的解决方案”重命名它。 

在我们的ReactDOM调用中，我们有一个Profile正在调用的组件，我们给它 aname和 a handle。

所以这应该很简单。让我们继续创建一个配置文件。我将把它作为一个无状态组件来做，只使用一个javascript函数。如果你愿意，你实际上可以使用 React.createClass，或者类语法本身。做任何你喜欢的事。但我喜欢尽可能地使用无状态函数。

这将需要一个参数，即我们的 props 对象，但它将具有和name属性handle。所以让我们继续并解构它。

const Profile = ({ name, handle }) =>

然后让我们返回一个div。在这个 div 中，让我们返回一个带有这个特定帐户名称的 h1。在此之下，我们将有一个TwitterAvatar，它需要一个handle属性。所以我们将传递一个句柄，它与我们拥有的句柄相同。 

const Profile = ({ name, handle }) =><div><h1> {name} </h1><Twitter avatar handle={handle} /></div>;

我们去吧。应该就是这么简单。所以把它保存在 CodePen 中，你可以看到我们得到了 ReactJS 和 Twitter 头像。 

让我们继续将名称更改为Tuts+ 并将 Twitter 句柄更改为tutsplus，您可以看到它更新了。

因此，如您所见，我们可以将其更改为不同的名称和 Twitter 头像，我们可以看到这一点。好工作！你已经构建了一个非常基本的 React 组件。这是开始了解如何创建组件和使用它们的属性以及如何将这些属性传递给其他组件以为您完成一些工作的好地方。

这是完整显示解决方案的最后一支笔：

最后

React 是一个用于构建用户界面的 JavaScript 库，它席卷了 Web 开发世界，而 redux 是管理应用程序状态的好方法。在完整的课程中， 使用 React 和 Redux 的现代 Web 应用程序，您将了解 React、Redux 和其他领先模块如何组合在一起以全面了解应用程序开发。