Los cinco dedos de la muerte de React. Domina estos cinco conceptos, luego domina React.

Hace unos años, mi amigo Sean comenzó a contarme cómo esta nueva biblioteca front-end llamada React iba a apoderarse de la web. Al principio lo descarté como simplemente otra moda marco. Pero luego comencé a escuchar sobre React cada vez más, hasta el punto en que sentí que ignorarlo ya no era una opción.

Quizás estés en la misma posición en la que yo estaba: has estado escuchando sobre React de izquierda a derecha, pero en realidad sentarte y aprenderlo se siente como una tarea.

La buena noticia es que puede resumir todo lo que necesita saber sobre React en cinco conceptos clave .

No me malinterpretes, esto no significa que pueda convertirte en un maestro de React al instante. Pero al menos comprenderá todos los conceptos principales, si decide participar.

Los cinco conceptos clave son:

  1. Componentes
  2. JSX
  3. Props y estado
  4. La API de componentes
  5. Tipos de componentes

Antes de comenzar, tenga en cuenta que originalmente aprendí React a través de los cursos de Wes Bos y he incluido algunos enlaces de afiliados a ellos. Siempre que ha sido posible, también he incluido enlaces a recursos gratuitos.

Oh, ¿y mi amigo Sean? Desde entonces, ha pasado a cosas mucho más innovadoras. Después de todo, React es tan 2015.

Concepto # 1: Cómo funcionan los componentes de React

Lo primero que debe saber sobre React es que se trata de componentes . Su base de código de React es básicamente una gran pila de componentes grandes que llaman componentes más pequeños.

Pero, ¿qué es un componente, preguntas? Un ejemplo perfecto de un componente es el común ct> HTML element. Not only does it come with its own visual output (the grey box, text label, and downward arrow that make up the element itself) — it also handles its own opening and closing logic.

Now imagine being able to build your own self-contained custom ct>, with its own style and behavior:

Well, that’s exactly what React lets you do. A React component is a single object that not only outputs HTML like a traditional template would, but also includes all the code needed to control that output.

In practice, the most common way to write React components is as an ES6 class containing a render method that returns HTML. (There’s also a super-secret functional way, but you’ll have to wait until concept #4 to learn about it):

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

Concepto # 2: Cómo funciona JSX

Como puede ver, el enfoque de componentes significa que tanto el código HTML como el JavaScript viven en el mismo archivo. El arma secreta de React para lograr esta alianza impía es el lenguaje JSX (donde "X" significa "XML").

JSX puede parecer incómodo al principio, pero te acostumbras bastante rápido.

Sí, lo sé. A todos nos han enseñado a mantener una fuerte separación entre HTML y JavaScript. Pero resulta que relajar un poco estas reglas puede hacer maravillas en la productividad de su front-end.

Por ejemplo, dado que ahora tiene todo el poder de JavaScript a su disposición, así es como puede mostrar la fecha actual insertando un fragmento de JavaScript en su HTML usando {...}:

class MyComponent extends React.Component {
 render() { return 

Today is: {new Date()}

; }
}

Esto también significa que utilizará JavaScript simple para ifdeclaraciones o bucles, en lugar de algún tipo de sintaxis específica de la plantilla. El operador ternario de JavaScript es especialmente útil aquí:

class MyComponent extends React.Component {
 render() { return 

Hello {this.props.someVar ? 'World' : 'Kitty'}

; }
}

Y, por cierto, si necesitas repasar los puntos más nuevos de la sintaxis de JavaScript, te recomiendo ES6 para Everyone de Wes Bos (si te gustan los videos) o Practical ES6 de Nicolas Bevacqua (si prefieres leer).

Concepto # 3: Cómo funcionan los apoyos y el estado

Tal vez se haya estado preguntando de dónde this.props.someVarproviene la variable anterior.

Si alguna vez ha escrito una línea de HTML, probablemente esté familiarizado con atributos HTML como <; a> tag’s href. En React, los atributos se conocen como accesorios (abreviatura de "propiedades"). Los accesorios son la forma en que los componentes se comunican entre sí.

class ParentComponent extends React.Component {
 render() { return ; }
}
class ChildComponent extends React.Component {
 render() { return 

And then I said, “{this.props.message}”

; }
}

Debido a esto, el flujo de datos de React es unidireccional : los datos solo pueden pasar de los componentes principales a sus hijos, no al revés.

A veces, sin embargo, un componente necesita reaccionar a datos que no provienen de un componente principal (como la entrada del usuario, por ejemplo). Y aquí es donde entra el estado .

Una buena metáfora para entender la diferencia entre utilería y estado sería el Etch-A-Sketch. A diferencia de cosas como el color del cuerpo y la posición del dial de la tableta Etch-A-Sketch ( accesorios ), el dibujo en sí ( estado ) no es una propiedad inherente de Etch-A-Sketch. Es solo el resultado temporal de la entrada del usuario.

Tenga en cuenta que el estado de un componente también se puede pasar a sus propios hijos como accesorio . Puede pensar en esto como un gran río que fluye cuesta abajo, con el enrutador, la capa de datos y varios componentes, cada uno de los cuales agrega su propio flujo de datos para formar el estado principal de la aplicación.

Dentro de un componente, el estado se administra mediante la setStatefunción, que a menudo se llama dentro de un controlador de eventos:

class MyComponent extends React.Component {
 handleClick = (e) => { this.setState({clicked: true}); }
 render() { return Click me; }
}

En la práctica, la gran mayoría de los datos en una aplicación React serán un apoyo . Solo cuando necesite aceptar la entrada del usuario, usará el estado para manejar el cambio.

Tenga en cuenta que estamos usando una flecha gruesa aquí para encargarnos de atar al handleClickcontrolador. Puedes aprender más sobre esta técnica aquí.

Concepto # 4: Cómo funciona la API de componentes

Ya hemos mencionado rendery setState, que son parte de un pequeño conjunto de métodos de API de componentes. Otro útil es el constructor, que puede usar para inicializar su estado y vincular métodos.

Aparte de estas tres funciones, React también proporciona un conjunto de devoluciones de llamada que se activan en varios puntos durante el ciclo de vida del componente (antes de cargar, después de cargar, después de desmontar, etc.). A menos que esté haciendo un vudú avanzado de React, probablemente casi nunca tendrá que preocuparse por esto.

Si esta sección parece corta, es porque aprender React se trata en realidad mucho más de dominar la programación y los conceptos arquitectónicos en lugar de aprender un conjunto de aburridos métodos API. ¡Esto es lo que lo hace tan refrescante!

Concepto # 5: Cómo funcionan los tipos de componentes

Hemos visto cómo usar clases para definir un componente:

class MyComponent extends React.Component {
 render() { return 

Hello World!

; }

}

Y también hemos hablado de los métodos de componentes compatibles con estas clases. ¡Ahora olvídate de ellos! Cada vez más, la gente escribe componentes de React como componentes funcionales .

Un componente funcional es una función que toma un propsobjeto como argumento y devuelve un montón de HTML. Casi como una plantilla tradicional, con la diferencia clave de que aún puede usar cualquier código JavaScript que necesite dentro de esa función:

const myComponent = props => {
 return 

Hello {props.name}! Today is {new Date()}.

}

La consecuencia de utilizar la sintaxis de componentes funcionales es que pierde el acceso a los métodos de componentes de los que acabamos de hablar. Pero resulta que en la práctica eso está perfectamente bien, ya que la gran mayoría de sus componentes probablemente no los necesitarán.

Por cierto, uno de estos métodos es setState, y esto significa que los componentes funcionales no pueden tener estado. Por esa razón, a menudo se los denomina componentes funcionales sin estado .

Dado que los componentes funcionales requieren mucho menos código repetitivo, tiene sentido usarlos siempre que sea posible. Por esta razón, la mayoría de las aplicaciones de React contienen una combinación saludable de ambas sintaxis.

Tenga en cuenta que también hay una tercera sintaxis heredada que usa la createClassfunción. Pero cualquiera que lo use debería sentirse avergonzado y llamado con apodos por atreverse a seguir usando patrones de codificación de hace 18 meses:

var Greeting = React.createClass({ render: function() { return 

Hello, {this.props.name}

; }
});

Concepto # 6: Cómo funcionan los roles de componentes

OK, mentí. En realidad, hay seis cosas, no cinco. Pero qué puedo decir, la película no se llama "Six Fingers Of Death". Aunque ahora que lo pienso, parece que sería una película bastante genial, probablemente involucrando a algún tipo de maestro de kung-fu alienígena que busca venganza.

Pero volvamos al tema que nos ocupa. Ahora vienen los aburridos conceptos arquitectónicos de los que estaba hablando. Entonces, si nada de esto tiene sentido, no dudes en volver una vez que hayas tenido la oportunidad de jugar un poco más con React.

Después de usar React por un tiempo, la gente comenzó a ver aparecer dos "sabores" distintos de código en sus componentes: un sabor estaba relacionado con la lógica de la interfaz de usuario , como mostrar y ocultar cosas. Y el otro tenía que ver con la lógica de los datos , como cargar datos desde su servidor.

Esto llevó a la distinción entre contenedores y componentes de presentación (también conocidos como componentes " inteligentes " y " tontos "). Los componentes del contenedor deben manejar sus datos, pero, y esta es la parte importante, no su interfaz de usuario. Los componentes de presentación son todo lo contrario.

En otras palabras, en el ejemplo clásico de la lista de tareas pendientes, un componente cargará los datos y luego pasará esos datos a un componente diferente que estará a cargo de generar el marcado HTML real y manejar los cambios de estado local.

Esto es muy similar al patrón de vista / controlador con el que podría estar familiarizado en sus días de desarrollador de back-end. ( ¿miembro de Rails? ¿miembro de Django? )

La distinción contenedor / presentación fue popularizada en esta publicación de blog por Dan Abramov (el creador de Redux), y recomiendo revisarla si quieres profundizar más.

Componentes de orden superior

Antes de terminar, deberíamos hablar un poco sobre un tipo de componentes de contenedor conocidos como componentes de orden superior (a menudo abreviados como HoC).

Un HoC es un componente que puede envolver alrededor de otro componente para pasarle accesorios especiales, y generalmente se crea utilizando una función de fábrica de componentes de orden superior . Tenga en cuenta que la gente comúnmente se refiere a la función en sí misma como un "HoC", lo que puede no ser 100% correcto técnicamente, pero no es un gran problema en la práctica.

Como ejemplo, llamar a la withRouterfunción de fábrica de React Router en nt>will wrap it in a new ponent)/> component that passes the Router prop to the afor e-mentioned &lt;MyComponent>.

You can think of a HoC function as a golf caddie that follows their golfer around and hands them the club they need it. By themselves, the caddie can’t actually do anything with the golf clubs. They’re just there to give the golfer access to more tools.

HoCs are a very powerful concept. For example, the Recompose library even lets you handle state changes through HoCs. In other words, you can now manage state without having to involve any ES6 class-based components.

With HoC composition becoming so common, it seems like React might be moving away from the ES6 class syntax and more towards a purely functional approach. Interesting times!

Recap

So let’s recap what we’ve just learned:

  • A React codebase is made up of components.
  • These components are written using JSX.
  • Data flows from parent to children, except when it comes to state, which originates inside a component.
  • Components possess a small set of lifecycle and utility methods.
  • Components can also be written as pure functions.
  • You should keep data logic and UI logic in separate components.
  • Higher-order components are a common pattern for giving a component access to new tools.

Believe it or not, we’ve just covered 90% of the knowledge used by a React developer on a daily basis. No matter how abstract or obscure the pattern, everything in React can always be boiled down to functions and props.

Once you truly understand this, React will stop being scary. You’ll be able to see patterns in the code, understand new codebases at a glance, and only then will you be able to proudly proclaim:

“Pfff! React is so 2015!”

Going Further

If I’ve managed to convince you that React isn’t so bad, you might want to take a stab at learning it properly. If so, I can’t recommend the React for Beginners video course enough. It’s how I learned React myself, and it’s actually just been updated to cover all the cool new stuff like functional stateless components:

If you don’t want your hard-earned dollars to finance the nefarious React lobby (I heard Dan Abramov is onto his third yacht), you can also learn for free by checking out this huge list of React resources.

And if you need to put all this newly-acquired knowledge in practice by contributing to a cool React open-source project, check out Telescope Nova. It’s the easiest way to quickly create a full-stack React + GraphQL app, complete with user accounts, forms, and data loading out of the box. And did I mention we’re looking for contributors?

Finally, if you’ve enjoyed this article, please share it and recommend it (that little green heart just below). And please let me know on Twitter what you’d like me to write about next!