Introducción

En este video vamos a instalar el paquete create-react-app y lo vamos a utilizar para crear el proyecto. También explicaremos la estructura inicial del proyecto.

Instalar create-react-app y crear proyecto

Explicarémos como dividir la aplicación en componentes que luego serán implementados en React.js.

Identificar los componentes

Crearemos el componente Header donde mostraremos el título de la aplicación, el número de intentos y el botón de reiniciar.

Implementar Header.js

Crearemos el componente tablero que sirve como contenedor para las cartas.

Implementar Tablero.js

Crearemos el componente carta e instalaremos la librería font-awesome (http://fontawesome.io/) que utilizaremos para los íconos.

Implementar Carta.js

Implementaremos la función que se encarga de crear la baraja de cartas. Utilizaremos el módulo de NPM lodash.suffle (https://www.npmjs.com/package/lodash.shuffle).

Crear baraja de cartas

Crearemos el estado de la aplicación donde guardaremos la baraja. Vamos a utilizar el estado para pasar las cartas al tablero y posteriormente a las cartas para dibujar los íconos.

Crear estado y mostrar íconos

Instalaremos el módulo: https://github.com/mzabriskie/react-flipcard para introducir el efecto de voltear las cartas.

Agregar efecto flip a las cartas

Crearemos el método seleccionarCarta que almacenará las cartas que el usuario escoja en el estado.

Lógica para seleccionar pareja

Crearemos una propiedad en el tablero y en la carta para pasar la función que las selecciona.

Conectar selección con las cartas

Crearemos el método que compara si dos cartas son iguales para verificar si el usuario encontró la pareja.

Lógica para comparar cartas

Implementaremos el método que verifica si el usuario adivino todas las cartas.

Lógica para verificar victoria

Por último, implementaremos la lógica que cuenta cuantos intentos le ha tomado al usuario encontrar todas las parejas.

Lecturas

Introducción

Instalar create-react-app y crear proyecto

Identificar los componentes

Implementar Header.js

Implementar Tablero.js

Implementar Carta.js

Crear baraja de cartas

Crear estado y mostrar íconos

Agregar efecto flip a las cartas

Lógica para seleccionar pareja

Conectar selección con las cartas

Lógica para comparar cartas

Lógica para verificar victoria

Reiniciar partida y contar número de intentos

Implementar Header.js

Descripción