Espero que disfruten y aprovechen al máximo este tutorial de React JS, cada capítulo estará montado sobre una rama, así que la master lo único que contendrá será la primera clase. Este archivo será actualizado conforme vaya subiendo nuevos capítulos y cada actualización tendrá un link a la rama de cada capítulo, en cuestión y un link a mi página web donde se encontrarás toda la información del curso. Bien, espero les ayude mucho y me ayuden compartiendo en sus redes sociales.
Aprenderás a levantar el ambiente de desarrollo de React en Ubuntu, podrás crear tu primera aplicación utilizando create-react-app, te mostraré la estructura de directorios y hacer tus primeros cambios.
Rama: master
Link detalles: https://ewebik.com/react-js
Introducción a la sintaxis JSX, te enseñare a crear tus primeros elementos en React a través de React.createElement, aprenderás a migrar de React. createElement a la sintaxis JSX, conocerás el por qué los componentes deben empezar con mayúscula, comprenderás y aprenderás a utilizar propiedades en JSX en conjunto con el operador Spread.
Rama: introduccion-jsx
Link detalles: https://ewebik.com/react-js/jsx
En este capítulo veremos una introducción al manejo de componentes y sus propiedades, conocerás cuales son los tipos disponibles en React, como es que puedes pasar propiedades y como debieras modificarlas.
Rama: componentes-y-propiedades
Link detalles: https://ewebik.com/react-js/components-and-props
En este capítulo te mostrare como declarar, asignar y manipular el State tanto en componentes de clase como funcionales, veremos una introducción a los métodos de ciclo de vida comenzando con componentDidMount y componentWillUnmount.
Rama: state-lifecycle
Link detalles: https://ewebik.com/react-js/state-and-lifecycle
En este capítulo aprenderás el correcto manejo de las referencias, esto es equivalente a utilizar document.getElementById, no obstante, la librería de React nos proporciona esta opción para usarla y poder integrarla con librería de terceros.
Rama: refs
Link detalles: https://ewebik.com/react-js/refs
En este nuevo capítulo aprenderás a recorrer y extraer datos de una lista en React utilizando la función map, además, veremos la importancia de utilizar Keys y agregárselas a nuestros elementos durante la extracción de datos.
Rama: list-and-keys
Link detalles: https://ewebik.com/react-js/lists-and-keys
En esta nueva clase vamos a revisar el manejo de formularios en React, aprenderás a utilizar inputs controlados e inputs no controlados, además, haremos un formulario con validaciones y listo para agregarlo a algún proyecto que estés desarrollado en este momento.
Rama: formularios
Link detalles: https://ewebik.com/react-js/formularios
En esta clase aprenderás a utilizar una herramienta con la cual podrás desarrollar más rápido tu código, ya que, podrás observar los cambios en las props y el state de tus componentes sin la necesidad de realizar console.log. No hay rama para este vídeo ya que solo se explica el funcionamiento de esta herramienta.
Rama: -
Link detalles: https://ewebik.com/react-js/developer-tools
En este capítulo te enseñaré a través de un ejemplo, cómo comunicar componentes a través de API Context React. Podrás visualizar como el árbol de componentes se actualiza y eres capaz de conocer que componente a realizado dicho cambio.
Rama: api-context
Link detalles: https://ewebik.com/react-js/api-context
En este capítulo te enseñaré a través de un ejemplo como utilizar los HOC, los cuales son muy útiles cuando tenemos procesos o cálculos, que se deben realizar en varios componentes dentro de nuestro proyecto.
Rama: hoc
Link detalles: https://ewebik.com/react-js/hoc
En este onceavo capítulo te enseñaré a utilizar las propiedades Children en React, aprenderás ¿Qué son? Manipularlas, y a través de un ejemplo, aprenderás como puedes comunicar componentes a través de ellas.
Rama: children
Link detalles: https://ewebik.com/react-js/children
Una herramienta muy interesante en React son las PropTypes, a través de ellas, podemos comprobar que las propiedades en nuestros componentes se han asignado correctamente al ser invocados, incluso, podemos crear nuestras propias validaciones.
Rama: proptypes
Link detalles: https://ewebik.com/react-js/proptypes
En esta clase comenzaremos a ver ¿Qué son los Hooks en React? Desde una perspectiva más profunda y a detalle, comenzaremos con el Hook de estado, y aunque ya hemos visto anteriormente, lo vamos a ver con más calma y a detalle.
Rama: usestate
Link detalles: https://ewebik.com/react-js/usestate
En esta clase analizaremos el uso del Hook useEffect, aprenderemos a declararlo, como separar procesos y mejorar el rendimiento de nuestras aplicaciones al establecer cual useEffect debe ejecutarse y cual no.
Rama: useeffect
Link detalles: https://ewebik.com/react-js/useeffect
En esta clase vamos a actualizar el ejemplo que hicimos en el capítulo 9 API Context, pero lo haremos a través del Hook useContext, con el cual podrás comunicar tus componentes a través del contexto, pero tu código se verá más limpio y fácil de leer.
Rama: usecontext
Link detalles: https://ewebik.com/react-js/usecontext
Hoy vamos a ver uno de los hooks adicionales más importantes, el “useReducer” un hook con el cual podrás manipular un state relativamente grande de una forma muy fácil, lo cual dará a tu código limpieza y será muy fácil de leer.
Rama: usereducer
Link detalles: https://ewebik.com/react-js/usereducer
En este capítulo te enseñaré como puedes mejorar el rendimiento de tus aplicaciones, a través de, memorizar tus componentes utilizando React.memo(), además, te daré unos consejos para que le saques el máximo provecho a este HOC.
Rama: react-memo
Link detalles: https://ewebik.com/react-js/react-memo
En este capítulo te enseñaré a memorizar funciones, además, veremos una segunda opción de cómo puedes memorizar componentes a través del Hook useMemo.
Rama: usecallback
Link detalles: https://ewebik.com/react-js/usecallback