El mejor curso gratuito de React JS desde cero

El mejor curso gratuito de React JS desde cero

Gracias por entrar y confiar en este curso gratuito de React JS, a través de varios vídeos y post aprenderás desde lo básico y espero poderte guiar hasta llegar a un nivel donde seas capaz de desarrollar una página web totalmente funcional.

Recuerda que será un tutorial totalmente gratis y todos los vídeos estarán disponibles en mi canal de YoutTube, y si deseas apoyarme, por favor comparte en tus redes sociales para llegar a mas personas que quizá lo necesiten.

 

📌 Suscríbete a mi canal y activa la campanita para que no te pierdas ningún video 🤘

 

¿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.

 

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.

 

Estructuras de carpetas de create-react-app

 

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

Mi primera app con create-react-app

 

 

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.

Introducción a React JSX, revelando sus secretos

Introducción a React JSX, revelando sus secretos...

Javascript 🥇 cuenta con una extensión llamada 【 ▷...

 

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.

Components and Props React, Manejo de propiedades y componentes en React

Components and Props React, Manejo de propiedades ...

El manejo de ▷▷ componentes y propiedades en React...

 

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.

Comprendiendo el State y Ciclo de vida de los componentes en REACT JS

Comprendiendo el State y Ciclo de vida de los comp...

Comprender 🤔 el 【▷ State y Lifecycle ◁】 te permit...

 

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.

React Refs, Para que sirven y cómo puedes usarlas

React Refs, Para que sirven y cómo puedes usarlas...

Las ✅ referencias en React ✅ son la forma correcta...

 

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

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

¿Cómo manejar las listas y condicionales en React ...

Las ▷▷ listas en React ◁◁ nos permiten poblar tabl...

 

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

Formularios en React, input controlados y no controlados

Formularios en React, input controlados y no contr...

La manipulación de ✔️ formularios es una parte ese...

 

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.

React Developer Tools, instalación y usos

React Developer Tools, instalación y usos...

Aprende a utilizar e instalar React Developer Tool...

 

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.

Comunicación entre componentes con API Context React

Comunicación entre componentes con API Context Rea...

Hoy aprenderás ✔️ como comunicar componentes a tra...

 

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.

¿Cómo utilizar los High Order Component (HOC) ?

¿Cómo utilizar los High Order Component (HOC) ?...

Higher Order Component (HOC) ✔️ nos ayuda a reutil...

 

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.

Manejo avanzado de Children en React

Manejo avanzado de Children en React...

Estas a un clic ✔️ de aprender el ❰ uso avanzado d...

 

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.

Validando datos a través de PropType en React

Validando datos a través de PropType en React...

Hoy te enseñaré a utilizar las ❰ PropType 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.

Master de Hooks en React JS, características y usos

Master de Hooks en React JS, características y uso...

En esta clase aprenderás ✔️ a utilizar los princip...

 

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.

¿Cómo utilizar el Hook useState en React?

¿Cómo utilizar el Hook useState en React?...

Hoy te enseñaré a utilizar el Hook de estado useSt...

 

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.

Hook useEffect, utilizando el Hook de efecto de forma correcta

Hook useEffect, utilizando el Hook de efecto de fo...

Hoy aprenderás la forma correcta ✔️ de como utiliz...

 

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.

¿Cómo utilizar el Hook useContext? Comunicación de componentes funcionales

¿Cómo utilizar el Hook useContext? Comunicación de...

Hoy aprenderás a utilizar el Hook useContext con e...

 

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.

¿Cómo utilizar el Hook useReducer?

¿Cómo utilizar el Hook useReducer?...

El ▷▷ Hook useReducer ◁◁ es una alternativa de use...

 

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.

Memorizar componentes a través de React.memo

Memorizar componentes a través de React.memo...

Con ✔️ React.memo podemos memorizar un componente...

 

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.

Utilizando los Hooks useCallback y useMemo

Utilizando los Hooks useCallback y useMemo...

Hoy aprenderás a utilizar ✔️ el Hook useCallback e...

 

 

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.

 


Juan Carlos G

Electrónica y diseño web

Durante años he desarrollado plataformas dedicadas al rastreo satelital y varios sitios web que se encuentran en la primera página de Google, y hoy quiero compartir contigo lo que se en tecnologías como Node JS, PHP, C# y Bases de datos, si quieres apoyarme sígueme en mis redes sociales y suscríbete a mi canal de YouTube.

Puedes seguirme en mis redes