React.js: El mejor curso gratuito de React.js desde cero.

¿Qué aprenderás de React JS?

En este primer capítulo aprenderás:

• ¿Qué es React?
• A montar tu entorno de desarrollo
• Fundamentos
• Y podrás crear tu primera aplicación utilizando create-react-app

Repositorio

Para acceder a los ejemplos que se van desarrollando en el curso, puedes clonar el repositorio:

git clone https://github.com/EWebik/react-js.git

Cada capítulo lo subiré en una rama diferente para que este un poco más ordenado y no nos perdamos conforme avanza este tutorial.

• Este primer capítulo quedara en la rama master

¿Qué es React JS?

React JS es simplemente una librería realizada por el equipo de Facebook, para la creación de poderosas interfaces utilizando componentes que puedes reutilizar, esto permite desarrollar componentes simples que interactuen entre si, para formar componentes mucho mas grandes y complejos.

En un principio esta herramienta no era totalmente gratuita, ya que Facebook tenia una limitante en su licencia. La cual indicaba que podías utilizarla mientras no fueras un competidor de Facebook.

Hoy en día esta limitante ya no existe y puedes usarlo libremente y aunque Facebook podría cambiar el tipo de licenciamiento, al menos al día en que escribí este post, la licencia es libre y los desarrolladores podemos hacer uso de ella.

Entorno de desarrollo

Bien, para utilizar esta librería es indispensable que comprendas o al menos hayas escuchado lo que es:

Javascript

Lenguaje que prácticamente domina las páginas web en Internet, permite crear páginas dinámicas.

NPM

Es un repositorio y gestor de paquetes, donde podemos encontrar librerías que podemos utilizar para crear o generar una funcionalidad en nuestra aplicación.

Webpack

Poderosa herramienta basada en módulos, donde diferentes archivos pueden compartir código entre si y empaquetarlos en uno o mas archivos, incluso, puede utilizar Babel al momento de empaquetar para que sean compatibles con diferentes navegadores.

Babel

Es una herramienta que nos permite desarrollar en versiones de Javascript actualizadas y convertirlas a código Javascript que cualquier navegador puede leer, esto es útil si tu aplicación se ejecutara en navegadores desactualizados.

Node JS

NodeJS es un entorno de ejecución de JavaScript orientado a eventos asíncronos, y este si es importante que lo tengas instalado ya que sobre el haremos todo el curso y nuestras aplicaciones.

• En Windows puedes ingresar a la siguiente pagina y bajar el instalador.
• Si estas en Linux puedes teclear el siguiente comando para instalarlo de una forma simple.

sudo apt-get update
sudo apt-get install nodejs
sudo apt-get install npm

Con los comandos anteriores no solo instalamos Node, también instalamos el gestor de paquetes NPM. Puedes comprobar la versión instalada con los siguientes comandos, ya sean en Linux o Windows desde línea de comandos.

node -v
npm -v

Fundamentos de React JS

Bien antes de pasar con la parte interesante y práctica es necesario que conozcas ciertos conceptos que usaremos a lo largo de este pequeño tutorial.

Esta librería en un inicio era considerada monolítica y a partir de la versión 0.14 fue separada en varias librerías, que dentro de las principales esta:

REACT

• Encargada de definir componentes
• Comunicación entre componentes
• Y agrega a los componentes ganchos de ciclo de vida para generar interactividad

REACT-DOM

• Se encarga de la vinculación de los componentes con el DOM de la página
• Otra función importante es montar el componente principal en la pagina a través del método RENDER

PROP-TYPES

• Revisa y valida los datos de entrada en los componentes

Si aun no comprendes bien su funcionamiento no te preocupes, en los ejemplos y siguientes vídeos estoy seguro lo entenderás a la perfección.

¿Cómo crear una aplicación con React JS con create-react-app?

Una de la formas más fácil de crear una aplicación con esta librería es a través de la herramienta CLI (command-line interface).

create-react-app

Esta herramienta la instalaremos de forma global en nuestro sistema con el siguiente comando:

npm install -g create-react-app

Ahora que ya esta instalada, creamos nuestra primera aplicación de nombre "react-tutorial-ewebik" (Tu puedes llamarle como desees) con el siguiente comando:

create-react-app react-tutorial-ewebik

La ejecución puede tardas algo de tiempo dependiendo de tu computadora y velocidad de internet.

Estructura de carpetas de create-react-app

Después de crear nuestra primera aplicación, podemos observar una carpeta que en mi caso es "react-tutorial-ewebik" si abrimos dicha carpeta tenemos una estructura como la que se ve a continuación.

Donde:

• En carpeta public, se encuentran todos los archivos estáticos, por ejemplo, el archivo index.html el cual será utilizado como plantilla para montar nuestra aplicación.
• Carpeta src, código fuente de nuestra aplicación, el archivo más importante es index.js, los demás los puedes borrar, pero no lo hagas por el momento, iremos modificando poco a poco.
• package.json, en este archivo se definen todo los paquetes que utiliza nuestra aplicación y se declaran los script que deseamos ejecutar, por defecto vienen incluidos, start, build, test y eject, que veremos a continuación.

¿Qué son los REACT-SCRIPTS?

Bien, al momento de crear nuestra primera aplicación, dentro de package.json se declaran 4 comandos que podemos utilizar:

• start, crea un servidor de desarrollo y permite visualizar nuestra aplicación en el navegador.
• build, nos permite compilar la aplicación para montarla en producción.
• test, esta disponible para realizar pruebas unitarias.
• eject, es un comando que despues de ejecutarlo no es reversible, si lo corremos es porque queremos agregar funcionalidades especificas a nuestro proyecto.

Entonces, desde línea de comandos posicionate dentro de tu carpeta del proyecto y ejecuta el siguiente comando para iniciar tu primera apliación.

npm run start

Deberías de ver algo como esto

Clases siguientes del curso de React.js

Ya has terminado el primer capítulo, continua aprendiendo con las siguientes clases

2. Introducción a JSX

En este segundo capitulo aprenderás lo básico de React JSX, veremos ¿Qué es? Y Algunos ejemplos que estoy seguro te ayudarán a crear aplicaciones impresionantes en el futuro, por favor no te lo pierdas.

• Ver clase completa JSX

3. Componentes y propiedades en React

En este tercer capitulo hago una introducción a los tipos de componentes en React, además aprenderás como debes usar las propiedades tanto en componentes funcionales como de clases, espero te sea de utilidad y recuerda seguir el tutorial paso a paso.

• Ver clase completa de componentes y propiedades

4. State y Ciclo de vida en React

Manejar correctamente el State tanto en componentes funcionales como en componentes de clases es vital para hacer un buen uso de esta librería.

En este capítulo aprenderás a manejar el State en los dos tipos de componentes y no es todo. También te dejo una introducción al ciclo de vida de los componentes, solo veremos dos métodos, si el curso es bastante compartido y el vídeo tiene bastantes Likes en YouTube, haré uno completo hablando de todos los métodos.

• Ver case completa de State y Ciclo de vida en React.js

5. Manejos de Refs en React

La librería de React nos proporciona una forma de acceder a los elementos en la DOM. Parecido a lo que haría document.getElementById en JavaScript. En este capítulo aprenderás el manejo de la Refs y un pequeño ejemplo de como se integra con librerías de terceros, que en este caso haré un ejemplo con Chart.js, la cual, ya he utilizado en otros cursos.

• Ver clase completa de Manejos de Refs en React

6. ¿Cómo manejar listas y condicionales en React JS?

El manejo de listas React es un tema muy interesante y estoy seguro que será tu pan de cada día cuando estés creando aplicaciones web. Aquí veremos como poblar una tabla con datos provenientes de un JSON.

• Ver clase completa listas y condiciones en React.js

7. Manejo de formularios en React

El siguiente capitulo te aseguro que te va a gustar mucho, ya que, aplicaremos muchos conceptos que hemos venido viendo. Así que ve y revisa este nuevo vídeo y aprende el manejo de formularios de una forma rápida y sencilla.

• Ver clase completa de manejo de formularios en React.js

8. React Developer Tools

En este octavo vídeo veremos como usar la herramienta de desarrollo que la misma librería de React nos recomienda utilizar, estoy seguro te será de gran ayuda.

• Ver clase completa React Developer Tools

9. Comunicación entre componentes API Context

API Context es un tema que no puede faltar en un curso de React, por tal razón, he hecho esta clase donde a través de un ejemplo aprenderemos a utilizar esta API para comunicar tus componentes y crear poderosas aplicaciones.

• Ver clase completa Comunicación entre componentes API Context

10. Higher Order Components (HOC)

Utilizando HOCs podrás reutilizar lógica y pasarla a tu componentes dentro de tu proyecto. Esto es muy útil cuando existen procesos que deseas repetir cada vez que invocas un componente.

• Ver clase completa Higher Order Components (HOC)

11. Children en React

En esta nueva clase te enseñare el uso avanzado de las Children, volveremos a ver la composición de componentes, pero lo voy a orientar a comunicar componentes sin utilizar API Context o Redux, solo utilizaremos Children y verás lo fácil que es.

• Ver clase Children en React.js

12. PropTypes en React

Una excelente forma de validar que las propiedades de un componene se han asignado correctamente es a través de las PropTypes, por ello, te dejo esta clase donde aprenderás a manejar este concepto y crearas una validación personalizada.

• Ver clase completa PropTypes en React

13. Hooks en React

Es momento de hablar de lleno de los componentes funcionales y las ventajas de utilizar Hooks, en el siguiente post aprenderás todo sobre estos nuevos elementos, sus reglas y mucho más, espero te guste.

• Ver clase completa Hooks en React.js

14. Hook useState

¿Ya revista el post donde hay una introducción a los Hooks? Si tu respuesta es si, ahora te dejo cada Hook en un post separado para profundizar en sus funcionamiento mas a detalle, comencemos con el Hook de estado useState, ya lo hemos visto antes, pero estoy seguro que aprenderás algo nuevo.

• Ver clase completa Hook useState en React.js

15. Hook useEffect

Ahora toca hablar de uno de los Hooks más importantes, ya que, con el podrás emular los métodos de ciclo de vida en componentes funcionales, hoy mucho de decir de este Hook así que no te puedes perder este post.

• Ver clase completa Hook useEffect

16. Hook useContext

Muy bien, vamos avanzando muy bien, ahora veamos un nuevo Hook el cual es useContext, y lo vamos hacer actualizando el ejemplo del vídeo número 9 de este curso.

• Ver clase completa uso del Hook useContext

17. Hook useReducer

Excelente, vamos avanzando muy bien, ahora veremos una alternativa a useState, con useReducer también podemos manipular el state, pero, aparecen algunos conceptos como reducer y dispatch que explico en esta clase.

• Ver clase Hook useReducer.

18 HOC React.memo()

En esta nueva clase aprenderás todo sobre el HOC React.memo(), el cual, es un Componente de Orden Superior que nos permite memorizar componentes y, así, mejorar el rendimiento de nuestras aplicaciones. No obstante, debes evaluar si realmente necesitas implementar este HOC.

• Ver clase HOC React.memo

19 Hooks useCallback y useMemo

En esta clase veremos como utilizar el Hook useCallback en conjunto de React.memo, también, aplicaremos useMemo como otra opción de memorización de componente, es importante esta clase, ya que la memorización de datos puede llegar a ser compleja y es importante que comprendas por que pasan ciertas cosas.

• Ver clase ¿Cómo utilizar los Hooks useCallback y useMemo?

Espero que te este gustando mi curso gratis de React JS, recuerda que todos los cursos lo voy actualizando poco a poco, te recomiendo suscribirte a mi canal de YouTube y deja tu correo en mi boletín para que te enteres cuando suba nuevo contenido.

Y si deseas apoyar, por favor comparte en tus redes sociales este link para que podamos ayudar a mas gente que no pueda costear un curso de esta índole.