No se puede hacer rock React sin una firme comprensión de los conceptos fundamentales que el lenguaje JavaScript proporciona, pero estas habilidades ES6 también son esenciales:
Variables y alcance
Entender cuándo y dónde tienes acceso a los datos que necesitas es fundamental. Las variables son el mecanismo incorporado en JavaScript que nos permite mantener los datos en la memoria y acceder a esos datos más tarde dentro de nuestras aplicaciones.
ES6 trajo consigo nuevas palabras clave que podemos usar para almacenar variables distintas de la tradicional palabra clave «var» (como «let» y «const»). Puedes elegir vivir según el principio de que a menos que necesites absolutamente «var», usa «const» hasta que tu linter te diga lo contrario, y luego por defecto «let».
Arreglos y objetos
Reaccionar sugiere un patrón que su «vista es una función de su estado». Aritméticamente dicho, eso es «v = f(s)», y algo que debes recordar al revisar tus habilidades en los fundamentos de la biblioteca.
Estado son los datos que queremos mostrar a los usuarios o los elementos de la memoria a los que podemos acceder para permitir que nuestros usuarios interactúen con nuestros datos. Mantenemos todos los datos que presentamos en un objeto llamado estado y accedemos a estos bits de datos a través de propiedades en este objeto estado. Así es como React recibió su nombre; cuando el estado cambia, la vista se actualiza (`v = f(s);`). Así que su vista «reacciona» a los cambios que se hacen en su objeto estado.
Deberías repasar cómo mutar los objetos y cambiar los valores de las propiedades de los mismos. No te preocupes, React se encarga del mecanismo a través de una ingeniosa función llamada «setState()` para que esto funcione a tu favor.
Métodos de arreglo
Una cosa es ser capaz de almacenar datos y acceder a ellos dentro de matrices y objetos. Otra es ser capaz de manipular esos datos adecuadamente. Los métodos de matrices de JavaScript incorporados son herramientas esenciales en la caja de herramientas de cada desarrollador. Enfócate en «mapa», «filtro» y «reducir» para un máximo impacto.
Funciones y funciones de las flechas
En Reactancia, cada componente que construyes es una función de una manera u otra. Recuerda que las «clases» son sólo «funciones constructivas» bajo el capó. Independientemente de la sintaxis que estés usando, cuando construyes «componentes funcionales» o «componentes de clase» estás usando alguna forma de función.
No subestime la importancia de estos fundamentos. Hay muchas prácticas hoy en día que se prestan a una programación funcional. La oportunidad de usar funciones de JavaScript para construir pequeños trozos de UI es como construir un conjunto de Lego sin instrucciones. Cada trozo de UI es una función encapsulada que contiene los datos de estado que sus elementos necesitan presentar, los elementos en sí mismos y la lógica de componente formal que necesita para usar esa lógica. Cada componente es un ladrillo de Lego, y depende de ti encajarlos todos juntos.
Manipulación de DOM y manejadores de eventos
En Reactancia, la manipulación de los elementos DOM reales es rara. Recuerden que ahora tenemos la abstracción JSX a nuestra disposición. El objeto evento nativo que se obtiene con la manipulación normal de DOM en React está realmente envuelto en lo que se llama el Evento Sintético. Asegúrate de que puedes adjuntar diferentes tipos de eventos a los elementos HTML como «onclicks», «onchange», «mouseenter», etc.
La palabra clave «esto»
La palabra clave «esto» es una de las características comúnmente mal utilizadas en JavaScript. Piensa en $0027esto$0027 como un puntero a un objeto. Por ejemplo, puedes usar la palabra clave «esto» para referirte a un objeto sin tener que referirte al nombre de ese objeto.
Funciones de orden superior y funciones de devolución de llamada
La idea de que las funciones pueden ser pasadas como argumentos -en el caso de las funciones de alto orden y las llamadas de retorno- es lo que impulsa el modelo de «entrada/salida» de la programación funcional.
Pasas a los manipuladores por todas partes en React. La mayoría de las veces los manipuladores que pasas están en forma de métodos que se encadenan a un objeto y se accede a ellos como propiedades, las cuales se encadenan en el prototipo. Sin embargo, hay momentos en los que necesitas salir del paradigma de los componentes de React o crear algunos tipos diferentes de componentes que extiendan algunas de las funcionalidades entre sí. Estos patrones se denominan comúnmente patrones avanzados de React y están encontrando su camino en el ámbito de las prácticas mejores/comunes. React te empujará a ser innovador y creativo mientras escalas con él.
Herencia prototípica y creación de objetos
React se presta a un paradigma de programación funcional en muchos aspectos. Sin embargo, trabaja en el mundo de las clases y, como resultado, en el mundo de la creación de objetos. Si entiendes los fundamentos de cómo funciona la cadena de prototipos en JavaScript, sabrás lo que necesitas sobre cómo conseguimos la herencia en JavaScript. Recuerda, que no hay clases tradicionales en JavaScript. La palabra clave de la clase es sólo azúcar sintáctico en la parte superior de la cadena del «prototipo de objeto» en JavaScript.
La palabra clave $0027clase$0027
Las clases de JavaScript no son lo mismo que las clases en un sentido de programación tradicional. Se crean clases que encapsulan la lógica de la plantilla, la lógica formal de JavaScript e incluso estilos conocidos como componentes. Estos componentes son los bloques de construcción de cualquier aplicación de React, y sólo hay dos maneras de escribir el componente básico: o bien declarándolo como una función o declarándolo como una clase.
Evalúa tu competencia con las clases asegurándote de que puedes responder:
- ¿Cómo establezco métodos en una clase?
- ¿Cómo puedo unir esos métodos?
- ¿Cómo accedo a las propiedades que se encuentran en el constructor?
- ¿Cómo creo objetos que se considerarían «hijos» de los objetos parentales?