Crea un Clon de Instagram con React.js | Appdelante
ūüĒ•Nuevo Curso: Automatizaci√≥n y Web Scraping con Node.jsūüĒ•

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 todo 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, Instagram 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.tvubicada 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
  • Aprende lo m√°s nuevo de React.js: Hooks
  • 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
  • Curso al d√≠a. Actualizamos los videos cuando las dependencias cambian
  • Soporte por email con el profesor en caso de que tengas cualquier pregunta
  • Certificado de completaci√≥n para tu CV

¬Ņ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 los √ļltimos 5 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 van 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, nosotros 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.

Chat con nosotros