Curso de React.js

Aprende React.js creando un Clon de Instagram

¡Hola! Me llamo Ricardo Macario y soy ingeniero de software.

Llevo más de 4 años creando aplicaciones con React.js. Desde una herramienta para visualizar datos llamada AppInsights, hasta aplicaciones utilizadas por cientos de miles de usuarios en Shopify.

En mi tiempo libre, he lanzado dos productos construidos con React: MyHabits.co y Fliptomind.com.

En este curso te voy a ense√Īar todos lo que necesitas para crear aplicaciones con React.js.

¬ŅQu√© tiene de especial este curso?

Hay toda clase de recursos para aprender React.js: blogs, tutoriales, cursos, videos y m√°s.

Lo que diferencia un recurso de otro es el profesor. Cada profesor es √ļnico, esto se manifiesta en su forma de ense√Īar y en la experiencia que tiene en la industria.

M√°s all√° de ense√Īarte todo lo que necesitas para ser productivo con React.js, voy a ense√Īarte la filosof√≠a que utilizo para desarrollar aplicaciones.

Mi filosofía esta basada en la simplicidad. Me fascina conseguir soluciones simples a problemas complejos.

Cuando termines el curso:

  • Vas a poder crear aplicaciones complejas utilizando React.js.
  • Vas a saber como atacar problemas con una filosof√≠a basada en la simplicidad y pr√°ctica.
  • Vas a haber creado un Clon de Instagram utilizando las mejores pr√°cticas de React.js.

¿Para quién es el curso?

El curso está diseñado para:

Desarrolladores con experiencia en JavaScript pero que no han tocado React. El curso poco a poco te enseñará lo conceptos que necesitas para ser productivo con React y crear tus propias aplicaciones.

Y segundo, desarrolladores que tienen un nivel básico/intermedio de React.js, pero que quieren entender profundamente las mejores prácticas del framework. Adicionalmente, el curso enseña lo más nuevo de React: Los Hooks.

¿Qué voy a aprender?

  • La filosofía de React.js
  • Cómo partir una aplicación en componentes
  • Diseño de componentes pequeños y reusables
  • Interacciones con un API de tipo REST
  • Autenticación de usuarios con JWT
  • Subir fotos desde el navegador
  • Cómo utilizar los Hooks
  • Cómo paginar datos
  • Y lo más fucking cool: crear un Instagram

Features de Clontagram

Si quieres jugar con Clontagram, visita este link. Estos son los features que vamos a implementar:

  • Login y Signup
  • Publicar fotos
  • Follow/Unfollow usuarios
  • Likes
  • Comentarios

Módulos del curso

El curso está dividido en módulos. Primeros nos vamos a enfocar en la arquitectura de nuestra aplicación: la estructura de nuestros directorios, autenticación de usuarios, manejo de errores y el sistema de rutas.

Luego nos vamos a enfocar en cada una de las vistas. Estos son los módulos:

Introducción y Setup

Vamos a asegurarnos que tengas todas las dependencias, descargar el repositorio, llenar tu base de datos y prender nuestro ambiente de desarrollo.

Autenticación

En esta sección vamos a cubrir cómo utilizar formularios en React.js, enviar data al API, y manejar el estado global de la aplicación.

También vamos a cubrir cómo utilizar los JWT para autenticar a los usuarios y reanudar sus sesiones.

Routing

Te voy a introducir a la librería react-router y te voy a enseñar la clave para manejar rutas privadas y rutas públicas

Vista Upload

Las imágenes son el corazón de Instagram. La Vista Upload nos va a permitir explorar cómo subir imágenes al servidor. Vamos a explorar las mejores prácticas y cómo hacer que la experiencia se sienta rápida.

Vista Feed

El Feed es una de las vistas más complejas de nuestra aplicación. Vamos a crear un componente genérico para cada uno de los posts, al igual que componentes para el botón like y el formulario de comentarios. Los combinaremos todos para tener un post.

También vamos a explorar cómo paginar respuestas del API.

Vista Post

La Vista Post se encarga de mostrar un post individual. Va a ser el ejemplo perfecto para ver cómo podemos reutilizar componentes que creamos para el Feed. También te voy a enseñar cómo pasar parámetros por el URL.

Vista Explore

Sin Explore, los usuarios de Clontagram no pueden encontrar a otros usuarios a quien seguir o ver fotos que no se encuentran en su feed. En esta vista vamos a ver cómo sincronizar multiples llamadas al servidor, y vamos a construir un grid genial para mostrar multiples fotos.

Vista Perfil

El Perfil es la casa de nuestros usuarios. Hay muchos detalles y estados que manejar. En está vista vamos a implementar la habilidad de seguir a otros usuarios, también vamos a implementar la lógica para subir una foto para el avatar y vamos a reutilizar componentes de explore.

¿Por qué aprender React.js?

React.js revolucionó la forma en que desarrollamos interfaces. Principalmente por la introducción del virtual DOM y por hacer que la interfaz sea función del estado. React se ha convertido en una fuerza imparable en la industria.

React nos permite desarrollar aplicaciones en menos tiempo y con menos bugs. El API del framework es pequeño, por lo que resulta fácil aprenderlo y ponerlo en práctica.

Al ver la evidencia, vemos que React.js es descargado 4 veces más que Angular y Vue:

React vs Angular vs Vue descargas

Descargas de React vs Angular vs Vue en NPM

Lo que implica que la comunidad es más grande por lo que hay muchas más librerías y paquetes que podemos utilizar. Adicionalmente, si vemos la cantidad de ofertas laborales publicadas en Hacker News vemos lo siguiente:

React vs Angular vs Vue ofertas laborales

Ofertas laborales en hacker news para React

Hay 6 veces más ofertas laborales para desarrolladores que conozcan React. Lo que se traduce en más oportunidades para nuestra carrera.

Por último, muchas de las compañías más grandes de tecnología están apostando fuertísimo en React: Facebook, Microsoft, Airbnb, Twitter, Shopify, Instragram y muchas más.

Compañías que utilizan React.js:

¿Qué opinan los estudiantes de nuestros cursos?

Hola Daniel, felicitaciones por el curso . Yo había aprendido NodeJS pero orientado a sockets y ahora que tengo la base para construir una API Rest complementé mi aprendizaje. Gracias!!

Rodolfo

El curso me pareció super bueno, excelente contenido, explicas muy bien y vas al grano, el curso tiene la información que estaba buscando hace rato.

Franyer

Estoy pensando en hacer un proyecto con todas estas tecnologías y tu curso sin duda será una piedra angular para sacarlo adelante.

Richard

Ya terminé el curso, estuvo tan bueno como me lo esperaba, y hasta más :D

Juan

Excelente profesional, muchas gracias por compartir tu experiencia.

Emiliano

Muchas gracias por compartir tu conocimiento, tienen unos tutoriales excelentes y muy a la vanguardia.

Jchristian

¬ŅQui√©n es el profesor?

Ingeniero de software

Ricardo Macario

Tengo más de seis años trabajando como Ingeniero de Frontend. Despu√©s de graduarme trabajé para Canvs.tv ubicada en NYC. Ayudé a desarrollar una plataforma que le permite a HBO, Showtime, Fox y más, entender cómo su audiencia reacciona en las redes sociales cuando un episodio o programa sale al aire.

Luego, trabajé para una startup de San Francisco llamada Appdirect. Contribuí al desarrollo de AppInsights, una aplicación de visualización de datos que le permite a cualquier compañía integrar sus métricas en un mismo sitio.

Actualmente trabajo para Shopify. Desarrollando productos que le permiten a los usuarios crear el branding de sus tiendas virtuales.

¿Listo para empezar?

  • Un solo pago. Acceso al curso de por vida
  • Todo lo que necesitas para ir de cero a avanzado con React.js
  • Adopta una filosof√≠a de desarrollo basada en la simplicidad y pr√°ctica
  • 7 horas de videos cortos y concisos
  • Acceso inmediato a los videos y c√≥digo de la aplicaci√≥n
  • Utiliza el proyecto final para tu portafolio
  • Aprende lo más nuevo de React.js: Hooks

¿Tienes dudas? ūüĎČCont√°ctame

Preguntas Frecuentes

¿El curso enseña el desarrollo del backend (API)?

No, en el curso no voy a cubrir el desarrollo del API. Nos vamos a enfocar exclusivamente en el frontend. Sin embargo, vas a tener acceso al código del servidor ya que lo vas a estar corriendo localmente.

Si quieres aprender sobre el servidor, puedes tomar nuestro curso que está dedicado al desarrollo de APIs: Diseño de APIs con Node.js

¿Necesito saber JavaScript avanzado para tomar este curso?

¡No! Sin embargo, esperamos que domines los fundamentos de la programación y JavaScript (variables, condicionales, loops, funciones, objetos, etc). El curso es muy detallado y poco a poco vamos a ir introduciendo los conceptos.

¿Vas a ense√Īar el CSS?

En el curso no voy a ense√Īar CSS. Te voy a dar acceso a un repositorio que contiene un archivo de CSS con todos las clases y estilos para la aplicaci√≥n.

Para aprender más sobre el CSS de la aplicación puedes jugar con el archivo que contiene los estilos, e inspeccionar los elementos en el navegador.

¿Qué es los más valioso que voy a aprender?

Este curso comprime todo lo que he aprendido sobre React.js en lo últimos 4 años.

En el curso vas a absorber mi filosofía a la hora de desarrollar aplicaciones con React. Mi objetivo final es darte las herramientas para que puedas atacar problemas utilizando React.js. Una vez que hayas terminado el curso vas a estar en capacidad de lanzar tus propios productos y aplicar a trabajos como desarrollador de React.

¡No puedo esperar a ver que construyes con todo el conocimiento!

¿Los pagos en Appdelante son seguros? ¿Cómo se que no me vas a clonar la tarjeta/Paypal?

Los pagos de Appdelante son procesados por Shopify. En ningún momento tenemos acceso a los detalles de tu tarjeta o cuenta, nostros solo esperamos la confirmación de que el pago fue exitoso.

¿Qué pasa si no me gusta el curso?

La pólitica de Appdelante es que si no te gusta el curso, te devolvemos tu dinero.