De Frontend a Full-Stack: Añadiendo Funcionalidades Sin Añadir Tiempo

certificate
Recording and certification are available to Multipass and Full ticket holders only
Please login if you have one.
Rate this content
Bookmark

Estamos todos aquí porque amamos React, y lo amamos porque es un sistema simple e intuitivo para crear sitios web hermosos e interactivos. ¿Qué pasaría si construir aplicaciones full-stack pudiera ser igual de simple e intuitivo? ¡Gestionar datos y recursos en tus aplicaciones web no tiene que ser complejo y llevar mucho tiempo! Aprende cómo conectar bases de datos, APIs y otros servicios a tus aplicaciones en minutos para crear experiencias interactivas en tiempo real para tus usuarios. En esta sesión, comenzarás con una página en blanco y terminarás con una aplicación digna de portafolio y las habilidades que necesitas para construir tu próxima aplicación.

This workshop has been presented at React Summit US 2024, check out the latest edition of this React Conference.

Jen Person
Jen Person
95 min
10 Dec, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
Comencemos configurando una aplicación en la consola de Squid. Squid AI es una plataforma de desarrollo que ofrece facilidad de uso y capacidades de IA. Aprende cómo construir aplicaciones full-stack más rápido usando Squid. Explora las características y la documentación para agregar funcionalidad, ver y gestionar datos, actualizar y eliminar elementos en la base de datos, y asegurar tu aplicación. Implementa triggers, schedulers y web hooks para automatización y comunicación asincrónica. Descubre cómo agregar funcionalidad de IA con los agentes de IA de Squid. Configura una nueva aplicación, agrega un agente de IA y proporciona contexto para las consultas. Construye y consulta tareas en la base de datos usando agentes de IA. Los controles de acceso y las opciones de precios están disponibles en la consola de Squid. Únete a la comunidad de Discord para obtener soporte y compartir tus proyectos.
Video transcription and chapters available for users with access.

Watch more workshops on topic

Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
JSNation 2023JSNation 2023
174 min
Desarrollando Blogs Dinámicos con SvelteKit & Storyblok: Una Masterclass Práctica
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
Esta masterclass de SvelteKit explora la integración de servicios de terceros, como Storyblok, en un proyecto SvelteKit. Los participantes aprenderán cómo crear un proyecto SvelteKit, aprovechar los componentes de Svelte y conectarse a APIs externas. La masterclass cubre conceptos importantes incluyendo SSR, CSR, generación de sitios estáticos y despliegue de la aplicación usando adaptadores. Al final de la masterclass, los asistentes tendrán una sólida comprensión de la construcción de aplicaciones SvelteKit con integraciones de API y estarán preparados para el despliegue.
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
GraphQL Galaxy 2021GraphQL Galaxy 2021
161 min
Masterclass de GraphQL en la Nube con Neo4j Aura, Next.js y Vercel
WorkshopFree
William Lyon
William Lyon
En este masterclass construiremos y desplegaremos una aplicación de GraphQL de pila completa utilizando Next.js, Neo4j y Vercel. Utilizando un grafo de conocimiento de artículos de noticias, primero construiremos una API de GraphQL utilizando las rutas de API de Next.js y la Biblioteca de GraphQL de Neo4j. A continuación, nos enfocaremos en el front-end, explorando cómo utilizar GraphQL para la obtención de datos con una aplicación de Next.js. Por último, exploraremos cómo agregar personalización y recomendación de contenido en nuestra API de GraphQL para servir artículos relevantes a nuestros usuarios, luego desplegaremos nuestra aplicación en la nube utilizando Vercel y Neo4j Aura.

Tabla de contenidos:
- Visión general de Next.js y cómo empezar con Next.js
- Rutas de API con Next.js y construcción de una API de GraphQL
- Utilizando la Biblioteca de GraphQL de Neo4j
- Trabajando con Apollo Client y obtención de datos de GraphQL en Next.js
- Despliegue con Vercel y Neo4j Aura
El Viaje Desde el Desarrollo Frontend con React al Desarrollo Fullstack con Next.js
React Advanced 2024React Advanced 2024
143 min
El Viaje Desde el Desarrollo Frontend con React al Desarrollo Fullstack con Next.js
Workshop
Eric Burel
Eric Burel
Únete a nosotros en el viaje desde el desarrollo frontend con React al desarrollo fullstack con Next.js. Durante esta masterclass, seguiremos el tutorial oficial de Next.js Learn con Eric Burel, entrenador profesional y autor de NextPatterns.dev. Juntos, configuraremos un sitio web con Next.js y exploraremos sus características del lado del servidor para construir aplicaciones de alto rendimiento.
- Introducción: descubriendo Next.js y su filosofía centrada en el servidor- Creación de un sitio web multipágina perfectamente optimizado- Entendiendo las capacidades de renderizado del lado del servidor de Next.js- Conclusión: cómo Next.js te empodera como desarrollador de React
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
Vue.js London Live 2021Vue.js London Live 2021
115 min
Construyendo aplicaciones GraphQL de pila completa con Hasura y Vue 3
WorkshopFree
Gavin Ray
Gavin Ray
El ecosistema frontend avanza a un ritmo frenético. Este masterclass tiene como objetivo equipar a los participantes con una comprensión del estado del ecosistema Vue 3 + GraphQL, explorando ese ecosistema - prácticamente y a través del desarrollo de aplicaciones de pila completa.

Tabla de contenidos
- Los participantes utilizarán Hasura para construir una API GraphQL en tiempo real respaldada por Postgres. Juntos recorreremos su consumo desde un frontend y haremos que el frontend sea reactivo, suscrito a los cambios de datos.
- Además, analizaremos las herramientas comúnmente utilizadas en el stack Vue GraphQL (como Apollo Client y Urql), discutiremos algunas alternativas menos conocidas y abordaremos los problemas frecuentemente encontrados al comenzar.
- Se describirán varios patrones para gestionar datos con estado y sus compensaciones durante el masterclass, y se mostrará una implementación básica para cada patrón discutido.
Nivel del masterclass

NOTA: No se requiere experiencia previa con GraphQL, pero puede ser útil para ayudar a la comprensión. Se cubrirán los fundamentos.
De cero a producción con GraphQL y React de extremo a extremo con el equipo de Hasura
React Summit 2020React Summit 2020
162 min
De cero a producción con GraphQL y React de extremo a extremo con el equipo de Hasura
Workshop
Allison Kunz
Allison Kunz
Hasura es un motor de GraphQL de código abierto y gratuito que puede ayudar a potenciar su adopción de GraphQL, ya sea para una aplicación nueva o existente. El masterclass cubrirá:
- Una introducción básica a GraphQL- Uso de GraphQL para realizar operaciones CRUD desde una aplicación React- Configuración de controles de acceso a los datos- Creación de componentes en tiempo real en React utilizando suscripciones de GraphQL- Envolver las API REST existentes con servidores GraphQL que se pueden implementar en plataformas sin servidor, y luego fusionarlos en un único punto final utilizando Esquemas Remotos- Activación de funciones sin servidor en eventos de la base de datos- En resumen, veremos cómo los desarrolladores de React pueden adoptar GraphQL en tiempo real y sin servidor.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
React Summit Remote Edition 2021React Summit Remote Edition 2021
43 min
RedwoodJS: El marco de aplicación React Full-Stack de tus sueños
Top Content
Redwood JS is a full stack React app framework that simplifies development and testing. It uses a directory structure to organize code and provides easy data fetching with cells. Redwood eliminates boilerplate and integrates Jest and Storybook. It supports pre-rendering and provides solutions for authentication and deployment. Redwood is a cross-client framework that allows for building web and mobile applications without duplicating work.
Patrones de Arquitectura Remix
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Patrones de Arquitectura Remix
Top Content
This Talk introduces the Remix architecture patterns for web applications, with over 50% of participants using Remix professionally. The migration from single page applications to Remix involves step-by-step refactoring and offers flexibility in deployment options. Scalability can be achieved by distributing the database layer and implementing application caching. The backend for frontend pattern simplifies data fetching, and Remix provides real-time capabilities for collaborative features through WebSocket servers and Server-SendEvents.
Remixando tu Stack en un Espacio de Trabajo Monorepo
Remix Conf Europe 2022Remix Conf Europe 2022
22 min
Remixando tu Stack en un Espacio de Trabajo Monorepo
Let's talk about remixing our stack in a Monorepo workspace, which allows for incremental migration and is suitable for transitioning from a Next.js app to a remix stack. Refactoring may be required for feature-specific and Next.js-coupled components, but the process is simplified because the features have already been moved out. Configuring the Monorepo to reference packages locally and linking them to the Next.js application is necessary. Nx provides benefits like fast refreshing, pre-configured setups, and features like local and remote caching.
Full-stack JS hoy: Fastify, GraphQL y React
React Summit 2022React Summit 2022
25 min
Full-stack JS hoy: Fastify, GraphQL y React
The Talk discusses building a modern full stack application with JavaScript and GraphQL, emphasizing the importance of prioritizing the critical 20% of challenges. It highlights the benefits of building a productive and transparent tech stack with modularity and developer-friendly tools. The use of PostGrey as a relational database and Fastify as a server framework is recommended. The Talk also explores the advantages of using Mercurius and Urql for GraphQL implementation. Additionally, it mentions the use of React, SSR, and Fastify Vite for full-stack SSR and modular components. The Talk concludes by mentioning the advantages of this stack for complex functionality and the possibility of using Fastify in a serverless infrastructure.
Guía para desarrolladores frontend sobre Web3
React Summit 2022React Summit 2022
22 min
Guía para desarrolladores frontend sobre Web3
This talk covers an introduction to Web 3 and smart contracts, including deployment and bytecode compilation. It also discusses interacting with blockchain wallets, using RPC endpoints and block explorers, and accessing smart contract data. The talk emphasizes the use of ABIs and JavaScript libraries like ethers for interacting with smart contracts. It mentions the shift in mindset from HTTP requests to using ABI code and libraries for front-end development in Web 3. The talk concludes by mentioning Web3UI and tools like PolygonScan and Etherscan for building on the blockchain.