Group Chat Tutorial environment setup for React

This tutorial will walk you through setting up the group chat sample application, explain the architecture behind the app, and make some simple modifications.  The group chat sample app shows how to integrate PubNub React Chat components into a group chat style application.  The app is part of the larger react-chat-components GitHub repository, under the samples/ directory.

Creating a React Development Environment

Before you use PubNub React Chat Components with this group chat application, you need the tools necessary to build a chat application in React.

Setup a Node.js Development Environment

If you’ve already installed Node.js, you can skip to setting up Git.

This post requires you to install Node.js. To install Node.js you need to visit the Node.js Downloads page and select the installer for your platform.

Check the installation. Open your terminal and run the below commands to ensure Node.js is installed. You should see a version number after you run these commands:

1

Setup Git

You need Git to clone the PubNub React Chat Components from the GitHub repository.

Even if you have Git installed you may want to ensure that it’s the latest version. Follow the Getting Started - Installing Git guide to install Git.

Next, check the Git installation. Open your terminal and run the below command to ensure Git is installed. You should see a version number after you run the command:

Last, you'll also need a code editor or IDE (e.g. Visual Studio Code).

Your development environment is now ready. Next, you need to configure your PubNub API keys for React Chat Components.