Aprenda a crear una aplicación de chat React en 10 minutos - tutorial de React JS

En este artículo, le mostraré la forma más fácil posible de crear una aplicación de chat usando React.js. Se hará completamente sin código del lado del servidor, ya que dejaremos que la API de Chatkit maneje el back-end.

Supongo que conoce JavaScript básico y que se ha encontrado con un poco de React.js antes. Aparte de eso, no hay requisitos previos.

Nota: También he creado un curso completo gratuito sobre cómo crear una aplicación de chat React.js aquí:

Si sigue este tutorial, terminará con su propia aplicación de chat al final, que luego puede desarrollar más si lo desea.

¡Empecemos!

Paso 1: dividir la interfaz de usuario en componentes

React se basa en componentes, por lo que lo primero que debe hacer al crear una aplicación es dividir su interfaz de usuario en componentes.

Comencemos dibujando un rectángulo alrededor de toda la aplicación. Este es su componente raíz y el ancestro común de todos los demás componentes. Llamémoslo App:

Una vez que haya definido su componente raíz, debe hacerse la siguiente pregunta:

¿Qué hijos directos tiene este componente?

En nuestro caso, tiene sentido asignarle tres componentes secundarios, que llamaremos lo siguiente:

  • Title
  • MessagesList
  • SendMessageForm

Dibujemos un rectángulo para cada uno de estos:

Esto nos da una buena descripción de los diferentes componentes y la arquitectura detrás de nuestra aplicación.

Podríamos haber seguido preguntándonos qué hijos tienen nuevamente estos componentes. Por lo tanto, podríamos haber dividido la interfaz de usuario en aún más componentes, por ejemplo, convirtiendo cada uno de los mensajes en sus propios componentes. Sin embargo, nos detendremos aquí en aras de la simplicidad.

Paso 2: configurar la base de código

Ahora necesitaremos configurar nuestro repositorio. Usaremos la estructura más simple posible: un archivo * index.html * con enlaces a un archivo JavaScript y una hoja de estilo. También estamos importando Chatkit SDK y Babel, que se utiliza para transformar nuestro JSX:

Aquí hay un patio de recreo de Scrimba con el código final del tutorial. Te recomiendo que lo abras en una nueva pestaña y juegues con él cuando te sientas confundido.

Alternativamente, puede descargar el proyecto Scrimba como un archivo .zip y ejecutar un servidor simple para ponerlo en funcionamiento localmente.

Paso 3: creación del componente raíz

Con el repositorio en su lugar, podemos comenzar a escribir código de React, lo que haremos dentro del archivo * index.js *.

Vamos a empezar con el componente principal, App. Este será nuestro único componente "inteligente", ya que manejará los datos y la conexión con la API. Aquí está la configuración básica (antes de que agreguemos alguna lógica):

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

Como se puede ver, simplemente hace tres hijos: el , y los componentes.

Sin embargo, lo haremos un poco más complejo, ya que los mensajes de chat deberán almacenarse dentro del estado de este Appcomponente. Esto nos permitirá acceder a los mensajes a través this.state.messagesy así pasarlos a otros componentes.

Comenzaremos usando datos ficticios para que podamos comprender el flujo de datos de la aplicación. Luego, cambiaremos esto con datos reales de la API de Chatkit más adelante.

Creemos una DUMMY_DATAvariable:

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

Luego, agregaremos estos datos al estado de Appy los pasaremos al MessageListcomponente como un accesorio.

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

Aquí, estamos inicializar el estado en el constructory también estamos pasando this.state.messagesa MessageList.

Tenga en cuenta que estamos llamando super()al constructor. Debe hacer eso si desea crear un componente con estado.

Paso 4: procesamiento de mensajes ficticios

Veamos cómo podemos representar estos mensajes en el MessageListcomponente. Así es como se ve:

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

Este es un componente llamado estúpido. Se necesita un accesorio, messagesque contiene una serie de objetos. Y luego simplemente representamos las propiedades texty senderIdde los objetos.

Con nuestros datos ficticios fluyendo hacia este componente, generará lo siguiente:

Así que ahora tenemos la estructura básica de nuestra aplicación y también podemos procesar mensajes. ¡Gran trabajo!

¡Ahora reemplacemos nuestros datos ficticios con mensajes reales de una sala de chat!

Paso 5: Obtener claves API de Chatkit

Para obtener mensajes de recuperación, necesitaremos conectarnos con la API de Chatkit. Y para hacerlo, necesitamos obtener claves API.

En este punto, quiero animarte a que sigas mis pasos para que puedas poner en marcha tu propia aplicación de chat. Puede usar mi área de juegos de Scrimba para probar sus propias claves API.

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 :)