Proyecto y tecnologías que usaremos

Este curso es brutal!

Wooow! Precisamente ayer termine de ver una pequeña serie de de videos acerca de graphQL y apollo de Miguel en youtube los cuales pueden ser una excelente introducción.

Click aqui para ver los videos 🚀

Tecnologías a utilizar:

• Webpack: empaquetador (https://webpack.js.org/) El curso pueden tomarlo en esta liga: https://platzi.com/clases/webpack/
• Babel: transpilar nuestro javascript (https://babeljs.io/)
• styled-components: Permite olvidarse totalmente de las clases, así no se tiene colisión con el nombre de las clases (https://www.styled-components.com/)
• Linter (standard JS): Reglas preestablecidas para asegurarnos la máxima calidad ()
• GraphQL https://graphql.org/. El curso pueden tomarlo en esta liga: https://platzi.com/clases/graphql/
• React Apollo https://www.apollographql.com/docs/react/
• Reach Router https://reach.tech/router
• Lighthouse: Auditoria de performance y PWA https://developers.google.com/web/tools/lighthouse/?hl=es
• Cypress: Testing de aplicación End To End https://www.cypress.io/
• React-Helmet: SEO https://github.com/nfl/react-helmet
• Workbox: Service worker https://developers.google.com/web/tools/workbox/
• Now: Despliegue de aplicación https://zeit.co/now. El curso pueden tomarlo en esta liga: https://platzi.com/clases/deploy-now/

Este curso se ve robusto. Vamos a por todo!!

Desde diciembre de 2020, Now se encuentra deprecado y ahora se llama Vercel. Sigue siendo gratuito para proyectos personales. Mucha más info aquí: https://vercel.com/

Mi gente bella de Platzi, ya hay un curso disponible sobre despliegue de aplicaciones. Este que nos muestran de Now ya no existe, ahora se llama Vercel y lo tocan en el curso, por si lo quieren ir a ver
Curso: https://platzi.com/clases/despliegue-apps/

style-components utiliza sass?

Proyecto y tecnologías que usaremos
Utilizaremos como empaquetador y transpilador:
• Webpack (Empaquetador)
• Babel (Transpilador)
Estilado con CSS en JS con:
• styled-components (Librería que nos va a permitir olvidarnos de las clases, nos va a generar hashes únicos para cada estilo en nuestros elementos)
Como linter utilizaremos:
• Standard JS (Linder que nos da unas reglas preestablecidas para asegurar la calidad del proyecto)
Para fetching (obtención) de datos:
• GraphQL (Lenguaje de consulta para API y un tiempo de ejecución para completar esas consultas con sus datos existentes. Proporciona una descripción completa y comprensible de los datos en su API, brinda a los clientes el poder de pedir exactamente lo que necesitan y nada más, facilita la evolución de las API a lo largo del tiempo y habilita poderosas herramientas para desarrolladores)
• React Apollo (Es un stack completo para JS compuesto por herramientas para crear un servidor de GraphQL (graphql-tool), un servidor standalone (graphql-server), y un cliente compatible con todos los frameworks de frontend (apollo-client))
Para el enrutado de la SPA utilizaremos:
• Reach Router (Es una versión simplificada y mejor optimizada de React Router, su creador es Ryan Florence el mismo creador de React Router. API)
Para las buenas prácticas utilizaremos:
• Lighthouse (Es una herramienta automatizada de código abierto diseñada para mejorar la calidad de tus apps web. Se tiene una auditoria de la performance como de progresive webpack)
• Cypress (Es esa herramienta o framework, que nos permite simular esa interacción de los usuarios con el browser. Para hacer el testing de nuestra aplicación End To End. Las pruebas punta a punta o End To End, son vitales para la construcción de aplicaciones Web modernas de calidad. Nos permite disponer de un set de pruebas incremental de manera ágil y robusta. Permiten integrarse en un ciclo de integración continua para implementar pruebas automáticas).
Por último haremos SEO, PWA y Deploy con:
• React Helmet (Podemos añadir SEO. Componente de la NFL que nos permite ir cambiando el title y otros metas del head dentro de nuestros componentes del react).
• Workbox (Es una librería creada por Google que simplifica de forma notable la escritura de service workers mediante una API potente y sencilla)
• Progressive Web App (Son páginas web que se comportan como aplicaciones nativas. Está destinado a funcionar en cualquier plataforma que use un navegador compatible con los estándares. La funcionalidad incluye trabajar sin conexión, notificaciones push y acceso al hardware del dispositivo, lo que permite crear experiencias de usuario similares a las aplicaciones nativas en dispositivos móviles y de escritorio. Permite difundir contenido sobre cualquier dispositivo: móvil, tablet, desktop.)
• Deply con Now (Now es un producto de Zeit, que te permite hacer deploy con solo hacer push de tu código. Deploy es el proceso que se requiere para que el código se traslade a un entorno de acceso público donde se espera quede accesible para el usuario. Si estás trabajando en un sitio web, hacer deploy significa generar todos los archivos minificados, transpilar el JavaScript, correr las pruebas, agregar el tag de la versión y subir los archivos al servidor que previamente configuraste e instalaste, o a un contenedor en la nube que orquestaste. El punto final del sitio web es ese espacio para dejarlo en producción, es decir, listo para ser usado por el cliente.)

Una pregunta, por que no usar eslint en lugar de Standard JS?

Ahora sí, espero que después de escuela de javascript ya estar listo para este curso, estoy emocionadamente con miedo.

Dios!! Completísimo, actualizadísimo e interensantísimo, mas profesor motivadísimo. Me mola cuando un curso es tan vanguardista!! Focus mode on.

Now ahora es vercel y reach router ya ni se usa :v

ahora usamos React Router ya que los creadores de estos s eunieron para hacer React Router V6

Esto se pone muy bueno…

¿Usamos Reach Router para que conozcamos otra opcion ademas React Router o porque la consideran mejor? @midudev

Now hoy en día es Vercel

Este curso es ORO

Pero que buen curso se ve este. Espero que no esté desactualizado porque veo comentarios de hace 2 años.

Madre, y yo pensaba que configurar react con webpack era lo máximo jajajajaja

Now = Vercel

Reach Router excelente, algo que quería aprender.

Vaya, este curso es la hostia!!

No he estudiado platzi desde hace un mes (Estuve trabajando) y ya hay como 20000 cosas nuevas por aprender.

Pienso que es unos de los videos con el indice mas completo que he visto aca en platzi, con el entusiasmo de Leonidas jeje.

Uffff, se escucha bestial 🚀…

Este curso ta potente!.

Me sono a publicidad, esta increible jaja

Que completo va a estar, un reto seguramente, pero uno que vale la pena tomar 😃

Genial

Las tecnologias usadads en este curso son muy interesantes.

Grande Miiduuu!

promete este curso

Excelente curso de React

Wowwww está introducción de lo que veremos en el curso es lo más motivador que había visto!! ME ENCANTAAAAAA

Midudev que edad tienes ? 😮

Suscrito a tu canal Miguel
Cualquier divulgador de desarrollo es bienvenido

Increíble la cantidad de tecnologías que usare en el curso, muy emocionado 😃

buena app

Iniciando el curso!

Wooooooow me emocione e n la presentacion del curso y el docente pero esto se ve de otro nivelll !!

vamos a por todooooooo !

🤯🤯🤯🤯

Es increible todo lo que hay que aprender! Me encanta

Me encanta el entusiasmo con que transmite este chaval sus conocimientos. Menudo crack que es.

Excelente!!!

Se nota que este curso está muy bien planificado

zarpado el curso!

Brutal, espero encontrar alternativas al desarrollo con estas herramientas

j

¡Esto pinta Genial!

Muy bueno. Gracias!!

Holy… que hype que me generó 🤯
Vamos a hacer algunos de los cursos que recomienda primero 🎉