Lær at oprette en React chat-app på 10 minutter - React JS tutorial

I denne artikel viser jeg dig den nemmeste måde at oprette en chatapplikation på ved hjælp af React.js. Det gøres helt uden server-side-kode, da vi lader Chatkit API håndtere back-end.

Jeg antager, at du kender grundlæggende JavaScript, og at du har stødt lidt på React.js før. Bortset fra det er der ingen forudsætninger.

Bemærk: Jeg har også oprettet et gratis kursus i fuld længde om, hvordan du opretter en React.js chat-app her:

Hvis du følger denne vejledning, ender du med din helt egen chatapplikation i slutningen, som du derefter kan bygge videre på, hvis du vil.

Lad os komme igang!

Trin 1: Opdeling af brugergrænsefladen i komponenter

React er bygget op omkring komponenter, så den første ting, du vil gøre, når du opretter en app, er at opdele brugergrænsefladen i komponenter.

Lad os starte med at tegne et rektangel rundt om hele appen. Dette er din rodkomponent og den fælles forfader for alle andre komponenter. Lad os kalde det App:

Når du har defineret din rodkomponent, skal du stille dig selv følgende spørgsmål:

Hvilke direkte børn har denne komponent?

I vores tilfælde er det fornuftigt at give det tre underordnede komponenter, som vi kalder følgende:

  • Title
  • MessagesList
  • SendMessageForm

Lad os tegne et rektangel for hver af disse:

Dette giver os et godt overblik over de forskellige komponenter og arkitekturen bag vores app.

Vi kunne fortsætte med at spørge os selv, hvilke børn disse komponenter igen har. Således kunne vi have brudt brugergrænsefladen op i endnu flere komponenter, for eksempel ved at omdanne hver af meddelelserne til deres egne komponenter. Dog stopper vi her for enkelhedens skyld.

Trin 2: Opsætning af codebase

Nu skal vi konfigurere vores lager. Vi bruger den enklest mulige struktur: en * index.html * -fil med links til en JavaScript-fil og et typografiark. Vi importerer også Chatkit SDK og Babel, som bruges til at omdanne vores JSX:

Her er en Scrimba-legeplads med den endelige kode til vejledningen. Jeg vil anbefale dig at åbne den i en ny fane og lege med den, når du føler dig forvirret.

Alternativt kan du downloade Scrimba-projektet som en .zip-fil og køre en simpel server for at få det til at køre lokalt.

Trin 3: Oprettelse af rodkomponenten

Med lageret på plads kan vi begynde at skrive en React-kode, som vi vil gøre inde i * index.js * -filen.

Lad os starte med hovedkomponenten App. Dette vil være vores eneste "smarte" komponent, da den håndterer dataene og forbindelsen til API'en. Her er den grundlæggende opsætning til det (før vi har tilføjet nogen logik):

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

Som du kan se, er det simpelthen gør ud tre børn: den , og de komponenter.

Vi vil dog gøre det lidt mere komplekst, da chatbeskederne skal gemmes inde i denne komponents tilstandApp . Dette gør det muligt for os at få adgang til meddelelserne igennem this.state.messagesog dermed videregive dem til andre komponenter.

Vi begynder med at bruge dummy-data, så vi kan forstå datastrømmen i appen. Derefter bytter vi dette ud med ægte data fra Chatkit API senere.

Lad os oprette en DUMMY_DATAvariabel:

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

Derefter tilføjer vi disse data til tilstanden af Appog videresender dem til MessageListkomponenten som en prop.

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

Her initialiserer vi staten i USA, constructorog vi går også videre this.state.messagestil MessageList.

Bemærk, at vi kalder super()konstruktøren. Du skal gøre det, hvis du vil oprette en stateful komponent.

Trin 4: gengivelse af dummy-beskeder

Lad os se, hvordan vi kan gengive disse meddelelser i MessageListkomponenten. Sådan ser det ud:

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

Dette er en såkaldt dum komponent. Det tager en prop, messagesder indeholder en række objekter. Og så gengiver vi simpelthen textog senderIdegenskaberne fra objekterne.

Med vores dummy-data, der flyder ind i denne komponent, gengives det følgende:

Så nu har vi den grundlæggende struktur til vores app, og vi er også i stand til at gengive meddelelser. Godt arbejde!

Lad os nu erstatte vores dummy-data med faktiske meddelelser fra et chatrum!

Trin 5: Henter API-nøgler fra Chatkit

For at hente meddelelser skal vi oprette forbindelse til Chatkit API. Og for at gøre det skal vi skaffe API-nøgler.

På dette tidspunkt vil jeg opfordre dig til at følge mine trin, så du kan få din egen chatapplikation i gang. Du kan bruge min Scrimba-legeplads til at teste dine egne API-nøgler.

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:

Du kan kopiere ved hjælp af ikonet i højre side af 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.

Tak for læsning og glad kodning :)