- Cursos
- Tecnología
- Desarrollo Web
- Aprende React y después Next.js 13 con un blog práctico
Aprende React y después Next.js 13 con un blog práctico
Aprende Next.js de una manera muy práctica y sencilla con React a través de la creación de un blog cliente/servidor.
Descripción del curso
"React
Una biblioteca de JavaScript para crear interfaces de usuario
Declarativo
React hace que sea sencillo crear interfaces de usuario interactivas. Diseñe vistas simples para cada estado en su aplicación, y React actualizará y renderizará de manera eficiente solo los componentes correctos cuando cambien sus datos.
Las vistas declarativas hacen que su código sea más predecible y más fácil de depurar.
Basado en componentes
Cree componentes encapsulados que gestionen su propio estado y luego compóngalos para crear interfaces de usuario complejas.
Dado que la lógica del componente está escrita en JavaScript en lugar de plantillas, puede pasar fácilmente datos enriquecidos a través de su aplicación y mantener el estado fuera del DOM.
Aprenda una vez, escriba en cualquier lugar
No hacemos suposiciones sobre el resto de su pila de tecnología, por lo que puede desarrollar nuevas funciones en React sin tener que volver a escribir el código existente.
React también puede renderizar en el servidor usando Node y potenciar aplicaciones móviles usando React Native .
Un componente simple
Los componentes de React implementan un render()método que toma datos de entrada y devuelve lo que se muestra. Este ejemplo usa una sintaxis similar a XML llamada JSX. Se puede acceder a los datos de entrada que se pasan al componente a render()través de this.props.
Instalación
React ha sido diseñado desde el principio para una adopción gradual. Puede usar tanto o menos React como necesite. Ya sea que desee probar React, agregar algo de interactividad a una página HTML o iniciar una aplicación compleja impulsada por React, esta sección lo ayudará a comenzar.
Iniciar un nuevo proyecto React
Si está comenzando un nuevo proyecto, le recomendamos que utilice una cadena de herramientas o un marco. Estas herramientas brindan un entorno de desarrollo cómodo, pero requieren una instalación local de Node.js.
Elige tu propia aventura
React es una biblioteca que te permite organizar el código de la interfaz de usuario dividiéndolo en partes llamadas componentes. React no se ocupa del enrutamiento ni de la gestión de datos. Esto significa que hay varias formas de iniciar un nuevo proyecto de React:
Comience con un archivo HTML y una etiqueta de secuencia de comandos. Esto no requiere la configuración de Node.js, pero ofrece funciones limitadas.
Comience con una cadena de herramientas mínima y agregue más funciones a su proyecto a medida que avanza. (¡Excelente para aprender!)
Comience con un marco obstinado que tenga características comunes como la obtención de datos y el enrutamiento incorporados.
Agregar React a un sitio web
No tienes que construir todo tu sitio web con React. Agregar React a HTML no requiere instalación, toma un minuto y le permite comenzar a escribir componentes interactivos de inmediato.
Configuración del editor
Un editor correctamente configurado puede hacer que el código sea más claro para leer y más rápido para escribir. ¡Incluso puede ayudarte a detectar errores mientras los escribes! Si es la primera vez que configura un editor o está buscando mejorar su editor actual, tenemos algunas recomendaciones.
Herramientas de desarrollo de reacción
Utilice las herramientas de desarrollo de React para inspeccionar los componentes de React, editar accesorios y estados e identificar problemas de rendimiento.
Inicio rápido
¡Bienvenido a la documentación de React! Esta página le brindará una introducción al 80% de los conceptos de React que usará a diario.
Describiendo la interfaz de usuario
React es una biblioteca de JavaScript para renderizar interfaces de usuario (UI). La interfaz de usuario se construye a partir de pequeñas unidades como botones, texto e imágenes. React te permite combinarlos en componentes anidables y reutilizables. Desde sitios web hasta aplicaciones telefónicas, todo lo que aparece en la pantalla se puede dividir en componentes. En este capítulo, aprenderá a crear, personalizar y mostrar condicionalmente componentes de React."
NEXT.js
El Framework React para la Web
Utilizado por algunas de las empresas más grandes del mundo, Next.js le permite crear aplicaciones web completas mediante la ampliación de las funciones más recientes de React y la integración de potentes herramientas de JavaScript basadas en Rust para compilaciones más rápidas.
Next.js es un marco web de desarrollo front-end de React de código abierto creado por Vercel que habilita funcionalidades como la representación del lado del servidor y la generación de sitios web estáticos para aplicaciones web basadas en React. Es un marco listo para producción que permite a los desarrolladores crear rápidamente sitios JAMstack estáticos y dinámicos y es ampliamente utilizado por muchas grandes empresas.
Next.js es un marco de React que permite una serie de características adicionales, incluida la representación del lado del servidor y la generación de sitios estáticos. React es una biblioteca de JavaScript utilizada tradicionalmente para crear aplicaciones web renderizadas en el navegador del cliente con JavaScript . Sin embargo, los desarrolladores reconocen varios problemas con esta estrategia, como el hecho de no atender a los usuarios que no tienen acceso a JavaScript o lo tienen deshabilitado, posibles problemas de seguridad, tiempos de carga de la página considerablemente prolongados y que pueden perjudicar la optimización general del sitio en los motores de búsqueda. Los marcos como Next.js solucionan estos problemas al permitir que parte o la totalidad del sitio se represente en el lado del servidor antes de enviarlo al cliente. Next.js es uno de los componentes más populares disponibles en React.
Contenido del curso
Introducción a React
34:22- Presentación de React01:41
- Instalar el Script de React11:11
- Crear un nuevo proyecto con React04:10
- Agregar React a un documento HTML11:58
- IDE open source para React05:22
Inicio rápido con React
01:36:55- Crear un nuevo componente con React13:33
- Marcadp de JSX13:33
- Estilo personalizado11:41
- Renderización condicional con React14:49
- Renderizar una lista con React09:52
- Controlar un evento con React11:12
- Estados con React16:27
- Exportar e importar componentes con React05:48
Aprenderá NEXT.js a través de la creación de un Blog
03:20:40- Presentación de Next01:47
- Crea el primer proyecto de Next.09:55
- Editar la página inicial03:52
- Navegación en Next03:18
- Optimizar imagenes en Next06:35
- Metadados en Next08:55
- Incrustar Javascript externo con Next08:55
- Módulos de estilo en Next15:25
- Globalizar el estilo con Next17:48
- Mejorar el glamur con Next17:48
- Fundamentos Obtener datos del servidor con Next11:06
- Obtener datos con Next17:54
- Crear una ruta dinamica con Next09:11
- Implementar GetStaticPath07:24
- Implementar GetStaticProps19:37
- Aprenderá a renderizar el .md a HTML con una potente librería20:45
- Aprenderá a pulir la página de publicaciones.17:45
- Aprenderá a pulir la página de inicio.02:40
Producción de nuestro primer blog en Vercel
09:05- Publicar el repositorio del blog en GitHub y posteriormente en importarlo en Vercel09:05
Valoraciones
No hay ninguna valoración para este curso.
¿Por qué pagar por un curso cuando puedes tenerlos todos?
Prueba la Suscripción ahoraO quiero saber más
