ReactJS: de cero a experto. JSX
HolaMundo
Resumen
En este vídeo aprenderás cómo funciona JSX en React y cuáles son sus similitudes y diferencias con el HTML convencional. Analizaremos la estructura básica de un componente, la importación de módulos y librerías, y reglas fundamentales como el uso de 'className' en lugar de 'class' o la necesidad de cerrar correctamente todas las etiquetas, incluso las que en HTML se dejarían abiertas.
Capítulos
- 0:00Introducción a similitudes entre JSX y HTML
- 0:15Análisis de las importaciones de React
- 1:03Entendiendo exportaciones y llaves
- 2:39Importación de estilos y activos
- 2:57Definiendo un componente mediante clases
- 3:19La importancia del método render
- 3:56Diferencias de class contra className
- 4:50Sintaxis de clases en el header
- 5:03Uso dinámico de imágenes con variables
- 5:22Inyección de contenido mediante llaves
- 5:39Estructura final del bloque H1 y párrafos
- 6:14Reglas estrictas para el cierre de etiquetas
- 6:32Manejo de errores del compilador
Temas tratados
- Importación de React y Component
- Exportación por defecto vs nombrada
+5 temas más (contenido completo al seguir el canal)
Extracto de la transcripción
hola chicos y ahora vamos a ver las similitudes que tienen js x con html así que vamos al archivo app js vamos a poder ver de que las primeras líneas tienen un importante react component import logo import app css qué quiere decir esto la primera línea indica de que nosotros vamos a importar la librería de react que si bien nosotros no la estamos utilizando en ninguna parte del código hecho aparece solamente acá esto es un texto no hace referencia a esta misma dependencia es necesaria de que nosotros cada vez de que vayamos a hacer algún componente en react eso lo vamos a saber porque vamos a tener una clase que va a extender de componer tenemos que tener sí o sí importado react a su vez también tenemos que importar component esta sintaxis lo que quiere decir es importar por defecto lo que se está exportando en la librería de react pero además quiero que me export es la clase component q…