Agradecemos a nuestros compañeros Gorka Laucirica y Miguel Angel Durán, que en un evento en directo en DesarrolloWeb y EscuelaIT nos informaron sobre todas estas características de React. Es muy sencillo que se pueda compartir, gracias a que los componentes curso de analista de datos son capaces de trabajar de manera independiente y que encapsulan funcionalidad para que no interaccionen con otros componentes si no se desea. Así se cargarán los archivos de un proyecto vacío pero con todas las dependencias de npm necesarias para comenzar.
- El manejador de eventos utilizado aquí es el manejador de eventos onClick.
- Tenga en cuenta que cuando se intenta devolver un número de elementos JSX que se extienden a lo largo de varias líneas, podemos devolverlo todo utilizando un conjunto de paréntesis () como se ve en el ejemplo anterior.
- Fue Jordan Walke, ingeniero de software en Facebook, quien ideó esta innovadora biblioteca de código abierto para facilitar el desarrollo de componentes reutilizables y eficientes.
- Este componente también tiene una variable Student que se renderizó, pero a medida que avancemos en el tutorial, utilizaremos un hook llamado useState Hook para crear nuestras variables de estado.
React Router, la librería estándar de React para el enrutamiento, proporciona múltiples formas de navegación programática segura entre componentes, sin necesidad de que el usuario haga clic en un enlace. La navegación programática https://coyotitos.com/un-curso-de-desarrollo-web-para-aprender-a-programar-desde-cero/ se refiere a los casos en que las líneas de código crean una acción que redirige a un usuario. Por ejemplo, las acciones de inicio de sesión y de registro navegan programáticamente a los usuarios a una nueva página web.
Se puede utilizar JavaScript en JSX utilizando claves
Si la lista actual tiene un key que no existía antes, React crea un componente. Si a la lista actual le falta un key que existía en la lista anterior, React destruye el componente previo. Los keys le dicen a React acerca de la identidad de cada componente lo cual permite a React mantener su estado entre re-renderizados. Si el key de un componente cambia, el componente será destruido y re-creado con un nuevo estado. Para recopilar datos de múltiples hijos, o tener dos componentes hijos comunicados entre sí, necesitas declarar el estado compartido en su componente padre.
- Al hacerlo, React puede aplicar actualizaciones a partes específicas del árbol de datos, lo que es más rápido que volver a renderizar la totalidad del árbol DOM.
- Los componentes pueden devolver elementos JSX válidos, así como cadenas de texto, números, booleanos, valores null, arreglos y fragmentos.
- React es ideal para construir interfaces de usuario atractivas y altamente personalizables que permitan a los usuarios navegar por productos, filtrar resultados y realizar compras de manera intuitiva.
- Esta representación se compara con la versión actual del DOM y aplica solo los cambios necesarios.
React fue creada por un equipo de desarrolladores de Facebook liderado por Jordan Walke. El principal objetivo de Walke era crear una herramienta que simplifique el desarrollo de interfaces de usuario complejas, reduciendo la complejidad y mejorando el rendimiento. Su trabajo se publicó en 2013 y desde entonces, React ha ganado popularidad en la comunidad de desarrolladores. Por esta razón, en el diseño web es fundamental crear una interfaz de usuario que favorezca la transmisión de información, la navegabilidad y la interacción.
Tutorial: Introducción a React
Qué es React y los motivos por los que es una estupenda alternativa para el desarrollo de interfaces de usuario, o aplicaciones web completas del lado del cliente. Aprender a crear aplicaciones web sencillas basadas en React desde cero y empieza a dominar una de las librerías más usadas creada por Facebook. Para resolver esto en la versión 16.8 veíamos cómo React presentó su API Hooks. Esto nos permite compartir la lógica de estado entre componentes sin reinventar la rueda o diseñar todo el bloque de código necesario. Aunque existen tecnologías que resuelven esto, el equipo detrás de React logró aumentar la velocidad de las actualizaciones mediante el uso de un DOM virtual. A diferencia de otros framework ReactJS usa un proceso de copia abstracta.
