React.js Chat Apps: 4 Great Resources

React.js is one of the coolest new javascript frameworks because of its ability to easily create modern user interfaces. As more and more apps include native chat functionality to connect users, it’s no surprise that lots of developers are turning to React.

Since PubNub makes building a serverless chat app incredibly simple, we pulled together four of our best resources for building a chat app using React.js, to help you get started. If Angular is more your flavor, we’ve got a great Angular chat guide as well.

Get Started with React

First, you should check out Rangle.io’s React-based starter kit and PubNub for the data streaming. You’ll learn how to set up a React environment to start sending and receiving messages with the PubNub publish / subscribe API.

Get Started with React

Build Infinite Scroll Chat History

In the second part, we teach you how to set up an infinite scroll chat history using Redux and the PubNub History API. You’ll set up a scroll to fetch action and learn how to make retrieving a chat history more user-friendly.

Set up chat history with React and Redux

Create Realtime User Lists

One of the great things about PubNub is our Presence API, which makes it easy (and automatic) to know which users are online and offline, as well as other custom “states” you can set. In the third part of this series, we show you how to leverage Presence to:

• Notify you when a user joins, leaves, or times out.
• Acknowledge when you join a chat.
• Populate a user list when someone joins.
• Initiate Hot Module Reloader (HMR) events.

Set up a realtime user list

Adding a Typing Indicator

Most modern apps give you more or less “realtime” indications about other users’ states, such as whether they’re typing or not. In the fourth part of our series, we show you how to set “states” in PubNub and bind them to user actions, such as typing events. We also use elements in React to build the UI for the typing indicator.

Realtime typing indicator with React

That’s it! This series should get you well on your way to building a chat app using React. And stay tuned – we’ve got even more tutorials on React chat functionality coming your way soon.