Formación React

Paso a paso

1. 1 Programación con JavaScript orientado a objetos

   En aplicaciones que llevan más tiempo en desarrollo, es posible que encuentres proyectos React basados en clases, por lo que es muy importante que conozcas el paradigma Orientado a Objetos.

   Este paradigma nos ayuda a organizar nuestro código, haciéndolo más fácil de mantener y leer, lo cual es muy importante dentro de un equipo, independientemente del tamaño del proyecto.

   • 

     Vídeo Frameworks de Front End - Edición especial - YouTube

   • 

     Curso JavaScript: Introducción a la Orientación a Objetos

     08h

   Faça esse curso e:

   • Domina el paradigma de programación más utilizado en el mercado
   • Comprenda qué son las referencias y los objetos.
   • Utilice atributos, instancia y métodos de clase
   • Defina objetos usando constructores
   • Más información sobre encapsulamiento

   Mais detalhesdo curso JavaScript: Introducción a la Orientación a Objetos

   • 

     Curso JavaScript: Herencia e Interfaces en Orientación a Objetos

     08h

   Faça esse curso e:

   • Profundice tu conocimiento ne la orientación a objetos
   • Descubra qué es "DuckType"
   • Comprenda cuándo y cómo utilizar la herencia en sus proyectos
   • Conozca buenas prácticas de programación
   • Vea el código JavaScript moderno que puedes usar en tus proyectos

   Mais detalhesdo curso JavaScript: Herencia e Interfaces en Orientación a Objetos

   • 

     Vídeo ¿Por qué utilizar React? - YouTube

2. 2 Manejar class components

   Ahora entendamos cómo la biblioteca controla sus componentes y cómo lo haremos para no tener problemas de rendimiento o trabajo innecesario. Aprender a utilizar las herramientas complementarias hará que todo sea más sencillo.

   Con una base sólida de conocimientos, podemos comenzar nuestra inmersión en el mundo de React. En este primer momento, seguiremos un enfoque tradicional, creando componentes basados en clases y aprendiendo los conceptos principales de la biblioteca

   • 

     Curso React: Entienda cómo funciona la biblioteca

     08h

   Faça esse curso e:

   • Aprende a crear class components dentro de React
   • Descubre como pasar informaciones entre los componentes
   • Entienda como funciona el "this" dentro de Javascript
   • Crea páginas web con más facilidad
   • Conozca como React funciona para optimizar sus páginas

   Mais detalhesdo curso React: Entienda cómo funciona la biblioteca

   • 

     Curso React: Ciclo de vida de los componentes

     08h

   Faça esse curso e:

   • Aprende sobre el ciclo de vida de los componentes de React
   • Entiende los problemas de performance de la aplicación
   • Descubra como agregar el patrón de proyectos Observable en tus páginas
   • Conoce las diferentes maneras de cargar un SVG dentro de sitio
   • Compreende la diferencia entre Statefull y Stateless components

   Mais detalhesdo curso React: Ciclo de vida de los componentes

3. 3 Adopte un enfoque moderno

   Vimos cómo usar la Orientación a Objetos dentro del contexto de React y cuales son los principales conceptos de esta herramienta. Pero si queremos comenzar un nuevo proyecto hoy, usando todo lo que tiene la biblioteca, ¿es esa la única posibilidad?

   En las últimas versiones, la recomendación de la documentación es utilizar function components, una forma más sencilla de trabajar y que facilita compartir código. Junto con estos nuevos tipos de componentes, veremos hooks y cuál es la context API.

   ¿Y cómo funciona el ecosistema de React? ¿Qué otras herramientas podemos usar junto con él?

   Comenzaremos explorando este ecosistema con MaterialUI, una herramienta que nos ayuda mucho a la hora de prototipar ideas y que agiliza la creación del layout con React.

   • 

     Curso React: Function Components

     08h

   Faça esse curso e:

   • Aprende a implementar Hooks en tus proyectos de React
   • Entiende que es Material UI y como esta libreria te ayudara a tener una interfaz grafica mas rapidamente
   • Crea Function Components
   • Implementa validacion en tus formularios
   • Entiende los formularios controlados y no controlados

   Mais detalhesdo curso React: Function Components

   • 

     Curso React: Hooks, contextos y buenas prácticas

     12h

   Faça esse curso e:

   • Aprende más acerca de los Hooks
   • Crea una lógica de máquina de estados
   • Utiliza la context API para mejorar tu código
   • Descubre las mejores prácticas al trabajar con propiedades
   • Conoce las técnicas de validaciones de datos en formularios

   Mais detalhesdo curso React: Hooks, contextos y buenas prácticas

4. 4 Conoce el Ecosistema

   Ya hemos visto la base de cómo funciona React y entendemos en profundidad dónde actúa la biblioteca de Facebook en la creación de sitios web. Ahora aprendamos sobre las herramientas auxiliares, que nos facilitan mucho la vida al crear sitios web complejos, ejecutar pruebas automatizadas y extraer nuestro CSS de manera que no tengamos conflictos entre los componentes.

   • 

     Curso React Router: Navegación en una SPA

     08h

   Faça esse curso e:

   • Crea la navegación de una aplicación en React utilizando la biblioteca React Router Dom
   • Establece rutas en tu proyecto para tener una SPA
   • Haz tu aplicación dinámica con peticiones a una Rest API del blog de Petshop
   • Crea filtros para buscar posts de manera más eficiente

   Mais detalhesdo curso React Router: Navegación en una SPA

   • 

     Artigo React: componentes con Styled Components | Alura Cursos Online

   • 

     Curso React: Utilizando Styled Components

     08h

   Faça esse curso e:

   • Entiende los problemas de conflictos de nombres de clases con CSS
   • Descubre como utilizar Styled Components dentro de tu proyecto
   • Conoce cuando utilizar los estilos globales
   • Aprende a utilizar herencia dentro de los componentes
   • Compreende las ventajas de un proyecto bien organizado

   Mais detalhesdo curso React: Utilizando Styled Components

   • 

     Curso React: Automatizando pruebas en aplicaciones front-end

     08h

   Faça esse curso e:

   • Garantiza la funcionalidad de tu aplicación a través de pruebas automatizadas
   • Conozca las principales herramientas del mercado para pruebas en proyectos con React
   • Aprende a hacer pruebas descriptivas y consistentes
   • Garantiza la calidad de tu código y prepárate para trabajar en grandes proyectos
   • Adquiere las habilidades para convertirte en un profesional más competitivo(a) en el mercado de desarrollo

   Mais detalhesdo curso React: Automatizando pruebas en aplicaciones front-end