用 4 个步骤构建一个 React 聊天应用

用 4 个步骤构建一个 React 聊天应用

原文:https://medium.com/hackernoon/build-a-react-chat-app-in-4-steps-eb471c3ff6

在这篇博客中,我将向你展示如何利用现有的代码库例子来构建你自己的 React 聊天应用。这是一个基本的实时聊天应用,使用 React、Socket.io 和宇宙 JS API

我将使用宇宙 JS 作为这个博客的例子。Cosmic JS 是一个 API 优先的 CMS ,它使得管理和构建网站和应用程序更加快速和直观。通过将内容从代码中分离出来,Cosmic JS 增强了开发人员的灵活性,同时确保内容编辑人员能够以最适合他们的方式规划和部署内容。我们将使用 Cosmic JS 来安装我们的示例应用程序,部署和更新来自基于云的内容管理平台的内容。

如果你还没有,那就从注册参加宇宙 JS 开始吧。下面提供了有用的资源来简化您的开发操作。

React 聊天应用页面

React 聊天应用演示

基于 GitHub 的 React 聊天应用代码库

用 4 个步骤建立一个 React 通用博客

1.创建新的存储桶

您的 bucket 的名称是您正在构建的网站、项目、客户端或 web 应用程序的名称。为了保持示例博客的简洁,我将我的博客命名为“React Chat”。

2.安装宇宙 JS React 聊天 App

一旦你注册并命名了你的桶,你将被提示从头开始或者“查看一些应用”。对于这个博客,我只需点击右键“查看一些应用程序”,这样我就可以开始安装 React 聊天应用程序

应用程序安装选项

Cosmic JS 让你能够在编程语言之间进行过滤,比如 Node.js、PHP、React、AngularJS 等等。

只需点击 React 聊天应用图标下方的“安装”即可开始,或者访问宇宙 JS 应用页面

3.部署到 Web

我点击了“部署到 Web”。然后,我可以在部署 web 应用程序时编辑对象。您将收到一封电子邮件,确认您的 web 应用程序的部署。如果您在部署期间遇到任何问题,您可能会被转到 Cosmic JS 故障排除页面

确认部署位置和分支

部署分支机构确认模式

我从一个回购中提取,我的分支被澄清,我有一个与我在步骤 1 中创建的 slug / bucket 名称相匹配的部署位置。

展开,展开

给你一点保证,让你很快就能在网上活得好好的。:)

4.编辑全局对象/帖子

编辑是在宇宙 JS 仪表盘中实现的梦想。要了解更多关于如何在考虑编辑内容的情况下构建 Cosmic JS 的信息,请阅读在考虑内容编辑器的情况下构建。

应用部署确认

就像注册、创建新的存储桶、安装 web 应用程序、编辑对象和部署一样简单!我收到了访问我的 web 应用程序的确认电子邮件,还看到了我的桶升级选项,如自定义域、一键式 SSL、webhooks 和本地化。

Cosmic JS 是一个 API 第一的基于云的内容管理平台,使得管理应用和内容变得容易。如果你对 Cosmic JS API 有任何疑问,请联系 Twitter 或 Slack 上的创始人。

卡森·吉本斯是 Cosmic JS 的联合创始人和 CMO,这是一个 API 第一的基于云的内容管理平台,它将内容与代码分离,允许开发人员用他们想要的任何编程语言构建流畅的应用程序和网站。

黑客中午是黑客如何开始他们的下午。我们是 @AMI 家庭的一员。我们现在接受投稿并乐意讨论广告&赞助机会。

如果你喜欢这个故事,我们推荐你阅读我们的最新科技故事趋势科技故事。直到下一次,不要把世界的现实想当然!


本站为非盈利网站,作品由网友提供上传,如无意中有侵犯您的版权,请联系删除