想学习 React.js 吗？这是我的免费课程，通过构建一个聊天应用来讲解。

单击图像即可进入课程。

聊天正在席卷全球，而 React 正在蚕食前端开发。那么，还有什么比通过构建聊天应用来学习 React 更好的呢？在我最新的 Scrimba 课程中，你就能做到这一点。

它包含 17 个互动课程（加上简介和结尾）和 5 个挑战，您必须自己编辑代码。

最棒的是：这一切都在浏览器中完成。您无需编写任何服务器端代码。Chatkit API负责处理后端的繁重工作，这样我们就可以专注于构建聊天客户端。

课程结束后，你将拥有一个专属的个性化聊天应用，它包含多个聊天室、创建新聊天室、自动滚动等功能。此外，借助 CSS 网格和 CSS 变量，它还可以轻松自定义。

我假设你了解 JavaScript，并且之前对 React 有所了解（例如，阅读我这篇五分钟的入门文章，或者浏览一些教程）。除此之外，本课程没有任何先修课程要求。

现在让我们看看它是如何布局的！

第一课：课程介绍

首先，我会简单介绍一下这门课程。我们会讲解你将要学习的内容，我也会做个自我介绍。课程结束后，我还会提前告诉你如何定制你自己的聊天应用。

课程 #2：组件架构

在开始构建 React 应用之前，你应该先了解一下组件架构，并将 UI 拆分成组件。在本讲座中，我将向你展示如何做到这一点。

课程 #3：代码库架构

接下来，我们将看看我们的组件架构是如何转化为代码的。我还将介绍代码库其余部分的设置方法，以免您在开始编码后对代码库中的各种文件感到困惑。

我不会从头开始创建存储库，因为已经有很多教程可以帮助您设置开发环境，而这并不是 Scrimba 平台最适合的。

课程 #4：MessageList 组件

现在我们终于可以开始编写代码了，所以在本课中，我们将在组件中渲染虚拟数据MessageList。本课将向您介绍 JSX，并学习如何使用例如map()数组方法等动态创建元素。

{DUMMY_DATA.map((message, index) => {  
   return (  
     <div key={index} className="message">  
        <div className="message-username">{message.senderId}</div>  
        <div className="message-text">{message.text}</div>  
     </div>  
   )  
})}

在本课中您还将面临您的第一个挑战！

第五课：Chatkit 简介

[!单击图像以获取 Chatkit API。]( https://pusher.com/chatkit?utm_source=scrimba&utm_medium=medium&utm_campaign=announcment-post )
单击图像即可访问 Chatkit API。

现在我们已经能够在页面上渲染数据了，接下来我们将开始集成Chatkit API，它将负责处理应用的后端。在本课中，我将简要介绍一下该 API。

课程#6：连接到Chatkit

接下来只需编写Chatkit集成代码，非常简单：上面的代码就足以让你从聊天室获取消息。你将接触到 React 的componentDidMount()生命周期方法，你需要在这里将组件与第三方 API 连接起来。

课程 #7：状态和属性

在 React 中，我们处理数据的两种方式是 state 和 props，你需要了解两者之间的区别。在本课中，我们需要同时使用这两种类型，因为我们既要将聊天消息存储在App组件的 state 中，也要将它们作为 props 传递给MessageList组件。

constructor() {  
  super()  
  this.state = {  
    messages: []  
  }  
}

第 8 课：消息组件

在本讲座中，我们将构建 Message 组件。它的任务是：渲染从父组件传递过来的用户名和文本。我还将给你一个挑战，将它从基于类的组件转换为函数式组件。

function Message(props) {  
  return (  
    <div className="message">  
      <div className="message-username">{props.username}</div>  
      <div className="message-text">{props.text}</div>  
    </div>  
  )  
}

课程 #9：SendMessageForm 组件

如果没有表单来发送消息，聊天应用就无法运行。所以在本讲座中，我们将创建一个这样的表单。本讲座将讲解受控组件，这是 React 中一个至关重要的概念。这意味着组件本身决定在输入字段中渲染什么，而不是由 DOM 节点本身来保存内部状态。

课程 #10：广播消息

sendMessage(text) {  
  this.currentUser.sendMessage({  
    text,  
    roodId: 9434230  
  })  
}

现在我们已经准备SendMessageForm好了，我们需要将消息发送给 Chatkit，以便它可以广播它们。这将迫使你学习 React 的另一个核心概念：逆数据流。

在 React 中，数据向下流动，从父组件流向子组件。然而，有时我们需要子组件向上访问其父组件并触发其方法，同时传递一些来自子组件自身的数据。

第 11 课：RoomList 组件

由于我们现在已经具备了核心聊天功能（发送和显示消息），现在是时候跳转到RoomList组件了，该组件显示您在 Chatkit 实例上可用的所有房间。

它将向您介绍 Chatkit 中的一些新概念，并巩固您关于如何从父组件向子组件发送数据的知识。我们还将重新讨论 ES6 扩展运算符，它在构建 React.js 应用时非常有用。

第十二课：订阅房间

然后，你需要学习如何订阅特定的房间。我们将为组件中显示的每个房间连接一个事件监听器RoomList。这将触发组件中的一个方法App，该方法会告诉 Chatkit 用户想要订阅该特定房间。

subscribeToRoom(roomId) {  
  this.setState({ messages: [] })  
  this.currentUser.subscribeToRoom({  
    roomId: roomId,  
    hooks: {  
      onNewMessage: message => {  
        this.setState({  
          messages: [...this.state.messages, message]  
        })  
      }  
    }  
  })  
}