想成为 React 开发者吗？这里有一份由顶尖技术学校打造的 48 部分教程

自从我们开始在 Scrimba 上创建课程以来，用户就一直要求我们提供一门专业的 React 入门课程。因此，当我们最终着手制作时，我们决定将其打造成迄今为止最全面的课程。

它被称为“学习 React”，总共包含 48 个章节 - 包括讲座和互动作业。

佩尔·哈拉尔德·博根

@perborgen

课程发布🚀 我们与@VSCHOOLHQ的@bobziroll

合作，在@scrimba_com创建了一门关于React的🆓课程。这门课程内容丰富，共计48章，并且充满了互动挑战。 如果您觉得您的粉丝可能会喜欢，请转发！ scrimba.com/g/glearnreact

2018年11月28日下午17:26

81 126

这是 Scrimba 迄今为止最全面的入门课程。它共包含 48 个章节，包含讲座和互动作业。

该课程的幕后推手是著名教师 Bob Ziroll。Bob 是V School的教育总监，V School 是一所教授全栈 JavaScript 和 UX 课程的技术教育学校。

根据课程报告，V School 是顶尖的编码学校之一，因此我们非常高兴能与他们合作。

如果你喜欢这门课程，一定要看看V Schools的沉浸式全栈课程。现在让我们来看看课程是如何布局的！

第一部分 简介与理念

Bob 自 2014 年以来一直在训练营授课，并形成了自己的学习理念。因此，在第一个截屏视频中，我们将熟悉这一理念。下图中，您将看到其要点。

第 2 部分：我们将要构建什么

在下一个视频中，Bob 概述了该课程，并向我们快速介绍了我们将要构建的两个项目：一个简单的待办事项列表应用程序，它涵盖了许多 React 核心主题；以及一个顶点项目，它将是一个模因生成器应用程序。

第 3 部分。为什么要使用 React？

首先，Bob 让我们知道为什么我们应该考虑使用像 React 这样的东西而不是仅仅用纯 JavaScript 编写它，以及为什么这么多开发人员已经选择使用 React。

第 4 部分 ReactDOM 和 JSX

在这个截屏视频中，我们直接进入代码并使用 JSX（一个 React 特定的JavaScript eXtension）编写我们的 Hello World ，这样我们就可以同时编写 HTML 和 JavaScript！

import React from "react"  
import ReactDOM from "react-dom"

ReactDOM.render(<h1>Hello world!</h1>, document.getElementById("root"))

Bob 还快速介绍了一些陷阱，例如正确的 React 导入以及当您尝试渲染两个相邻元素时 JSX 不喜欢的内容。

// Hm, not sure which element I should render here...  
   ReactDOM.render(  
     <h1>Hello world!</h1>  
     <p>I'm a paragraph</p>,   
   document.getElementById("root"))

// This is much better!  
   ReactDOM.render(  
     <div>  
       <h1>Hello world!</h1>  
       <p>I'm a paragraph</p>  
     </div>,   
   document.getElementById("root"))

第五部分 ReactDOM 和 JSX 实践

这是我们这门课程的第一次练习。在练习截屏视频中，Bob 为我们设定了一个目标，并给出了一些提示。

Bob 鼓励我们花一些时间思考并解决这个以及后续的挑战，因为我们付出的努力越多，我们就能记住越多关于 React 的知识。

最后，Bob 向我们展示并指导我们解决该问题，但本博客不会透露任何内容😃，因此请随意在实际的截屏视频中查看。

第六部分 功能组件

在这次演讲中，Bob 向我们简要介绍了功能组件。

import React from "react"  
import ReactDOM from "react-dom"

function MyApp() {  
  return (  
    <ul>  
       <li>1</li>  
       <li>2</li>  
       <li>3</li>  
    </ul>  
)}

ReactDOM.render(  
   <MyApp />,  
   document.getElementById("root")  
)

我们将其定义MyApp()为一个简单的 JS 函数，它返回一个非常简单的 HTML 列表元素，但这就是 React 的亮点，因为稍后我们将该函数用作<MyApp />HTML 元素！

第七部分 函数组件实践

需要再多练习一下。

所以，就像之前的练习节目一样，这里不会剧透，但请直接进入代码，提出你自己的解决方案。最后，Bob 会像之前一样引导我们完成整个过程。

第 8 部分 将组件移动到单独的文件中

在本章中，Bob 为我们提供了一些组织代码的良好且常见的 React 实践，例如将包含组件的文件命名为MyInfo.js与组件本身相同的名称<MyInfo /> 。

然后，我们学习如何将组件提取到各自的文件中，以及如何将它们导出以供以后在我们的应用程序中使用。

// MyInfo.js

import React from "react"  
function MyInfo() {  
  return (  
   // component code  
  )  
}

export default MyInfo

然后我们可以将组件放入components文件夹并导入<MyInfo />到index.js

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import MyInfo from "./components/MyInfo"

ReactDOM.render(  
   <MyInfo />,   
   document.getElementById("root")  
)

第 9 部分。父/子组件

在这个截屏视频中，Bob 讨论了父组件和子组件。常规应用程序远比仅仅渲染到 DOM 的单个组件复杂得多。相反，我们通常拥有复杂的组件层次结构。

我们首先编写函数组件<App />，它将位于组件层次结构的顶部

// index.js

import React from "react"  
import ReactDOM from "react-dom"

import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

并且就其App.js本身而言：

// App.js

import React from "react"

function App() {  
  return (  
    <div>  
      <nav>  
        <h1>Hello a third time!</h1>  
        <ul>  
          <li>Thing 1</li>  
          <li>Thing 2</li>  
          <li>Thing 3</li>  
        </ul>  
      </nav>  
      <main>  
        <p>This is where most of my content will go...</p>  
      </main>  
    </div>  
  )  
}

export default App

如你所见，我们可以在其中编写页面，<App />但这违背了 React 的初衷。我们可以将每一段 HTML 代码分别放入一个单独的组件中。

<App />我们的可能看起来是这样的：

在 React 中，以大写字母开头的 HTML 元素表示我们创建的组件

使用这个概念我们的<App />组件将如下所示：

import React from "react"  
import MainContent from "./MainContent"  
import Footer from "./Footer"

function App() {  
  return (  
    <div>  
      <Header />  
      <MainContent />  
      <Footer />  
    </div>  
  )  
}

export default App

这要好得多，而且这是一种非常巧妙的组织代码的方法。

第十部分 父/子组件练习

练习时间到了。这是Bob给我们布置的任务，我们开始吧。

与往常一样，本博客中没有剧透，因此请随意深入了解Bob 的截屏视频中的解决方案。

如果你不太确定从哪里开始，Bob建议先回顾一下前面的章节，并尝试找到一个解决方案，即使目前还不完美。这将是最好的学习方法。

第 11 部分。Todo 应用 — 第 1 阶段

好了！恭喜，我们已经掌握了 React 的基础知识，这些基础足以让我们开始构建我们的第一个真实世界的应用程序。

首先，我们需要为应用创建一个结构，这是一个绝佳的机会来练习我们在之前的截屏视频中学到的知识。任务如下，让我们开始吧。

现在这应该相当简单了，Bob 将和我们一起讨论解决方案。

第 12 部分：使用 CSS 类来设置 React 的样式

在本期节目中，Bob 将向我们介绍 React 中的样式设置。在 React 中，有几种不同的方法可以设置组件的样式，我们将从 CSS 类开始，因为这是我们大多数人应该非常熟悉的。

我们先从一个简单的例子开始，这个例子的结构和上一章的一样。

在 React 中它与纯 HTML 非常相似，但class我们需要使用className：

function Header() {  
  return (  
    <header className="navbar">This is the header</header>  
  )  
}

很多地方会告诉你我们需要写classNamebecauseclass是 JS 中的保留字，但事实是，在底层，JSX 使用的是原始的 JS DOM API。

document.getElementById("something").className += "new-class-name"

现在我们可以编写纯 CSS：

第十三部分 一些注意事项

顺便说一句，Bob 只是告诉我们他个人偏好的某些样式，所以我们知道他可能有不同的做法。如果您希望稍微改变一下代码，我们非常欢迎。

// Bob likes to avoid semicolons, where possible  
import React from 'react'

// but there is no way to avoid them here  
for (let i = 0; i < 10; i++) {}

// Bob prefers regular functions  
function App() {  
  return (  
    <h1>Hello world!</h1>  
  )  
}

// Although you can write ES6 arrow functions if you wish  
const App = () => <h1>Hello world!</h1>

第 14 部分 JSX 到 JavaScript 以及反向转换

在继续深入之前，我们应该认真研究一下 JSX 和 JS 是如何协同工作的。我们可以看到，在 JS 函数内部，我们返回的内容看起来像 HTML，但却是 JSX。

现在，如果我们想使用变量怎么办？我们可以使用{}：

function App() {  
  const firstName = "Bob"  
  const lastName = "Ziroll"  

  return (  
    <h1>Hello {\`${firstName} ${lastName}\`}!</h1>  
  )  
}

{}是一种在 JSX 中使用纯 JS 的方法。用通俗的语言来说，它看起来像<h1>This is JSX {now we're writing JS} and we're back to JSX</h1>

第 15 部分：使用 Style 属性的内联样式

在 React 中应用样式的一个非常快捷的技巧是使用内联样式。

<h1 style={{color: "#FF8C00"}}>Hello World!</h1>

注意我们如何使用两组花括号{{}}。这是因为 React 期望样式作为对象传递，但我们还需要告诉 JSX 我们正在使用 JS 对象。

但还有一个问题。

// This is going to error  
<h1 style={{background-color: "#FF8C00"}}>Hello World!</h1>

// This is what we need to do, because JS doesn't like dashes in the   
// middle of our property names  
<h1 style={{backgroundColor: "#FF8C00"}}>Hello World!</h1>

第 16 部分。Todo 应用程序 — 第 2 阶段。

在这个截屏视频中，我们将从上次 Todo 列表的讲解继续。首先，Bob 要求我们<TodoItem />提取以下代码来创建组件。

<input type="checkbox" />  
<p>Placeholder text here</p>

现在我们可以添加一些样式，创建一个美观的待办事项列表。很快我们将学习如何自定义<p>标签内的文本，但在此之前，我们需要先了解一下 props。

第 17 部分。道具第 1 部分 — 理解概念

让我们看一些简单的 HTML 并思考一下这些元素到底有什么问题。

<a>This is a link</a>  
<input />  
<img />

它们实际上都没有什么重要作用。我们真正需要的是将这些属性添加到我们的元素中。

<a href="https://google.com">This is a link</a>  
<input placeholder="First Name" name="firstName" type="text"/>  
<img src="https://goo.gl/dKwBew"/>

这些属性经常被调用properties，如果你理解这个 HTML 概念，那么你也能理解propsReact 中的用法。因为我们创建的是自己的组件，所以我们可以props修改组件的行为方式。

第 18 部分 Props 第 2 部分 —— 可重用组件

在本期节目中，Bob 带我们来到 YouTube，在一个简单的视频图块上演示了可复用组件的概念。如果是用 React 创建的，我们不会直接把一个图块复制粘贴到整个页面上，而是会创建一个单独的图块，并确保它能够根据不同的属性（例如图片 URL 或标题）进行更改。

第十九部分 React 中的 Props

在此截屏视频中，Bob 将向我们展示如何结合本课程第 17 部分和第 18 部分的道具概念，并且他创建了一个基本的联系人卡片列表应用程序供我们练习。

首先，创建一个联系卡组件并学习如何使其动态化，以便我们可以为所有卡片重复使用一个组件，这将非常好。

使用联系人卡片的一个非常 React 的方式是：

// App.js  
...  
<ContactCard  
  name="Mr. Whiskerson"  
  imgUrl="http://placekitten.com/300/200"  
  phone="(212) 555-1234"  
  email="mr.whiskaz@catnap.meow"  
/>  
...

// instead of   
<div className="contact-card">  
  <img src="http://placekitten.com/300/200"/>  
  <h3>Mr. Whiskerson</h3>  
  <p>Phone: (212) 555-1234</p>  
  <p>Email: mr.whiskaz@catnap.meow</p>  
</div>

让我们创建ContactCard并使用它props来动态显示数据。

import React from "react"

function ContactCard(props) {  
  return (  
    <div className="contact-card">  
      <img src={props.imgUrl}/>  
      <h3>{props.name}</h3>  
      <p>Phone: {props.phone}</p>  
      <p>Email: {props.email}</p>  
    </div>  
  )  
}

export default ContactCard

第二十部分 道具与造型练习

好了，开始练习吧！和之前的练习一样，你的任务如下：

按照我们的传统，为了避免任何剧透并真正学习 React，请深入研究 Bob 的演练。

与往常一样，尝试自己解决这项任务，并随意参考前面的章节，因为它们包含您需要的一切。

第 21 部分。映射组件

所以，在练习中，你可能注意到我们重复了一些<Joke />组件，并且可能想知道是否有办法只写一次。当然！我们可以使用 JavaScript .map来实现这一点。

function App() {

const jokeComponents = jokesData.map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)

return (  
    <div>  
      {jokeComponents}  
    </div>  
  )  
}

让我们快速分析一下这里的一些事情。

我们的数据通常来自 API，因此为了模仿它，我们jokesData假装它拥有我们需要的所有数据。

const jokesData = [  
  {  
    id: 1,  
    punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."  
  },  
  {  
    id: 2,  
    question: "What's the best thing about Switzerland?",  
    punchLine: "I don't know, but the flag is a big plus!"  
  },  
  ...  
]

你可能也注意到了<Joke key={joke.id} ... />props key。这实际上是 React 的一个要求，每当你反复创建组件时，都需要传递一个key带有特定参数的 props。大多数情况下，它是一个id你从 API 中获取的参数。

第 22 部分 映射组件练习

又到了练习投稿的时间了。这是你的任务，Bob 还好心地帮我们写了一些样板代码，这样我们就不用从头开始写那么多了。

与往常一样，您可以随意与 Bob 一起讨论解决方案，但请先尝试自己做一下。

第 23 部分。Todo 应用 — 第 3 阶段

现在，让我们运用所学的映射和 props 知识，让我们的待办事项列表更加动态化。现在，我们可以映射项目数据，并渲染<TodoItem />每个项目的数据。

并且使用数据作为道具<TodoItem />并将其放置在组件本身内我们想要的位置。

如果您此时注意到以下错误，Warning: Failed prop type: You provided a `checked` prop to a form field...请不要惊慌——我们已经做对了所有事情。Bob 将在本课程的第 31 部分中向我们展示它的含义以及如何解决它。

第 24 部分 基于类的组件

在本章中，Bob 向我们介绍了 React 中的类组件。有时，我们目前使用的函数式组件不够用，需要扩展其功能。

我们稍后会了解更多有关根本差异的知识，但现在先看看它们在语法上的差异，并尝试将我们的<App />函数转换为类组件。

class App extends React.Component {  
  render() {  
    return (  
      <div>  
        <h1>Code goes here</h1>  
      </div>  
    )  
  }  
}

第 25 部分 基于类的组件实践

再练习一下。这次我们拿到了一些代码，练习一下如何将函数式组件转换为类组件。这次练习中，代码中还隐藏了一个小 bug，我们来找出它。

像往常一样，先尝试自己完成这个练习，然后再跟着Bob的教程练习。下一章再见！

第 26 部分 州

状态是 React 中最重要的部分之一。它是组件本身维护的数据。props接收 props 的组件无法更改状态，但state可以更改！因此，当组件本身需要更改某些数据时，我们可能需要使用状态。例如，当我们点击一​​个按钮时，组件中的某些文本会改变颜色。

组件需要是一个类组件才能具有状态，并且我们需要有一个构造函数方法。

constructor() {  
  super()  
  this.state = {  
    answer: "Yes"  
  }  
}

然后我们可以在我们的returnJSX 中使用该数据并显示我们的数据。

第 27 部分 国家实践

在这次练习中，我们需要做一些调试。

我们经常需要修复代码中的一些问题，所以练习这个技能非常有用。如果你遇到困难，可以先回顾一下之前的章节，然后再按照 Bob 的解决方案操作。

第 28 部分 国家实践 2

正如我们之前提到的，状态是一个非常重要的概念，所以 Bob 为我们安排了两节练习课。

这可能相当棘手，但请尽力尝试，然后看看鲍勃是如何做到的。

第 29 部分 Todo 应用 — 第 4 阶段

在这个简短的演讲中，鲍勃向我们展示了如何在我们的 Todo 应用程序中使用状态。

第 30 部分：在 React 中处理事件

事件处理本质上允许用户与您的网页进行交互，并在发生诸如按钮单击或悬停之类的事件时执行特定操作。

我们来看一个执行这个简单功能的简单示例。

function handleClick() {  
  console.log("I was clicked")  
}

您可能已经熟悉在常规 HTML 中如何实现它：

<button onclick="handleClick()">Click me</button>

React 非常相似。

<button onClick={handleClick}>Click me</button>

不同之处在于事件名称onClick采用驼峰式命名法，并且handleClickJS 在我们的 JSX 中传递，正如我们在第 14 课中提到的内联样式。

第 31 部分。Todo 应用 — 第 5 阶段

在这个角色转换中，Bob 给我们带来了一个挑战。还记得我们在控制台中收到的关于 'checked' 属性的警告吗？为了解决这个问题，我们需要提供onChange处理程序。现在，console.log你可以随意设置它。

就像所有常见的挑战一样—— 跳到演员表来查看解决方案。

第 32 部分 改变状态

我们可以使用 React 的方法更新组件中的状态setState()。

让我们看看如何在一个非常常见的例子——计数器上使用它。

当你点击“更改！”按钮时，什么也不会发生。让我们实现我们的handleClick()方法。首先，我们尝试显示一个不同的数字：

handleClick() {  
  this.setState({ count: 1 })  
}

并将其传递给我们的<button>。

<button onClick={this.handleClick}>Change!</button>

如果我们运行这个程序，我们会得到Uncaught TypeError: Cannot read property ‘setState’ of undefined。这是一个非常常见的错误，让我们的处理程序工作的方法之一就是绑定它。

constructor() {  
  super()  
  this.state = {  
    count: 0  
  }  
  this.handleClick = this.handleClick.bind(this)  
}

现在我们希望该handleClick()方法是动态的，并且实际上将当前状态加 1。幸运的是，React 提供了此功能，prevState以便我们可以比较状态。

handleClick() {  
  this.setState(prevState => {  
    return {  
      count: prevState.count + 1  
    }  
  })  
}

第 33 部分。Todo 应用 — 第 6 阶段

在这一部分，我们将实现点击复选框时，它会改变状态，并在需要时勾选/取消勾选复选框。Bob 提醒我们，这部分操作比较棘手，听起来似乎很简单。作为挑战，我们先尝试自己实现一下，但不用担心出现问题——Bob 会为我们准备一个演示。

第 34 部分 生命周期方法第 1 部分

React 的一大优点在于，我们基本上只需编写原生 JS 代码，React 就会处理很多幕后工作。组件中会发生许多这样的“幕后”事件。它们更像是组件生命周期中的一系列里程碑，因此被称为生命周期方法。Bob 将在本章及后续章节中介绍一些最常见、最重要的生命周期方法。

第一个你已经知道的是render()。它的作用是确定哪些内容要渲染到屏幕上，并且render()当某些内容发生变化（例如state或 ）时，React 会调用它props。

下一个方法componentDidMount()本质上类似于“组件诞生”。当组件出现在屏幕上时，会调用此方法。这是进行 API 调用的好时机。

第三个非常有趣的方法是shouldComponentUpdate()。有时，即使组件看起来没有任何变化，React 也会更新它。在某些情况下，这可能会非常昂贵，而这种方法为我们开发人员提供了优化应用程序的机会。

本章的最后一个方法是componentWillUnmount()，在组件从用户屏幕上消失之前进行清理。您可以移除事件监听器或取消 API 调用。

第 35 部分 生命周期方法 第 2 部分

在本章中，Bob 非常快速地介绍了一些已弃用的生命周期方法，您可能会在某些旧版 React 应用程序中看到这些方法，他还介绍了一些非常罕见的方法，例如getDerivedStateFromProps()和getSnapshotBeforeUpdate()。但我们不会深入介绍它们，因为它们对本课程而言并非必需。

第 36 部分 条件渲染

有时你希望仅在特定条件下显示某些数据或渲染某些 JSX。这时我们就需要使用条件渲染。

React 的优势之一是，使用原生 JS，我们可以保留其灵活性，从而编写自己的代码。缺点是，在学习 React 时，可能会有太多不同的方法来实现同一件事。条件渲染就是其中之一。Bob 会向我们展示几种实现方法，但请放心，React 开发者的数量和方式一样多。

让我们创建一个<Conditional />组件，在页面加载时渲染“Loading…”。我们可以在应用中的 inrender方法中使用它。

render() {  
  return (  
    <div>  
      <Conditional isLoading={this.state.isLoading}/>  
    </div>  
  )  
}

我们可以通过使用 JS 中的简单 if-else 来实现我们的目标：

或者我们可以使用最新的 ES6 三元运算符来改进它。

第 37 部分 条件渲染 - 实践

现在让我们练习一下。条件渲染是任何 React 开发人员工具包中必不可少的工具之一。

在与鲍勃讨论解决方案之前，请尽力而为。

第 39 部分。Todo 应用 — 第 7 阶段

我们已经到了 Todo 应用的最后一部分，只需完成最后的样式设置就大功告成了！这部分的挑战在于如何让最终的外观<TodoItem />看起来与众不同。例如，将灰色文本和/或背景变成斜体。Bob会向我们展示如何实现，但最终还是取决于我们自己。

第 40 部分：从 API 获取数据

在这次演出中，鲍勃为我们提供了一个裸组件，以便我们了解有关获取的更多信息。

在第 24 章中，我们了解到生命周期方法最常见的用例之一componentDidMount()是从某个地方获取数据，以便我们的组件可以执行它应该做的任何任务。

在这个例子中，我们将使用免费的《星球大战》 API 来获取一些角色名称。让我们编写一个componentDidMount()方法，用于获取一些数据并直接console.log使用。

componentDidMount() {  
  fetch("https://swapi.co/api/people/1")  
    .then(response => response.json())  
    .then(data => console.log(data))  
}

我们从 API 调用中获得的数据

好的！所以我们只需要抓取name这些数据并将其存储在我们的状态中，然后显示在组件中即可。最终我们的代码<App />应该是：

我们可以从鲍勃身上学到一些有趣的技巧。

创建一个loading布尔状态是个好主意。如果我们的请求耗时很长，我们可以直接通知用户请求正在处理中，他们的数据很快就会返回。

我们创建一个单独的变量，text在render()其中执行所有逻辑，并且我们有一个非常干净的变量return()，因此对于维护我们代码的下一个开发人员来说更容易理解。

第 41 部分。表格第 1 部分

在本期节目中，我们将探讨如何在 React 中创建表单。表单实际上是 React 中一个非常棘手的部分。首先，如果你还没有完成关于 React 状态部分的挑战，那么现在是补课的最佳时机。作为表单的入门，Bob 建议阅读React 官方文档。

在原生 JS DOM API 中，你需要创建一个 HTML 表单。一旦用户决定提交，你就会几乎在最后一秒收集表单中的所有数据，并在发送之前进行验证。

React 提倡你通过状态保存来随时跟踪表单数据。每次按键操作，表单组件的状态中都会保存最新的表单版本。

React 中的表单有 3 个关键部分：

• 输入——当用户更新输入时，我们触发事件处理程序（第 20 行）
• 事件处理程序——使用来自用户的数据更新状态（第 11-15 行）
• 状态——数据存储（第 6-8 行）

要查看更复杂的例子，Bob 展示了一些巧妙的技巧，使表单更易于重用，代码更易于阅读，请跳转到截屏视频。

第 42 部分。表格第 2 部分

在这一部分，Bob 进一步扩展了我们对表单的知识。表单可以处理的不仅仅是<input />！ 但事情可能会变得棘手。我们将学习如何处理<textarea />、<select />和<option />下拉菜单，并进一步扩展<input />以了解有关复选框和单选按钮的更多信息。

第 43 部分 表格练习

太好了，现在是练习的时间了。

鲍勃为我们提出了一个新的挑战，和往常一样，我们最好先尝试自己解决它。

如果有什么事情没有顺利完成，Bob 总会为我们提供支持并进行详细的指导。

第 44 部分 容器/组件架构

在这次演讲中，Bob 介绍了一种非常流行的 React 架构模式。

很多时候，当我们编写复杂的组件时，最终会在一个文件中写出很多行代码。然后我们开始上下滚动以添加额外的功能和显示逻辑。这时，容器/组件分离就派上用场了。在 React 中，我们将 UI 和业务关注点分离到不同的组件中。有很多不同的术语：智能/愚蠢、容器/展示，所有这些都指的是将渲染元素与数据流功能分离的同一个概念。

在我们的具体示例中，如果我们将 HTML 从render()方法中提取到单独的功能组件中<FormComponent />，并且我们的Form.tsx变成，我们就可以实现容器/组件模式FormContainer.tsx。

如您所见，我们仍然将处理程序和数据作为道具传递到我们的功能中<FormComponent />，并且在组件内部我们现在通过道具调用处理程序和数据。

第 45 部分。模因生成器顶点项目

你成功了！恭喜你完成了毕业设计。Bob 为我们带来了终极挑战。现在我们可以从零开始，创建自己的应用了。

如果一次性完成整个项目让我们感到畏惧，Bob 会在屏幕录像中设置迷你演练挑战来指导我们完成整个过程。

祝你好运，编码愉快！

第 46 部分 编写现代 React 应用

干得好！你的项目现在完成了，可以向亲朋好友展示啦！这真是值得骄傲的事情。干得漂亮！

在这次演讲中，Bob 为我们提供了一些关于如何跟上 React 生态系统所有变化的建议，并给我们提供了一些关于如何以略有不同的方式完成我们迄今为止学到的东西的提示，例如使用 ES6 箭头函数或将代码提取到新组件中以提高可读性。

第 47 部分。练习项目想法

在这次播客中，鲍勃讨论了接下来的学习方向以及课程的结束。播客中有一些关于如何实践所学知识的想法和文章值得一读。

第48部分。结论

恭喜，我们成功了！在这篇演讲中，我们快速总结了本课程的学习成果，并概述了未来可以学习的内容。

非常感谢你的课程，鲍勃！