Reacciona su cabeza con estos cinco factores

Jan 17, 2026

Cómo

[dieciséis]

Aprendizaje Reacciona, la biblioteca JavaScript para crear interfaces de usuario de Facebook e Instagram parece nueces hasta que le dé una oportunidad. Las cosas se vuelven mucho más fáciles cuando entiendes cinco conceptos clave. Llamo a estos cinco turnos mentales. Son: Componentes, JSX, estado, métodos de ciclo de vida y flujo de datos de una sola vía.

01. Componentes

Los componentes son trozos de código que se pueden combinar para proporcionar una funcionalidad más compleja. Cuando divide su solicitud en componentes, hace que sea más fácil actualizar y mantener. En reacción, los componentes son aún más importantes: no solo los programan, diseñas tu aplicación pensando en cómo se encajan estos componentes.

Vamos a utilizar la interfaz a continuación como un ejemplo. Puede ver cómo se puede dividir en tres piezas: una caja para reservar una nueva cita, una vista de lista que le permite ver las citas existentes y un cuadro de búsqueda para mirarlos.

An image showing how easy it is the structure an app into reusable components.

En HTML, puede pensar en esta aplicación como una serie de elementos, como este:

 & lt; div id = "Petappointments" & GT;
  & lt; div class = "addappointments" & gt; & lt; / DIV & GT;
  & lt; div clase = "SearchAptments" & GT; / DIV & GT;
  & lt; div class = "listelpointments" & gt; & lt; / div & gt;
& lt; / DIV & GT;

Y eso también es lo que harías reaccionar. Usted crea una sola etiqueta (& lt; DIV id = "Petappointments" & GT;) que llama a un componente de PetAppAptments, que luego llama a los otros subcomponentes según sea necesario. Para pasar por un objeto de configuración como este, use el método de createSlass del objeto React.

 var maininterface = reacct.createclass ({
  Render: Función () {
    regreso (
      & lt; div classname = "interface" & gt;
        & lt; addappointment / & gt;
        & lt; SearchAptments / & GT;
        & lt; listelePointMents / & GT;
      & lt; / DIV & GT;
    )
  } // render
}); //Interfaz principal

Reactmeter.render (
  & lt; maininterface / & gt ;,
  document.getelementbyid ('Petappointments')
) // Render

Hay dos métodos de render. En la clase ManealInterface, declaramos los artículos que se enviarán al navegador y el método Reactdddom.Render reemplaza el & lt; DIV id = "Petappointments" & GT; / DIV & GT; / DIV; Elemento en su HTML con el código de reacción. Luego escribiríamos el código que maneja cada uno de nuestros tres subcomponentes.

Los componentes hacen que el código sea fácil de escribir y mantener. Una vez que aprenda a pensar y organice sus aplicaciones como una serie de componentes compuestos, la construcción de aplicaciones complejas se vuelve más sencilla.

02. JSX

Jsx Probablemente sea uno de los cambios de la mente más grande y una de las razones por las cuales la biblioteca parece tan rara. JSX es una extensión a JavaScript que le permite combinar el código XML con JavaScript.

Esto es una especie de lo que sucede con los idiomas de plantación como el bigote, que le permite incluir JavaScript dentro de HTML. Pero JSX se traduce (Transpiled) a JavaScript. Por lo tanto, no solo está construyendo una plantilla, sino una estructura que se convierte en una serie de declaraciones de JavaScript. A diferencia de los idiomas de plantilla, no tiene que interpretarse en tiempo de ejecución. Veamos un ejemplo.

 & lt; Li ClassName = "PET-Item Media" Key = {Índice} & GT;
  & lt; div classname = "Pet-Info Media-Body" & GT;
    & lt; div classname = "PET-Head" & GT;
      & lt; span classname = "name" & gt; {este.state.data [index] .petname} & lt; / span & gt;
      & lt; span classname = "apt-dation tire-derecha" & gt; {este.state.data [index] .aptdate} & lt; / span & gt;
    & lt; / DIV & GT;
    & lt; div claseName = "Nombre del propietario" & gt; & lt; span classname = "label-item" & gt; propietario: & lt; / span & gt;
    {este.state.data [Índice]. Nombre} y LT; / DIV & GT;
    & lt; div classname = "apt-notes" & gt; {este.state.data [índice] .aptnotes} & lt; / DIV & GT;
  & lt; / DIV & GT;
& lt; / li & gt;

Podemos usar este código para generar nuestras citas. Esto se parece mucho a usar un lenguaje de plantilla regular, por lo que es más que aprender algunas idiosincrasias menores sobre JSX, puede recogerlo rápidamente.

La parte impar sobre el uso de JSX no está aprendiendo el idioma en sí mismo; Se está acercando el hecho de que poner HTML dentro de su código de Javascript parece ... bueno, mal. Pero es muy bueno tener todo el código para cada componente que vive en un solo lugar.

03. Estado

An image displaying the user clicking on a red X – which is captured at the component level.

El tercer cambio de mente está aprendiendo a trabajar con el estado en reaccionar. El estado se almacena en el componente más alto de su solicitud y administra lo que está sucediendo en su aplicación. Hay un método especial llamado GetInitialState, donde puede configurar lo que sucede cuando se inicia su solicitud.

En mi aplicación de muestra, el estado inicial se configura como este:

 var maininterface = reacct.createclass ({
  GetInitialState: Función () {
    regreso {
      aptbodyvisible: falso,
      OrderBy: 'PetName',
      OrderDir: 'Asc',
      QueryText: ''
    } //regreso
  }, // getinitialstate

Parece que estoy estableciendo variables globales para mi solicitud, pero la modificación de estas variables en realidad controla cómo hacen los componentes. Si algo en mi aplicación cambia el valor de una variable, mis componentes se reiniciarán. Si el valor de WEDPBY cambia, por ejemplo, la lista de citas volverá a registrar.

Cuando escribe un componente, es fácil modificar el estado de la aplicación. La escritura de componentes es más fácil ya que solo está enfocado en lo que hace el componente. Aquí está el componente de la lista final de mi aplicación:

 Var reaccionar = requerir ('reaccionar');
var aptlist = react.createclass ({

  Handledelete: Función () {
    esto.props.ondelete (este.props.whihitem)
  },

  Render: Función () {
    regreso(
      & lt; li classname = "Pet-item media" & gt;
        & lt; div classname = "media-izquierda" & gt;
          & lt; Button ClassName = "PET-BORRAR BTN BTN-XS BTN-PAGER" ONCLICK = {ESTA. HANDEADLELETETE} & gt;
          & Lt; lapso className = "glyphicon glyphicon-remove" & gt; botón / & gt; & lt; / span & gt; & lt;
        & lt; / DIV & GT;
        & lt; div classname = "Pet-Info Media-Body" & GT;
          & lt; div classname = "PET-Head" & GT;
            & lt; span classname = "name" & gt; {este.props.singleitem.petname} & lt; / span & gt;
            & lt; span classname = "apt-dation tire-derecha" & gt; {este.props.singleitem.aptdate} & lt; / span & gt;
          & lt; / DIV & GT;
          & lt; div claseName = "Nombre del propietario" & gt; & lt; span classname = "label-item" & gt; propietario: & lt; / span & gt;
          {este.props.singleitem.ownNUMME} & lt; / DIV & GT;
          & lt; div classname = "apt-notes" & gt; {este.props.singleitem.aptnotes} & lt; / DIV & GT;
        & lt; / DIV & GT;
      & lt; / li & gt;
    ) // regreso
  } // render
}); // aptlist

Module.Exports = Aptlist;

El componente solo se refiere a dos cosas. Primero, mostrando la lista de citas basadas en el estado actual de la solicitud. Segundo, manejando un clic en uno de los rojos 'X's.

Al hacer clic en 'X' presionará un cambio al estado de la aplicación, lo que provocará que este componente se reinicie. No estoy preocupado por lo que está sucediendo con los datos, simplemente con la forma en que se mostrarán los datos actuales.

El componente de la lista solo se refiere al listar las cosas. No tiene que preocuparse por lo que está sucediendo en otro lugar. Es una forma brillante de construir solicitudes y una vez que obtiene la reunión, verá por qué es una forma superior de código.

04. Flujo de datos de una vía

An image showing the user inputting information into a search component, demonstrating how React will re-render specific data on the go.

El siguiente cambio mental es aprender a amar un flujo de datos de una vía. En reacción, el estado de su aplicación reside en el componente más alto. Cuando necesita cambiarlo en un subcomponente, crea una referencia al componente superior y manejándolo allí. Esto es un poco difícil de acostumbrarse. Aquí hay un ejemplo:

 Var reaccionar = requerir ('reaccionar');
var aptlist = react.createclass ({
  Handledelete: Función () {
    esto.props.ondelete (este.props.whihitem)
  },
  Render: Función () {
    regreso(
      & lt; li classname = "Pet-item media" & gt;
        & lt; div classname = "media-izquierda" & gt;
          & lt; Button ClassName = "PET-BORRAR BTN BTN-XS BTN-PAGER" ONCLICK = {ESTA. HANDEADLELETETE} & gt;
          & Lt; lapso className = "glyphicon glyphicon-remove" & gt; botón / & gt; & lt; / span & gt; & lt;
        & lt; / DIV & GT;
      & lt; / li & gt;
      ...
    ) // regreso
  } // render
}); // aptlist

Module.Exports = Aptlist;

Esta es una versión simplificada del módulo que crea una lista de citas. Nuestra lista tiene un botón de eliminación, que administramos a través de un manejador de eventos. Esta es una versión de reacción especial de ONCLICK. Nuestro manejador de eventos llama a la función Handledelete, que es local al submódulo. Nuestra función local simplemente crea una referencia a otra función en un objeto llamado apoyos. Los accesorios son cómo los módulos principales se comunican con los submódulos.

En el módulo principal, crearía un atributo a la etiqueta que está utilizando para representar el módulo. Se parece al pasar un atributo a una etiqueta HTML:

 & lt; aptlist ondelete = {este.deleteMessage} / & gt;

Y luego crea su propio método en el componente principal para manejar el cambio al estado de la aplicación. Mantener el estado en el módulo principal ayuda a que sus sub-módulos sean más eficientes. También es más fácil mantener el código porque la mayor parte de la acción ocurre en un solo lugar.

05. Métodos de ciclo de vida

Una de las mejores cosas de reaccionar es la forma en que administra la representación de sus módulos. Sus módulos no tienen que preocuparse por actualizar el DOM, solo de reaccionar al estado de su solicitud. Cuando el estado cambia, reaccionar reubicone los componentes de su aplicación. Lo hace creando su propia versión de la Dom llamada un DOM virtual.

Pero a veces necesitas poder hacer cosas en respuesta al estilo de vida. Introduzca los métodos de ciclo de vida. Estas son formas de solicitar reaccionar a manejar tareas en diferentes puntos en la ejecución de la aplicación.

Hay, por ejemplo, métodos de diseño de vida que le permiten cargar datos externos a través de solicitudes de AJAX:

 ComponentDidMount: Función () {
  esta.serverrequest = $ .get ('./ js / data.json', función (resultado) {
    var tempapts = resultado;
    este.setstate ({
      MyApLointMents: Tempapts
    }); // setstate
  } .bind (esto));
}, // componentdidmount

Aquí, ComponentDidMount le permite ejecutar algo después de que se complete la representación inicial. Este es un gran lugar para cargar contenidos de AJAX, configurar temporizadores, etc. Hay muchos otros métodos de ciclo de vida que le permiten atrapar la ejecución de la solicitud en diferentes puntos. Son necesarios debido a la DOM virtual de React, que es un gran paquete de tiempo al construir aplicaciones.

Reaccionar reaccionar

React requiere un replanteamiento de la forma en que trabaja con aplicaciones web, pero si se enfoca en dominar los beneficios de estos cinco turnos mentales, aprenderá rápidamente por qué la biblioteca se ha vuelto tan increíblemente popular y es una forma fantástica de construir interfaces.

Este artículo, ilustrado por Ray Villalobos, se publicó originalmente en la emisión 286 de Net, la revista más vendida del mundo para diseñadores web y desarrolladores web. Suscribirse a la red .

¿Quieres refinar aún más tus habilidades de reacción?

Image with the details on Kristijan Ristovski’s workshop – Learn How to Think in React – at Generate London on 19-21 September 2018.

Si está interesado en aprender más sobre reaccionar, asegúrese de que haya recogido su boleto para Generar Londres del 19 al 21 de septiembre de 2018. . Habiendo fundado reaccionar la academia para enseñar reaccionar en todo el mundo y lanzar. sizzyy.co y ok-google.io , Kristijan Ristovski entregará su taller: aprenderá a pensar en reaccionar, en la que explorará las mejores prácticas de reaccionar y enseñarle soluciones a problemas reales que puede encontrar en el proceso de construir una aplicación.

Generar Londres tiene lugar del 19 al 21 de septiembre de 2018. Obtenga su boleto ahora .

Artículos relacionados:

10 consejos de reactivos expertos que necesitas saber hoy
Crear una aplicación de panel de control con reaccionar
Construir un reproductor de música simple con reaccionar

Reacciona su cabeza con estos cinco factores

01. Componentes

02. JSX

03. Estado

04. Flujo de datos de una vía

05. Métodos de ciclo de vida

Reaccionar reaccionar

¿Quieres refinar aún más tus habilidades de reacción?

Cómo - Artículos más populares

Cómo convertir la fotografía en la ilustración

Lino Printmaking: una introducción

Cómo eliminar las arrugas en Photoshop

Crea un efecto de aberración cromático

Cómo usar herramientas digitales para crear una mirada dibujada a mano

Afila tus habilidades de dibujo

Cómo obtener más de las texturas digitales

Crea texturas listas para el juego utilizando el pintor de sustancias

Categorías