学习使用React和Electron一次构建自己的桌面聊天应用程序

by Alex Booker

通过亚历克斯布克

学习使用React和Electron一次构建自己的桌面聊天应用程序 (Learn to build your own desktop chat app with React and Electron, one step at a time)

This tutorial was written in collaboration with the awesome Christian Nwamba.

本教程是与令人敬畏的Christian Nwamba合作编写的。

When learning to code, you have a bunch of resources at your disposal — books, screencasts, tutorials, even exercises. But to become a great developer, you need to practice what you learn with a project.

学习编码时，您可以使用大量资源-书籍，截屏视频，教程甚至练习。 但是要成为一名出色的开发人员，您需要练习如何通过项目来学习。

Learning by doing is the motivation for this article. You’ll start from nothing and build a complete chat application, step by step.

边干边学是本文的动机。 您将从零开始，逐步构建一个完整的聊天应用程序。

You’ll build the project one step at a time and to test you understand it, we included some special bonus challenges at the end. Are you up to the test?

您一次将构建一个项目，并测试您是否理解它，最后我们还包括一些特殊的奖金挑战。 您要接受考试吗？

Here’s what we’ll build:

这是我们要构建的：

Pretty cool, right ??

很酷吧？

When you follow along, you’ll learn how to build realtime chat, a “who’s online” list and along the way, how to structure a React app. To power our chat, we’ll be using a service I am helping to build called Chatkit.

当您继续学习时，您将学习如何建立实时聊天，“谁在线”列表，以及如何构建React应用。 为了增强我们的聊天功能，我们将使用一种我正在帮助构建的服务，称为Chatkit 。

Sound good? Tune in to FreeCodeCamp radio for some smooth, gentle background music to keep focused and let’s go!

听起来不错？ 收看FreeCodeCamp广播，获取一些平稳，柔和的背景音乐，以保持专注并开始吧！

你需要知道的 (What you need to know)

Actually, one more thing ?:

其实还有一件事吗？：

It would be nice if you knew some basic JavaScript, Node and React already. That being said, if you don’t feel comfortable with these technologies, have a go anyway!

如果您已经了解一些基本JavaScript，Node和React，那就太好了。 话虽这么说，如果您对这些技术不满意，那就去吧！

We intentionally structured this tutorial to make it clear where to paste code so you can follow along. If you have questions, drop them here!

我们故意设计了本教程，以使您清楚地将代码粘贴到哪里，以便您可以继续学习。 如果您有任何疑问，请将其放在这里！

Alright, step one:

好吧，第一步：

设置电子 (Setup Electron)

To build a cross-platform desktop app with web technologies, we’ll use Electron.

要使用网络技术构建跨平台的桌面应用程序，我们将使用Electron 。

To get us off the ground, we made a minimal starter template. Download it:

为了使我们起步，我们制作了一个最小的入门模板。 下载它：

git clone https://github.com/pusher/electron-desktop-starter-template electron-desktop-chat

cd electron