Cómo construir una aplicación de chat React.js en 10 minutos

Cómo se verá la aplicación que construiremos.

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

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

Nota: También he creado un curso gratuito de larga duración sobre cómo crear una aplicación de chat React.js aquí:
Haz clic en la imagen para llegar al curso.

Si sigues este tutorial, terminarás con tu propia aplicación de chat al final, sobre la que luego podrás ampliar si lo deseas.

¡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 para todos los demás componentes. Llamémosla Aplicación:

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 darle tres componentes secundarios, que llamaremos lo siguiente:

  • Título
  • Lista de mensajes
  • SendMessageForm

Dibujemos un rectángulo para cada uno de estos:

Esto nos da una buena visión general sobre 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, al convertir cada uno de los mensajes en sus propios componentes. Sin embargo, nos detendremos aquí por simplicidad.

Paso 2: configurar la base de código

Ahora necesitaremos configurar nuestro repositorio. Utilizaremos 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 utilizan para transformar nuestro JSX:

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

Haga clic en la imagen para experimentar con toda la base de código.

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

Paso 3: crear el componente raíz

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

Comencemos con el componente principal, la aplicación. 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 para ello (antes de que hayamos agregado ninguna lógica):

La aplicación de clase extiende React.Component {
  
  render () {
    regreso (
      
                                
    )   }
}

Como puede ver, simplemente representa tres elementos secundarios: los componentes , <MessageList> y <SendMessageForm>.</p><p>Sin embargo, lo haremos un poco más complejo, ya que los mensajes de chat deberán almacenarse dentro del estado de este componente de la aplicación. Esto nos permitirá acceder a los mensajes a través de this.state.messages, y así pasarlos a otros componentes.</p><p>Comenzaremos con el uso de datos ficticios para que podamos entender el flujo de datos de la aplicación. Luego intercambiaremos esto con datos reales de la API de Chatkit más adelante.</p><p>Vamos a crear una variable DUMMY_DATA:</p><pre>const DUMMY_DATA = [   {     senderId: "perborgen",     texto: "¿quién ganará?"   },   {     senderId: "janedoe",     texto: "¿quién ganará?"   } ]</pre><p>Luego agregaremos estos datos al estado de la aplicación y los pasaremos al componente MessageList como accesorio.</p><pre>La aplicación de clase extiende React.Component {      constructor () {     súper()     this.state = {        mensajes: DUMMY_DATA     }   }      render () {     regreso (       <div className = "aplicación">         <Mensajes de la lista de mensajes = {this.state.messages} />         <SendMessageForm />      </div>     )   }</pre><pre>}</pre><p>Aquí, estamos inicializando el estado en el constructor y también estamos pasando this.state.messages a MessageList.</p><blockquote>Tenga en cuenta que estamos llamando a super () en el constructor. Debe hacerlo si desea crear un componente con estado.</blockquote><h3>Paso 4: renderizar mensajes ficticios</h3><p>Veamos cómo podemos mostrar estos mensajes en el componente Lista de mensajes. Así es como se ve:</p><pre>class MessageList extiende React.Component {   render () {     regreso (       <ul className = "message-list">         {this.props.messages.map (mensaje => {           regreso (            <li key = {message.id}>              <div>                {message.senderId}              </div>              <div>                {mensaje de texto}              </div>            </li>          )        })}      </ul>     )   } }</pre><p>Este es un llamado componente estúpido. Se necesita un accesorio, mensajes, que contiene una matriz de objetos. Y luego simplemente mostramos las propiedades de texto y senderId de los objetos.</p><p>Con nuestros datos ficticios que fluyen en este componente, representará lo siguiente:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822281416.png" /><p>Así que ahora tenemos la estructura básica para nuestra aplicación y también podemos enviar mensajes. ¡Gran trabajo!</p><p>¡Ahora reemplacemos nuestros datos ficticios con mensajes reales de una sala de chat!</p><h3>Paso 5: Obteniendo claves API de Chatkit</h3><p>Para obtener mensajes de recuperación, necesitaremos conectarnos con la API de Chatkit. Y para hacerlo, por supuesto, necesitamos obtener claves API.</p><p>En este punto, quiero alentarlo a que siga mis pasos para que pueda tener su propia aplicación de chat en funcionamiento. Puede usar mi área de juegos Scrimba para probar sus propias claves API.</p><p>Comience creando una cuenta gratuita aquí. Una vez que hayas hecho eso, verás tu panel de control. Aquí es donde crea nuevas instancias de Chatkit. Crea uno y dale el nombre que quieras:</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822282720.png" /><p>Luego, se lo dirigirá a su instancia recién creada. Aquí deberá copiar cuatro valores:</p><ul><li>Localizador de instancias</li><li>Proveedor de tokens de prueba</li><li>ID de la habitación</li><li>Nombre de usuario</li></ul><p>Comenzaremos con el Localizador de instancias:</p><img alt="Puede copiar utilizando el icono en el lado derecho del Localizador de instancias." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822284773.png" /><p>Y si se desplaza un poco hacia abajo, encontrará el Proveedor de tokens de prueba:</p><img alt="Nota: deberá marcar la casilla HABILITADO para acceder al token." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822287062.png" /><p>El siguiente paso es crear un Usuario y una Sala, que se realiza en la misma página. Tenga en cuenta que primero tendrá que crear un usuario y luego podrá crear una sala, que nuevamente le da acceso al identificador de sala.</p><img alt="Elija un nombre de usuario, cree una sala y luego copie el nombre de usuario y la identificación de la sala." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822290410.png" /><p>Así que ahora has encontrado tus cuatro identificadores. ¡Bien hecho!</p><p>Sin embargo, antes de regresar a la base de código, quiero que también envíe manualmente un mensaje desde el panel de Chatkit, ya que esto nos ayudará en el próximo capítulo.</p><p>Aquí se explica cómo hacerlo:</p><img alt="Enviar un mensaje desde la interfaz de usuario de Chatkit" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822292928.png" /><p>Esto es para que realmente tengamos un mensaje que presentar en el siguiente paso.</p><h3>Paso 6: Renderizando mensajes de chat reales</h3><p>Ahora volvamos a nuestro archivo index.js y almacenemos estos cuatro identificadores como variables en la parte superior de nuestro archivo.</p><p>Aquí están los míos, pero te animo a que crees los tuyos:</p><pre>const instanceLocator = "v1: us1: dfaf1e22-2d33-45c9-b4f8-31f634621d24"</pre><pre>const testToken = "https://us1.pusherplatform.io/services/chatkit_token_provider/v1/dfaf1e22-2d33-45c9-b4f8-31f634621d24/token"</pre><pre>const username = "perborgen"</pre><pre>const roomId = 9796712</pre><p>Y con eso en su lugar, finalmente estamos listos para conectarnos con Chatkit. Esto sucederá en el componente de la aplicación, y más específicamente en el método componentDidMount. Ese es el método que debe usar al conectar los componentes React.js a las API.</p><p>Primero crearemos un chatManager:</p><pre>componentDidMount () {   const chatManager = nuevo Chatkit.ChatManager ({     instanceLocator: instanceLocator,     userId: nombre de usuario,     tokenProvider: nuevo Chatkit.TokenProvider ({       url: testToken     })  })</pre><p>... y luego haremos dochatManager.connect () para conectarnos con la API:</p><pre>  chatManager.connect (). then (currentUser => {       currentUser.subscribeToRoom ({       roomId: roomId,       ganchos: {         onNewMessage: mensaje => {           this.setState ({             mensajes: [... this.state.messages, mensaje]           })         }       }     })   }) }</pre><p>Esto nos da acceso al objeto currentUser, que es la interfaz para interactuar con la API.</p><blockquote>Nota: como tendremos que usarcurrentUser más adelante, almacénelo en la instancia haciendo esto.currentUser = currentUser.</blockquote><p>Luego, estamos llamando a currentUser.subscribeToRoom () y le pasamos nuestro roomId y un enlace onNewMessage.</p><p>El enlace onNewMessage se activa cada vez que se transmite un nuevo mensaje a la sala de chat. Por lo tanto, cada vez que sucede, simplemente agregaremos el nuevo mensaje al final de este mensaje de estado.</p><p>Esto hace que la aplicación obtenga datos de la API y luego los muestre en la página.</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822294654.png" /><p>Esto es increíble, ya que ahora tenemos el esqueleto para nuestra conexión cliente-servidor.</p><p>Woohoo!</p><h3>Paso 7: manejo de la entrada del usuario</h3><p>Lo siguiente que necesitaremos crear es el componente SendMessageForm. Este será un llamado componente controlado, lo que significa que el componente controla lo que se representa en el campo de entrada a través de su estado.</p><p>Eche un vistazo al método render () y preste especial atención a las líneas que he resaltado:</p><pre>La clase SendMessageForm extiende React.Component {   render () {     regreso (       <formulario         className = "send-message-form">         <entrada           onChange = {this.handleChange}           valor = {this.state.message}           placeholder = "Escribe tu mensaje y presiona ENTER"           tipo = "texto" />       </form>     )   } }</pre><p>Estamos haciendo dos cosas:</p><ol><li>Escuchar las entradas del usuario con el detector de eventos onChange, para que podamos activar el método handleChange</li><li>Establecer el valor del campo de entrada explícitamente usando this.state.message</li></ol><p>La conexión entre estos dos pasos se encuentra dentro del método handleChange. Simplemente actualiza el estado a lo que sea que el usuario escriba en el campo de entrada:</p><pre>handleChange (e) {   this.setState ({     mensaje: e.target.value   }) }</pre><p>Esto desencadena una nueva representación, y dado que el campo de entrada se establece explícitamente desde el estado utilizando el valor = {this.state.message}, el campo de entrada se actualizará.</p><p>Entonces, aunque la aplicación se siente instantánea para el usuario cuando escribe algo en el campo de entrada, los datos realmente pasan por el estado antes de que React actualice la IU.</p><p>Para concluir esta característica, debemos darle al componente un constructor. En él, ambos inicializaremos el estado y vincularemos esto en el método handleChange:</p><pre>constructor () {     súper()     this.state = {        mensaje: ''     }     this.handleChange = this.handleChange.bind (this) }</pre><p>Necesitamos vincular el método handleChange para tener acceso a esta palabra clave dentro de él. Así es como funciona JavaScript: la palabra clave this no está definida por defecto dentro del cuerpo de una función.</p><h3>Paso 8: envío de mensajes</h3><p>Nuestro componente SendMessageForm está casi terminado, pero también debemos ocuparnos del envío del formulario. ¡Necesitamos buscar los mensajes y enviarlos!</p><p>Para hacer esto, conectaremos un controlador handleSubmit incluso con el detector de eventos onSubmit en <form>.</p><pre>render () {     regreso (       <formulario         onSubmit = {this.handleSubmit}         className = "send-message-form">         <entrada           onChange = {this.handleChange}           valor = {this.state.message}           placeholder = "Escribe tu mensaje y presiona ENTER"           tipo = "texto" />       </form>     )   }</pre><p>Como tenemos el valor del campo de entrada almacenado en this.state.message, en realidad es bastante fácil pasar los datos correctos junto con el envío. Simplemente haremos:</p><pre>handleSubmit (e) {   e.preventDefault ()   this.props.sendMessage (this.state.message)   this.setState ({     mensaje: ''   }) }</pre><p>Aquí, llamamos al accesorio sendMessage y pasamos this.state.message como parámetro. Puede que esté un poco confundido por esto, ya que todavía no hemos creado el método sendMessage. Sin embargo, lo haremos en la siguiente sección, ya que ese método se encuentra dentro del componente de la aplicación. ¡Así que no te preocupes!</p><p>En segundo lugar, estamos limpiando el campo de entrada estableciendo this.state.message en una cadena vacía.</p><p>Aquí está todo el componente SendMessageForm. Tenga en cuenta que también hemos vinculado esto al método handleSubmit:</p><pre>La clase SendMessageForm extiende React.Component {   constructor () {     súper()     this.state = {       mensaje: ''     }     this.handleChange = this.handleChange.bind (this)     this.handleSubmit = this.handleSubmit.bind (this)   }</pre><pre>  handleChange (e) {     this.setState ({       mensaje: e.target.value     })   }</pre><pre>  handleSubmit (e) {     e.preventDefault ()     this.props.sendMessage (this.state.message)     this.setState ({       mensaje: ''     })   }</pre><pre>  render () {     regreso (       <formulario         onSubmit = {this.handleSubmit}         className = "send-message-form">         <entrada           onChange = {this.handleChange}           valor = {this.state.message}           placeholder = "Escribe tu mensaje y presiona ENTER"           tipo = "texto" />       </form>     )   } }</pre><h3>Paso 9: Enviar los mensajes a Chatkit</h3><p>Ahora estamos listos, así que envíe los mensajes a Chatkit. Eso se hace en el componente de la aplicación, donde crearemos un método llamado this.sendMessage:</p><pre>sendMessage (texto) {   this.currentUser.sendMessage ({     texto,     roomId: roomId   }) }</pre><p>Toma un parámetro (el texto) y simplemente llama this.currentUser.sendMessage ().</p><p>El último paso es pasar esto al componente <SendMessageForm> como accesorio:</p><pre>/ * Componente de aplicación * /    render () {   regreso (     <div className = "aplicación">       <Título />       <Mensajes de la lista de mensajes = {this.state.messages} />       <SendMessageForm sendMessage = {this.sendMessage} />   ) }</pre><p>Y con eso, hemos pasado el controlador para que SendMessageForm pueda invocarlo cuando se envíe el formulario.</p><h3>Paso 10: Crear el componente Título</h3><p>Para terminar, también creemos el componente Título. Es solo un componente funcional simple, lo que significa una función que devuelve una expresión JSX.</p><pre>Título de la función () {   return <p class = "title"> Mi increíble aplicación de chat </p> }</pre><p>Es una buena práctica usar componentes funcionales, ya que tienen más restricciones que los componentes de clase, lo que los hace menos propensos a errores.</p><h3>El resultado</h3><p>¡Y con eso en su lugar, tiene su propia aplicación de chat que puede usar para chatear con sus amigos!</p><img alt="" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1568822296050.png" /><p>Date una palmadita en la espalda si has codificado hasta el final.</p><p>Si desea aprender cómo desarrollar este ejemplo, consulte mi curso gratuito sobre cómo crear una aplicación de chat con React aquí.</p><p>¡Gracias por leer! Mi nombre es Per, soy cofundador de Scrimba y me encanta ayudar a las personas a aprender nuevas habilidades. Sígueme en Twitter si deseas recibir notificaciones sobre nuevos artículos y recursos.</p></div><div class="neighbor-articles"><h4 class="ui header">Ver también</h4><a href="/article/how-to-act-on-a-first-date-9db824/" title="Cómo actuar en una primera cita">Cómo actuar en una primera cita</a><a href="/article/i-will-not-tell-you-how-to-lose-weight-but-c076f5/" title="No te diré cómo perder peso pero ...">No te diré cómo perder peso pero ...</a><a href="/article/how-to-export-the-entire-ethereum-blockchain-to-csv-in-2-hours-for-10-eff0ef/" title="Cómo exportar toda la cadena de bloques de Ethereum a CSV en 2 horas por $ 10">Cómo exportar toda la cadena de bloques de Ethereum a CSV en 2 horas por $ 10</a><a href="/article/lifehack-how-to-get-r-m-almost-free-6283b2/" title="Lifehack: cómo obtener R / m (casi) gratis">Lifehack: cómo obtener R / m (casi) gratis</a><a href="/article/how-to-protect-and-develop-your-children-at-the-same-time-7e0e68/" title="Cómo proteger y desarrollar a sus hijos al mismo tiempo">Cómo proteger y desarrollar a sus hijos al mismo tiempo</a></div></main><div class="push"></div></div><footer style="height:50px">ceadesc.org<!-- --> © <!-- -->2019<!-- --> <a href="https://et.ceadesc.org/article/how-to-build-a-react-js-chat-app-in-10-minutes-668d0a" title="https://ceadesc.org">ceadesc.org</a></footer></div></div></div><script src="https://cdn.jsdelivr.net/npm/cookieconsent@3/build/cookieconsent.min.js"></script><script> window.cookieconsent.initialise({ "palette": { "popup": { "background": "#eaf7f7", "text": "#5c7291" }, "button": { "background": "#56cbdb", "text": "#ffffff" } }, "showLink": false }); </script><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script> (adsbygoogle = window.adsbygoogle || []).push({ google_ad_client: "ca-pub-3845662922897763", enable_page_level_ads: true }); </script></body></html>