Introducción a React JS

¿Qué vamos a hacer? Más videos

Descripción del tema

Durante las últimas 3 semanas he estado trabajando en un nuevo diseño para la aplicación de música que vendo en Code Canyon, el diseño es en tonos obscuros y agrega algunas nuevas características a la aplicación actual.

En este curso vamos a tomar tres pantallas de ese diseño y las vamos a implementar en React. Vamos a iniciar configurando Webpack, instalando Babel, CSS modules y todo lo necesario para poder automatizar nuestros bundles.

El login

La primer pantalla a realizar será el login, aquí crearemos un formulario donde vamos a crear algunos componentes que re-usaremos en otros lugares, como el TextField y Button, la pantalla final quedará algo así:

El login

Login

En este curso, nos limitaremos solamente a crear el front-end, pero vamos a integrarlo con un API que se encargará de verificar las credenciales en la base de datos.

Discover

En esta pantalla consultaremos el API para obtener la información a desplegar, luego vamos a crear los componentes necesarios para renderizar esa información correctamente.

Discover Music

Discover View

Cada canción contendrá un link al album y a la página del autor. Usaremos React Router para manejar links y redirecciones.

En esta pantalla el usuario podrá tocar la canción haciendo mouse-over sobre la imagen, pero reproducir el mp3 estará fuera del scope de este curso, posiblemente haga un curso avanzado más adelante donde incluya esa funcionalidad.

Album

En esta pantalla el usuario podrá ver la lista de canciones dentro de un album, consultaremos el API para sacar esa información y desplegaremos la lista de canciones con la información obtenida. 

Asi mismo desplegaremos la información del album y un par de botones para permitir al usuario realizar ciertas acciones.

Album view

Album

Reproducir la canción esta fuera del scope de este curso, ya que la idea de este curso es mostrar los fundamentos de React al desarrollar aplicaciones.

Producción

Todo el código mostrado en este curso estará listo para ser usado en producción, de hecho planeo terminar este desarrollo y vender esta app en Code Canyon junto con el backend que ya estoy vendiendo.

Cabe resaltar que el backend a utilizar en este curso es usado para server aproximadamente 50K usuarios, en una comunidad que tengo donde los usuarios escuchan música de manera gratuita.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Introducción a React JS, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!

Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.

¿Olvidaste tu contraseña?

6Comentarios

Instructor del curso

Crysfel3

Autor: Crysfel Villa

Crysfel ha sido Líder Técnico por más de 4 años, desarrollando Single Page Applications (SPA) con JavaScript y React.

Regístrate a este curso

Este tutorial pertenece al curso Introducción a React JS, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.

Ya que este curso no está finalizado al registrarte podrás recibir en tu correo los nuevos tutoriales de este curso!

Tendrás acceso a descargar los videos, códigos y material adicional.

Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.

Llevarás un registro de tu avance.