Conviertete en el mejor programador de React Js

Pequeńa introducción de la sección

Code sandbox es una brillante aplicación que funciona en el navegador para poner en práctica pequeńos ejemplos y experimentos, vamos a escribir un poco de vanilla Javascript para conocer la sintaxis de futuras lecciones.

Vamos a crear un "Hola Mundo" desde cero, entiendo el detrás de cortina de React

Vamos a crear nuestro primer componente reusable, ademas entender un poco acerca de estilo dentro de JSX.

React utiliza JSX en vez HTML, luce muy similar pero en realidad es Javascript, el cual luego es convertido en HTML cuando accede el DOM, en esta lección hablaremos sobre esto

Veamos como podemos aplicar estilos en clases CSS dentro nuestro JSX para de esta manera darle un toque de diseńo a nuestro pequeńo ejemplo hecho con React Js

Estudiaremos casos más avanzados con JSX

Podemos agregar funciones dentro de JSX con nuestra propiedad children, veamos como

En Javascript tenemos diferentes tipos de objetos, como: string, numbers, object, boolean, entre otros. Veremos como escribir código mas seguro con Prop Types y React Js.

Estudiaremos a fondo como React renderiza elementos de manera eficiente en el DOM, como realiza comparaciones inteligentes entre elementos, entre otras cosas

Daremos vistazo de lo que vamos a construir a continuación en esta sección con React Js, lo cual va ser una aplicación que se encarga de mostrar una lista de lecciones, el usuario tendrá la habilidad de completar o "descompletar" lecciones, el porcentaje de las mismas se visualizará através de una barra de progreso.

Create react app, es probable la mejor herramienta cuando queremos iniciar un proyecto con React Js, explicaremos un poco de que se trata en esta lección

State es probablemente el concepto más importante de React Js, en esta lección veremos en profundidad de que se trata, tanto en teoría, como en práctica.

Agregaremos la funcionalidad para poder completar y "descompletar" lecciones en nuestra aplicación, atravez de nuestra función onComplete()

Le daremos un toque mas elegante a nuestra lista de lecciones con algunas clases CSS

Crearemos una barra de progreso para representar gráficamente el porcentaje de las lecciones completadas.

Mejoraremos el aspectos de nuestro componente agregando CSS, el componente sera flexible para utilizar en otros lugares, si es necesario.

Expandiremos nuestra aplicación para tener la habilidad de completar todas las lecciones através de un link.

Agregaremos una imagen de fondo para que nuestra aplicación luzca prácticamente para ser lanzada al mercado.

Escribir custom hooks con React Js, es probablemente una las funcionalidades mas poderosas de la librería, ya que puedes extraer y reusar lógica en varios lugares de tu aplicación, haciendo tu código mas flexible y dinámico, aquí construiremos nuestro primer hooks personalizado.

Luego de la explicación previa, pasaremos aplicaremos nuestro custom hook useArray en la aplicación que venimos construyendo, además de expandirlo con un nuevo método.

Introducción a useEffect, presentación mas ejemplo básico y comparaciones con componente de clase.

Eventos en Javascript son muy importantes, entenderemos como React Js maneja los mismo, y como los componentes rederizan cuando son accionados

En la clase anterior quedo pendiente la solución de "bug" relacionando con nuestro componente clase, aquí lo solucionaremos, notando diferencias en cantidad y calidad de código.

El orden en React Js renderiza elementos es importantes, aquí explicaremos un poco acerca de esto.

Construiremos un cuadro medallas olímpicas, mostraremos una lista de países ordenadas por la mayor cantidad de medallas de oro, el usuario podrá actualizar las medallas de cada país, integraremos un servidor para el backend con la ayuda de una librería llamada json-server, entre otras cosas, esta va ser una aplicación y divertida de construir.

Necesitamos una especie de base datos para poder manejar nuestra lista de países de manera dinámica, lo lograremos con la ayuda de json-server, una librería fácil de usar, la cual crea un servidor ficticio para este tipo de tarea

Haremos un llamado a nuestra data con la ayuda de useEffect(), aprenderemos también evadir derrames de memoria con el segundo argumento de este hook o enganche

Mejoraremos el aspecto de nuestro cuadro de medalla con una tabla de HTML dentro de JSX

Esta lección vamos a ordenar nuestro cuadro de medalla, según el número de medallas de oro de cada paíz

Comenzaremos a escribir un formulario para en un futuro lograr actualizar las medallas de cada país

En la carrera de un front end, son muchos los formularios que vamos a construir, antes de continuar con nuestra aplicación, debemos hacer una pausa para explicar como funcionan los formularios en el mundo de React Js

Aprenderemos como hacer funcionar nuestros inputs correctamente en nuestro formulario con el evento onChange de React JS

Luego de tener nuestro formulario funcionando correctamente, es hora de finalmente actualizar las medallas de cada país através de una promesa de método PUT y el evento onSubmit()

La suma de medallas actualmente es incorrecta cuando actualizamos las medallas de cada país, en esta lección, vamos a corregir ese detalle importante

Convertiremos nuestra promesa fetchCountries en un custom hook para extraer lógica y quizás reusarlo en otra aplicación

El hook o enganche useReducer() es una alternativa con respecto a useState, sobretodo cuando tenemos states "complejos" o grandes, en esta lección veremos de que se trata

En cualquier aplicación son muchos los botones que vamos a utilizar, en esta lección crearemos un Button component que puede ser reusado de diferentes maneras.

Es difícil saber cual país fue sufrió cambios al momento de pisar el botón actualizar, mejoraremos este aspecto agregando una animación de CSS cuando esto ocurre

Memo es una herramienta que evita "rerenders" innecesarios, en esta lección la aplicaremos en un par de lugares para así mejorar el "performance" o rapidez de nuestra aplicación

Nuestro UI lucirá mas elegante y profesional