🚀 TODO lo que me hubiera gustado que me hubieran EXPLICADO cuando EMPECÉ con REACT

Summary

El script aborda el tema de React y los desafíos que enfrentan los desarrolladores que provienen de JavaScript. Se discuten problemas comunes, como la dificultad para dejar atrás prácticas de JavaScript al trabajar con React, y se ofrecen consejos sobre cómo abordar la manipulación del DOM, el uso de estados y la creación de componentes. El presentador comparte su experiencia personal y da un vistazo a conceptos clave como el uso de map, filter y spread en React, subrayando la importancia de la práctica y la adaptación al enfoque de React para superar los errores y mejorar en el desarrollo de aplicaciones.

Takeaways

• 😀 Los desarrolladores con experiencia en JavaScript pueden encontrar dificultades al aprender React debido a diferencias en el enfoque y prácticas.
• 🔍 En React, no se utilizan selectores de JavaScript como `querySelector` para seleccionar elementos del DOM, sino que se prefiere el uso de `useState` y otros hooks.
• 🛠 No se pueden modificar directamente los elementos del DOM en React; en su lugar, se deben realizar cambios a través del estado (state) utilizando funciones como `setState`.
• 🎨 La manipulación de estilos y contenido en React se realiza a través del estado, lo que significa que cualquier cambio en el contenido o estilo debe reflejarse en una variable de estado.
• ♻️ En lugar de bucles como `for` o `forEach` en JavaScript, React utiliza `map` para iterar sobre arrays y renderizar componentes.
• 📋 El uso de condiciones en React se maneja con operadores ternarios en lugar de estructuras de control como `if` o `switch` dentro del JSX.
• 🚫 No se pueden utilizar métodos de mutación de arrays como `splice`, `push` o `pop` en el estado de React; se recomienda el uso de `filter` y otras funciones para clonar y modificar arrays.
• 🔄 El estado en React es inmutable; para actualizarlo, se deben crear nuevas copias de los objetos o arrays y utilizar funciones como `setEstado`.
• 🔑 El atributo `key` en React es crucial para identificar elementos en listas y evitar problemas de renderización; suele utilizarse el ID único de cada elemento.
• 🛑 La práctica es fundamental para dominar React; los errores son parte del aprendizaje y ayudan a comprender mejor las diferencias con JavaScript convencional.

Q & A

¿Cuál es el principal problema que enfrenta la gente que viene de JavaScript al trabajar con React?

El principal problema es que a menudo se intenta hacer las cosas con un enfoque de JavaScript en lugar de adaptarse al enfoque de React, lo que puede llevar a errores y frustración.

¿Por qué no se deben utilizar selectores de JavaScript como `querySelector` o `getElementById` en React?

En React, no se manipula el DOM directamente. En su lugar, se utiliza un estado interno y se renderiza el componente de acuerdo con ese estado, por lo que no es necesario seleccionar elementos del DOM.

¿Cómo se debe modificar el contenido o la propiedad de un elemento en React si no se puede hacer directamente como en JavaScript?

En React, se deben utilizar variables de estado (state) para controlar el contenido y las propiedades de los elementos. Al modificar estas variables, el componente se actualizará automáticamente para reflejar los cambios.

¿Qué es 'setState' en React y cómo se relaciona con la modificación del estado?

'setState' es un método en React que se utiliza para actualizar el estado de un componente. Cuando se llama a 'setState', React re-renderiza el componente con los nuevos valores del estado.

¿Por qué no se pueden utilizar bucles como 'for' o 'forEach' dentro del JSX en React?

El JSX es una representación de los elementos que se renderizarán en el DOM. Los bucles deben ser representados utilizando el método 'map' en un array para iterar sobre los elementos y devolver un nuevo array de elementos a renderizar.

¿Cómo se pueden manejar eventos en React y por qué es diferente a JavaScript?

En React, los eventos se manejan utilizando props para pasar funciones a los componentes hijos. Estas funciones se ejecutan en respuesta a acciones del usuario, y no se asignan directamente en los elementos del JSX como en JavaScript.

¿Qué es 'Just Red' y cómo se relaciona con la selección de elementos en React?

'Just Red' es un ref que se utiliza para seleccionar y manipular elementos en el DOM en React. Sin embargo, su uso es excepcional y no es la forma habitual de trabajar con elementos en React.

¿Por qué es importante entender el uso de 'map' en React?

El uso de 'map' es crucial en React porque permite iterar sobre un array y devolver un nuevo array de elementos a renderizar, lo cual es una forma común de crear listas o colecciones de elementos en el JSX.

¿Cómo se manejan las condiciones en el retorno de un componente en React?

En React, en lugar de usar estructuras de control como 'if' o 'switch' en el retorno de un componente, se utilizan operadores ternarios o el método 'condicional rendering' para devolver elementos basados en condiciones específicas.

¿Cómo se pueden eliminar elementos de un array en el estado de un componente en React?

Para eliminar elementos del estado en React, no se pueden usar métodos como 'splice' o 'shift' directamente. En su lugar, se puede usar el método 'filter' para crear una copia del array sin el elemento a eliminar y luego actualizar el estado con esta copia filtrada.

¿Por qué es importante la práctica en lugar de solo ver videos para aprender React?

La práctica es esencial para aprender React porque permite a los desarrolladores entender profundamente cómo funciona el framework y cómo solucionar problemas reales. Ver videos es útil, pero la verdadera comprensión y habilidad vienen de la experiencia práctica.