Erfahren Sie, wie Sie in 10 Minuten eine React-Chat-App erstellen - React JS-Tutorial

In diesem Artikel zeige ich Ihnen den einfachsten Weg, eine Chat-Anwendung mit React.js zu erstellen. Dies erfolgt vollständig ohne serverseitigen Code, da die Chatkit-API das Back-End übernimmt.

Ich gehe davon aus, dass Sie grundlegendes JavaScript kennen und dass Sie schon einmal auf ein bisschen React.js gestoßen sind. Ansonsten gibt es keine Voraussetzungen.

Hinweis: Ich habe auch einen kostenlosen Kurs in voller Länge zum Erstellen einer React.js-Chat-App hier erstellt:

Wenn Sie diesem Tutorial folgen, erhalten Sie am Ende Ihre eigene Chat-Anwendung, auf die Sie dann weiter aufbauen können, wenn Sie möchten.

Lass uns anfangen!

Schritt 1: Aufteilen der Benutzeroberfläche in Komponenten

React basiert auf Komponenten. Wenn Sie also eine App erstellen, müssen Sie zunächst die Benutzeroberfläche in Komponenten aufteilen.

Beginnen wir mit dem Zeichnen eines Rechtecks ​​um die gesamte App. Dies ist Ihre Stammkomponente und der gemeinsame Vorfahr für alle anderen Komponenten. Nennen wir es App:

Nachdem Sie Ihre Stammkomponente definiert haben, müssen Sie sich folgende Frage stellen:

Welche direkten Kinder hat diese Komponente?

In unserem Fall ist es sinnvoll, drei untergeordnete Komponenten anzugeben, die wir wie folgt bezeichnen:

  • Title
  • MessagesList
  • SendMessageForm

Zeichnen wir für jedes dieser Elemente ein Rechteck:

Dies gibt uns einen schönen Überblick über die verschiedenen Komponenten und die Architektur hinter unserer App.

Wir hätten uns weiterhin fragen können, welche Kinder diese Komponenten wieder haben. So hätten wir die Benutzeroberfläche in noch mehr Komponenten aufteilen können, indem wir beispielsweise jede der Nachrichten in ihre eigenen Komponenten umgewandelt hätten. Der Einfachheit halber werden wir hier jedoch aufhören.

Schritt 2: Einrichten der Codebasis

Jetzt müssen wir unser Repository einrichten. Wir verwenden die einfachste mögliche Struktur: eine * index.html * -Datei mit Links zu einer JavaScript-Datei und einem Stylesheet. Wir importieren auch das Chatkit SDK und Babel, mit denen unser JSX transformiert wird:

Hier ist ein Scrimba-Spielplatz mit dem endgültigen Code für das Tutorial. Ich würde Ihnen empfehlen, es in einem neuen Tab zu öffnen und damit herumzuspielen, wenn Sie sich verwirrt fühlen.

Alternativ können Sie das Scrimba-Projekt als ZIP-Datei herunterladen und einen einfachen Server ausführen, um es lokal zum Laufen zu bringen.

Schritt 3: Erstellen der Stammkomponente

Wenn das Repository eingerichtet ist, können wir mit dem Schreiben von React-Code beginnen, den wir in der Datei * index.js * ausführen.

Beginnen wir mit der Hauptkomponente App. Dies wird unsere einzige „intelligente“ Komponente sein, da sie die Daten und die Verbindung mit der API verarbeitet. Hier ist die Grundeinstellung dafür (bevor wir eine Logik hinzugefügt haben):

 class App extends React.Component { render() { return ( ) } } 

Wie Sie sehen können, macht es einfach aus drei Kinder: die , und die Komponenten.

Wir werden es jedoch etwas komplexer machen, da die Chat-Nachrichten im Status dieser AppKomponente gespeichert werden müssen . Auf diese Weise können wir auf die Nachrichten zugreifen this.state.messagesund sie an andere Komponenten weitergeben.

Wir beginnen mit der Verwendung von Dummy-Daten, damit wir den Datenfluss der App verstehen können. Dann werden wir dies später mit realen Daten aus der Chatkit-API austauschen.

Erstellen wir eine DUMMY_DATAVariable:

 const DUMMY_DATA = [ { senderId: "perborgen", text: "who'll win?" }, { senderId: "janedoe", text: "who'll win?" } ] 

Dann fügen wir diese Daten dem Status von hinzu Appund geben sie MessageListals Requisite an die Komponente weiter.

 class App extends React.Component { constructor() { super() this.state = { messages: DUMMY_DATA } } render() { return ( ) } } 

Hier initialisieren wir den Zustand in der constructorund geben ihn auch this.state.messagesweiter MessageList.

Beachten Sie, dass wir super()den Konstruktor aufrufen . Sie müssen dies tun, wenn Sie eine statusbehaftete Komponente erstellen möchten.

Schritt 4: Dummy-Nachrichten rendern

Mal sehen, wie wir diese Nachrichten in der MessageListKomponente rendern können . So sieht es aus:

 class MessageList extends React.Component { render() { return ( 
    {this.props.messages.map(message => { return (
  • {message.senderId} {message.text}
  • ) })}
) } }

Dies ist eine sogenannte dumme Komponente. Es braucht eine Requisite, messagesdie eine Reihe von Objekten enthält. Und dann rendern wir einfach die Eigenschaften textund senderIdaus den Objekten.

Wenn unsere Dummy-Daten in diese Komponente fließen, wird Folgendes gerendert:

So now we have the basic structure for our app, and we’re also able to render out messages. Great job!

Now let’s replace our dummy data with actual messages from a chat room!

Step 5: Fetching API-keys from Chatkit

In order to get fetch messages, we’ll need to connect with the Chatkit API. And to do so, we need to obtain API keys.

At this point, I want to encourage you to follow my steps so that you can get your own chat application up and running. You can use my Scrimba playground in order to test your own API keys.

Start by creating a free account here. Once you’ve done that you’ll see your dashboard. This is where you create new Chatkit instances. Create one and give it whatever name you want:

Then you’ll be navigated to your newly created instance. Here you’ll need to copy four values:

  • Instance Locator
  • Test Token Provider
  • Room id
  • Username

We’ll start with the Instance Locator:

You can copy using the icon on the right side of the Instance Locator.

You can copy using the icon on the right side of the Instance Locator.

And if you scroll a bit down you’ll find the Test Token Provider:

The next step is to create a User* *and a Room, which is done on the same page. Note that you’ll have to create a user first, and then you’ll be able to create a room, which again gives you access to the room identifier.

So now you’ve found your four identifiers. Well done!

However, before we head back to the codebase, I want you to manually send a message from the Chatkit dashboard as well, as this will help us in the next chapter.

Here’s how to do that:

This is so that we actually have a message to render out in the next step.

Step 6: Rendering real chat messages

Now let’s head back to our index.js file and store these four identifiers as variables at the top of our file.

Here are mine, but I’d encourage you to create your own:

 const instanceLocator = "v1:us1:dfaf1e22-2d33-45c9-b4f8-31f634621d24" const testToken = "//us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token" const username = "perborgen" const roomId = 9796712 

And with that in place, we’re finally ready to connect with Chatkit. This will happen in the App component, and more specifically in the componentDidMount method. That’s the method you should use when connecting React.js components to API’s.

First we’ll create a chatManager:

 componentDidMount() { const chatManager = new Chatkit.ChatManager({ instanceLocator: instanceLocator, userId: userId, tokenProvider: new Chatkit.TokenProvider({ url: testToken }) }) 

… and then we’ll dochatManager.connect() to connect with the API:

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

This gives us access to the currentUser object, which is the interface for interacting with the API.

Note: As we’ll need to usecurrentUser later on, well store it on the instance by doing this.currentUser = ``currentUser.

Then, we’re calling currentUser.subscribeToRoom() and pass it our roomId and an onNewMessage hook.

The onNewMessage hook is triggered every time a new message is broadcast to the chat room. So every time it happens, we’ll simply add the new message at the end of this.state.messages.

This results in the app fetching data from the API and then rendering it out on the page.

This is awesome, as we now have the skeleton for our client-server connection.

Woohoo!

Step 7: Handling user input

The next thing we’ll need to create is the SendMessageForm component. This will be a so-called controlled component, meaning the component controls what’s being rendered in the input field via its state.

Take a look at the render() method, and pay special attention to the lines I’ve highlighted:

 class SendMessageForm extends React.Component { render() { return (    ) } } 

We’re doing two things:

  1. Listening for user inputs with the onChange event listener, so that we can

    trigger the handleChange method

  2. Setting the value of the input field explicitly using this.state.message

The connection between these two steps is found inside the handleChange method. It simply updates the state to whatever the user types into the input field:

 handleChange(e) { this.setState({ message: e.target.value }) } 

This triggers a re-render, and since the input field is set explicitly from the state using value={this.state.message}, the input field will be updated.

So even though the app feels instant for the user when they type something into the input field, the data actually goes via the state before React updates the UI.

To wrap up this feature, we need to give the component a constructor. In it, we’ll both initialize the state and bind this in the handleChange method:

 constructor() { super() this.state = { message: '' } this.handleChange = this.handleChange.bind(this) } 

We need to bind the handleChangemethod so that we’ll have access to the this keyword inside of it. That’s how JavaScript works: the this keyword is by default undefined inside the body of a function.

Step 8: Sending messages

Our SendMessageForm component is almost finished, but we also need to take care of the form submission. We need fetch the messages and send them off!

To do this we’ll hook a handleSubmit even handler up with the onSubmit event listener in the .

 render() { return (    ) } 

As we have the value of the input field stored in this.state.message, it’s actually pretty easy to pass the correct data along with the submission. We’ll

simply do:

 handleSubmit(e) { e.preventDefault() this.props.sendMessage(this.state.message) this.setState({ message: '' }) } 

Here, we’re calling the sendMessage prop and passing in this.state.message as a parameter. You might be a little confused by this, as we haven’t created the sendMessage method yet. However, we’ll do that in the next section, as that method lives inside the App component. So don’t worry!

Secondly, we’re clearing out the input field by setting this.state.message to an empty string.

Here’s the entire SendMessageForm component. Notice that we’ve also bound this to the handleSubmit method:

 class SendMessageForm extends React.Component { constructor() { super() this.state = { message: '' } this.handleChange = this.handleChange.bind(this) this.handleSubmit = this.handleSubmit.bind(this) } handleChange(e) { this.setState({ message: e.target.value }) } handleSubmit(e) { e.preventDefault() this.props.sendMessage(this.state.message) this.setState({ message: '' }) } render() { return (    ) } } 

Step 9: Sending the messages to Chatkit

We’re now ready so send the messages off to Chatkit. That’s done up in the App component, where we’ll create a method called this.sendMessage:

 sendMessage(text) { this.currentUser.sendMessage({ text: text, roomId: roomId }) } 

It takes one parameter (the text) and it simply calls this.currentUser.sendMessage().

The final step is to pass this down to the component as a prop:

 /* App component */ render() { return ( ) } 

And with that, we’ve passed down the handler so that SendMessageForm can invoke it when the form is submitted.

Step 10: Creating the Title component

To finish up, let’s also create the Title component. It’s just a simple functional component, meaning a function which returns a JSX expression.

 function Title() { return 

My awesome chat app

}

It’s a good practice to use functional components, as they have more constraints than class components, which makes them less prone to bugs.

The result

And with that in place you have your own chat application which you can use to chat with your friends!

Give yourself a pat on the back if you’ve coded along until the very end.

If you want to learn how to build further upon this example, then check out my free course on how to create a chat app with React here.

Thanks for reading and happy coding :)