Si haces click en un cuadrado ahora, deberías ver ‘click’ en la consola de desarrollo de tu navegador.
\n\n\nNota
\nPara continuar escribiendo código sin problemas y evitar el confuso comportamiento de
\nthis, vamos a usar la sintaxis de funciones flecha para manejar eventos aquí y más abajo:\nclass Square extends React.Component {\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}> {this.props.value}\n </button>\n );\n }\n}Ten en cuenta cómo con
\nonClick={() => console.log('click')}, estamos pasando una función como valor de la proponClick. React solo llamará a esta función después de un click. Olvidar() =>y escribironClick={console.log('click')}es un error común, y se ejecutaría cada vez que el componente se re-renderice.
Como un siguiente paso, queremos que el componente Square “recuerde” que fue clickeado, y se rellene con una marca de “X”. Para “recordar” cosas, los componentes usan estado.
\nLos componentes de React pueden tener estado estableciendo this.state en sus constructores. this.state debe ser considerado como privado para un componente de React en el que es definido. Vamos a almacenar el valor actual de un cuadrado en this.state, y cambiarlo cuando el cuadrado es clickeado.
Primero, vamos a agregar el constructor a la clase para inicializar el estado:
\nclass Square extends React.Component {\n constructor(props) { super(props); this.state = { value: null, }; }\n render() {\n return (\n <button className=\"square\" onClick={() => console.log('click')}>\n {this.props.value}\n </button>\n );\n }\n}\n\nNota
\nEn las clases de JavaScript, necesitas siempre llamar
\nsupercuando defines el constructor de una subclase. Todas las clases de componentes de React que tienen unconstructordeben empezar con una llamada asuper(props).
Ahora vamos a cambiar el método render de Square para mostrar el valor del estado actual cuando es clickeado:
- \n
- Reemplaza
this.props.valueporthis.state.valuedentro de la etiqueta<button>. \n - Reemplaza el manejador de evento
onClick={...}poronClick={() => this.setState({value: 'X'})}. \n - Pon las props
classNameyonClicken líneas separadas para mejor legibilidad. \n
Luego de estos cambios, la etiqueta <button> que es retornada del método render de Square se ve así:
class Square extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n value: null,\n };\n }\n\n render() {\n return (\n <button\n className=\"square\" onClick={() => this.setState({value: 'X'})} >\n {this.state.value} </button>\n );\n }\n}Llamando a this.setState desde el manejador onClick en el método render de Square, decimos a React que re-renderice el cuadrado siempre que su <button> es clickeado. Luego de la actualización, el this.state.value del cuadrado será 'X', así que veremos X en el tablero de juego. Si tu haces click en cualquier cuadrado, una X debería mostrarse en el mismo.
Cuando llamas setState en un componente, React actualiza automáticamente los componentes hijos dentro del mismo también.
Ver el código completo en este punto
\nHerramientas de desarrollo
\nLa extensión de React Devtools para Chrome y Firefox te permite inspeccionar el árbol de componentes de React con tus herramientas de desarrollo del navegador.
\n\n \n \n \n \n![\"React](\"/static/41330fe61a925e2c3009be675bdb96a9/f2205/devtools.png\" "\\"\\"")
\n \n \n \n \n \nReact DevTools te permite revisar las props y el estado de tus componentes de React.
\nDespués de instalar React DevTools, puedes hacer click derecho en cualquier elemento de la página, click en “Inspeccionar elemento” para abrir las herramientas de desarrollo, y la pestaña de React aparecerá como la última pestaña a la derecha. Usa “⚛️ Components” para inspeccionar el árbol de componentes.
\nSin embargo, notar que hay unos cuantos pasos extras para hacerlo funcionar con CodePen:
\n- \n
- Loguéate o regístrate y confirma tu correo electrónico (requerido para prevenir spam). \n
- Click en el botón “Fork”. \n
- Click en “Change View” y luego selecciona “Debug mode”. \n
- En la nueva pestaña que se abre, el devtools debería ahora tener una pestaña de React. \n
Completando el juego
\nAhora tenemos los bloques de construcción básicos para nuestro juego tic-tac-toe. Para completar el juego, necesitamos alternar colocando “X” y “O” en el tablero, y necesitas una forma de determinar el ganador.
\nElevando el estado
\nActualmente, cada componente Square mantiene el estado del juego. Para determinar un ganador, necesitamos mantener el valor de cada uno de los 9 cuadrados en un solo lugar.
\nPodemos pensar que el tablero debería solo preguntar a cada cuadrado por su estado. Aunque este enfoque es posible en React, te incentivamos a que no lo uses porque el código se vuelve difícil de ententer, susceptible a errores, y difícil de refactorizar. En su lugar, el mejor enfoque es almacenar el estado del juego en el componente padre Board en vez de cada componente Square. El componente Board puede decirle a cada cuadrado que mostrar pasándole una prop tal cual hicimos cuando pasamos un número a cada cuadrado.
\nPara recopilar datos de múltiples hijos, o tener dos componentes hijos comunicados entre sí, necesitas declarar el estado compartido en su componente padre. El componente padre puede pasar el estado hacia los hijos usando props; esto mantiene los componentes hijos sincronizados entre ellos y con su componente padre.
\nElevar el estado al componente padre es común cuando componentes de React son refactorizados, vamos a tomar esta oportunidad para intentarlo.
\nAñade un constructor al Board y establece el estado inicial de Board para contener un arreglo con 9 valores null. Estos 9 nulls corresponden a los 9 cuadrados:
\nclass Board extends React.Component {\n constructor(props) { super(props); this.state = { squares: Array(9).fill(null), }; }\n renderSquare(i) {\n return <Square value={i} />;\n }Cuando rellenemos el tablero luego, el arreglo this.state.squares se verá algo así:
[\n 'O', null, 'X',\n 'X', 'X', 'O',\n 'O', null, null,\n]El método renderSquare del componente Board actualmente se ve así:
renderSquare(i) {\n return <Square value={i} />;\n }Al principio, pasamos la prop value desde el Board para mostrar los números de 0 a 8 en cada cuadrado. En un paso previo, reemplazamos los números con una marca “X” determinado por el estado del propio Square. Esto es porque el cuadrado actualmente ignora la prop value pasado por el Board.
Ahora usaremos la prop pasando el mecanismo otra vez. Modificaremos el Board para instruir cada Square acerca de su valor actual ('X', 'O', ó null). Ya tenemos definido el arreglo squares en el constructor del Board, y modificaremos el método renderSquare para que lo lea desde allí:
renderSquare(i) {\n return <Square value={this.state.squares[i]} />; }Ver el código completo en este punto
\nCada Square ahora recibirá una prop value que será 'X', 'O', ó null para cuadrados vacíos.
Luego, necesitamos cambiar lo que sucede cuando un cuadrado es clickeado. El componente Board ahora mantiene qué cuadrados están rellenos. Necesitamos crear una forma para que el cuadrado actualice el estado del componente Board. Debido a que el estado es considerado privado al componente que lo define, no podemos actualizar el estado de Board directamente desde Square.
\nEn cambio, pasaremos una función como prop desde Board a Square y haremos que Square llame a esa función cuando un cuadrado sea clickeado. Cambiaremos el método renderSquare en Board a:
renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)} />\n );\n }\n\nNota
\nDividimos el elemento retornado en múltiples líneas por legibilidad, y agregamos paréntesis para que JavaScript no inserte un punto y coma después del
\nreturny rompa nuestro código.
Ahora estamos pasando dos props desde Board a Square: value y onClick. la prop onClick es una función que Square puede llamar cuando sea clickeado. Haremos los siguientes cambios a Square:
- \n
- Reemplazar
this.state.valueporthis.props.valueen el métodorenderde Square \n - Reemplazar
this.setState()porthis.props.onClick()en el métodorenderde Square \n - Eliminar el
constructorde Square porque el componente ya no hace seguimiento del estado del juego \n
Luego de estos cambios, el componente Square se ve algo así:
\nclass Square extends React.Component { render() { return (\n <button\n className=\"square\"\n onClick={() => this.props.onClick()} >\n {this.props.value} </button>\n );\n }\n}Cuando un cuadrado es clickeado, la función onClick provista por el componente Board es llamada. Aquí un repaso de cómo esto fue logrado:
- \n
- La prop
onClicken el componente pre-construido del DOM<button>le dice a React para establecer un escuchador del evento click. \n - Cuando el botón es clickeado, React llamará al manejador de evento
onClickque está definido en el métodorender()de Square. \n - Este manejador de evento llama a
this.props.onClick(). la proponClickdel componente Square fue especificado por el componente Board. \n - Debido a que el Board pasó
onClick={() => this.handleClick(i)}a Square, el componente Square llama alhandleClick(i)de Board cuando es clickeado. \n - No tenemos definido el método
handleClick()aun, así que nuestro código falla. Si haces click ahora verás una pantalla roja de error que dice algo como “this.handleClick is not a function” (this.handleClick no es una función). \n
\n\nNota
\nEl atributo
\nonClickdel elemento<button>del DOM tiene un significado especial para React porque es un componente pre-construido. Para componentes personalizados como Square, la nomenclatura la decides tú. Podríamos darle cualquier nombre al proponClickde Square o al métodohandleClickde Board, y el código funcionaría de la misma forma. En React, sin embargo, es una convención usar los nombreson[Evento]para props que representan eventos yhandle[Evento]para los métodos que manejan los eventos.
Cuando intentamos clickear un cuadrado, deberíamos obtener un error porque no hemos definido handleClick aun. Vamos ahora a agregar handleClick a la clase Board:
class Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n };\n }\n\n handleClick(i) { const squares = this.state.squares.slice(); squares[i] = 'X'; this.setState({squares: squares}); }\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: X';\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Ver el código completo en este punto
\nLuego de estos cambios, podemos nuevamente clickear en los cuadrados para rellenarlos de la misma forma que lo hicimos antes. Sin embargo, ahora el estado está almacenado en el componente Board en lugar de cada componente Square. Cuando el estado del Board cambia, los componentes Square se re-renderiza automáticamente. Mantener el estado de todos los cuadrados en el componente Board nos permitirá determinar el ganador en el futuro.
\nDebido a que el componente Square ahora no mantiene estado, los componentes Square reciben valores del componente Board e informan al mismo cuando son clickeados. En términos de React, los componentes Square ahora son componentes controlados. El componente Board tiene control completo sobre ellos.
\nNotar cómo en handleClick, llamamos .slice() para crear una copia del array de squares para modificarlo en vez de modificar el array existente. Ahora explicaremos porqué crear una copia del array squares en la siguiente sección.
¿Por qué es importante la inmutabilidad?
\nEn el ejemplo de código anterior, sugerimos que crearas una copia del array de squares con el método slice() en vez de modificar el array existente. Ahora discutiremos la inmutabilidad y por qué es importante aprenderla.
Hay generalmente dos enfoques para cambiar datos. El primer enfoque es mutar los datos directamente cambiando sus valores. El segundo enfoque es reemplazar los datos con una nueva copia que tiene los cambios deseados.
\nCambio de datos con mutación
\nvar player = {score: 1, name: 'Jeff'};\nplayer.score = 2;\n// Ahora `player` es {score: 2, name: 'Jeff'}Cambio de datos sin mutación
\nvar player = {score: 1, name: 'Jeff'};\n\nvar newPlayer = Object.assign({}, player, {score: 2});\n// Ahora `player` no ha cambiado, pero `newPlayer` es {score: 2, name: 'Jeff'}\n\n// O si usas la sintaxis de propagación de objeto, puedes escribir:\n// var newPlayer = {...player, score: 2};El resultado final es el mismo, pero al no mutar (o cambiar los datos subyacentes) directamente, obtenemos muchos beneficios descritos a continuación
\nFuncionalidades complejas se vuelven simples
\nLa inmutabilidad hace que funcionalidades complejas sean mucho más fácil de implementar. Luego en este tutorial, implementaremos una funcionalidad de “viaje en el tiempo” que nos permite repasar el historial del juego tic-tac-toe y “volver” a movimientos previos. Esta funcionalidad no es específica de juegos, una habilidad de deshacer y rehacer ciertas acciones es un requerimiento común en aplicaciones. Evitar la mutación de datos directamente nos permite mantener intacto versiones previas del historial del juego, y reusarlas luego.
\nDetectar cambios
\nDetectar cambios en objetos mutables es difícil porque son modificados directamente. Esta detección requiere que los objetos mutables sean comparados a la copia previa del mismo y que el árbol entero del objeto sea recorrido.
\nDetectar cambios en objetos inmutables es considerablemente más sencillo. Si el objeto inmutable que está siendo referenciado es diferente del anterior, significa que el objeto ha cambiado.
\nDeterminar cuando re-renderizar en React
\nEl beneficio principal de la inmutabilidad es que te ayuda a construir componentes puros en React. Con datos inmutables se puede determinar fácilmente si se han realizado cambios, lo que ayuda también a determinar cuando un componente requiere ser re-renderizado.
\nPuedes aprender más acerca de shouldComponentUpdate() y cómo puedes construir componentes puros leyendo Optimizando el rendimiento.
Componentes de función
\nAhora cambiaremos el componente Square a ser un componente de función.
\nEn React, componentes de función son una forma más simple de escribir componentes que solo contienen un método render y no tiene estado propio. En lugar de definir una clase que extiende React.Component, podemos escribir una función que toma props como parámetros y retorna lo que se debe renderizar. Componentes de función son menos tediosos de escribir que clases, y muchos componentes pueden ser expresados de esta manera.
Reemplaza la clase Square por esta función:
\nfunction Square(props) {\n return (\n <button className=\"square\" onClick={props.onClick}>\n {props.value}\n </button>\n );\n}Hemos cambiado this.props a props en ambas veces que aparece.
Ver el código completo en este punto
\n\n\nNota
\nCuando modificamos el componente Square a ser un componente de función, también cambiamos
\nonClick={() => this.props.onClick()}a una más cortaonClick={props.onClick}(notar la falta de paréntesis en ambos lados).
Tomando turnos
\nAhora necesitamos corregir un defecto obvio en nuestro juego tic-tac-toe: las “O” no pueden ser marcadas en el tablero.
\nEstableceremos el primer movimiento a ser una “X” por defecto. Podemos establecer el valor por defecto modificando el estado inicial en nuestro constructor del componente Board:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }Cada vez que el jugador haga un movimiento, xIsNext (un booleano) será invertido para determinar qué jugador sigue y el estado del juego será guardado. Actualizaremos la función handleClick del componente Board para invertir el valor de xIsNext:
handleClick(i) {\n const squares = this.state.squares.slice();\n squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext, });\n }Con este cambio, “X”s y “O”s pueden tomar turnos. ¡Inténtalo!
\nTambién vamos a cambiar el texto de “status” en el render del Board para que muestre qué jugador tiene el siguiente turno:
render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n // el resto no ha cambiadoLuego de aplicar estos cambios, deberíamos tener este componente Board:
\nclass Board extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n squares: Array(9).fill(null),\n xIsNext: true, };\n }\n\n handleClick(i) {\n const squares = this.state.squares.slice(); squares[i] = this.state.xIsNext ? 'X' : 'O'; this.setState({ squares: squares, xIsNext: !this.state.xIsNext, }); }\n\n renderSquare(i) {\n return (\n <Square\n value={this.state.squares[i]}\n onClick={() => this.handleClick(i)}\n />\n );\n }\n\n render() {\n const status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Ver el código completo en este punto
\nDeclarando un ganador
\nAhora que mostramos de qué jugador es el siguiente turno, debemos también mostrar cuando alguien ganó el juego y si no hay más movimientos que hacer. Copia esta función de apoyo y pégala al final del archivo.
\nfunction calculateWinner(squares) {\n const lines = [\n [0, 1, 2],\n [3, 4, 5],\n [6, 7, 8],\n [0, 3, 6],\n [1, 4, 7],\n [2, 5, 8],\n [0, 4, 8],\n [2, 4, 6],\n ];\n for (let i = 0; i < lines.length; i++) {\n const [a, b, c] = lines[i];\n if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {\n return squares[a];\n }\n }\n return null;\n}Dado un arreglo de 9 cuadrados, esta función comprobará si hay un ganador y devolverá 'X', 'O' o null según corresponda.
Llamaremos a calculateWinner(squares) en el método render del componente Board para revisar si un jugador ha ganado. Si un jugador ha ganado, podemos mostrar un texto como: “Winner: X” o “Winner: O”. Reemplazaremos la declaración del status en el método render de Board con este código:
render() {\n const winner = calculateWinner(this.state.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n // el resto del código no ha cambiadoAhora podemos cambiar la función handleClick del componente Board para retornar rápidamente ignorando un click si alguien ha ganado el juego o si un cuadrado está ya rellenado:
handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) { return; } squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }Ver el código completo en este punto
\n¡Felicidades! Ahora tienes un juego tic-tac-toe funcionando. Y también acabas de aprender lo básico de React. Así que eres probablemente el real ganador aquí.
\nAgregando viaje en el tiempo
\nComo ejercicio final, vamos a hacer posible “retroceder en el tiempo” al movimiento previo en el juego.
\nAlmacenando un historial de movimientos
\nSi mutamos el array de squares, implementar viaje en el tiempo sería muy difícil.
Sin embargo, usamos slice() para crear una copia nueva del array de squares después de cada movimiento, y lo tratamos como inmutable. Esto nos permite almacenar cada versión previa del array de squares, y navegar entre los turnos que ya han pasado.
Almacenaremos los pasados arrays de squares en otro array llamado history. El array history representa todos los estados del tablero, desde el primer movimiento hasta el último, y tiene una forma como esta:
history = [\n // Antes del primer movimiento\n {\n squares: [\n null, null, null,\n null, null, null,\n null, null, null,\n ]\n },\n // Luego del primer movimiento\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, null,\n ]\n },\n // Luego del segundo movimiento\n {\n squares: [\n null, null, null,\n null, 'X', null,\n null, null, 'O',\n ]\n },\n // ...\n]Ahora necesitamos decidir qué componente debe ser el dueño del estado history.
Elevando el estado, otra vez
\nQueremos que el componente de nivel superior, Game, muestre una lista de los movimientos pasados. Necesitará acceso al historial para hacerlo, así que colocaremos el estado history en el componente Game.
Colocando el estado history en el componente Game te permite eliminar el estado squares de su componente hijo Board. Tal como “elevamos el estado” del componente Square al componente Board, ahora elevaremos del Board al componente Game. Esto dará al componente Game completo control sobre los datos de Board, y permitirá instruir al tablero que renderice los turnos previos desde el history.
Primero, vamos a establecer el estado inicial para el componente Game en su constructor:
\nclass Game extends React.Component {\n constructor(props) { super(props); this.state = { history: [{ squares: Array(9).fill(null), }], xIsNext: true, }; }\n render() {\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board />\n </div>\n <div className=\"game-info\">\n <div>{/* status */}</div>\n <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }\n}A continuación, haremos que el componente Board reciba las props squares y onClick del componente Game. Desde ahora tenemos un solo manejador de click en Board para muchos Squares, necesitamos pasar la ubicación de cada Square en el manejador onClick para indicar qué cuadrado fue clickeado. Aquí están los pasos requeridos para transformar el componente Board:
- \n
- Eliminar el
constructoren Board. \n - Reemplazar
this.state.squares[i]porthis.props.squares[i]en el métodorenderSquaredel componente Board. \n - Reemplazar
this.handleClick(i)porthis.props.onClick(i)en el métodorenderSquaredel componente Board. \n
El componente Board ahora se ve así:
\nclass Board extends React.Component {\n handleClick(i) {\n const squares = this.state.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n squares: squares,\n xIsNext: !this.state.xIsNext,\n });\n }\n\n renderSquare(i) {\n return (\n <Square\n value={this.props.squares[i]} onClick={() => this.props.onClick(i)} />\n );\n }\n\n render() {\n const winner = calculateWinner(this.state.squares);\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div>\n <div className=\"status\">{status}</div>\n <div className=\"board-row\">\n {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }\n}Actualizaremos el método render del componente Game para usar la entrada más reciente del historial para determinar y mostrar el estado del juego:
render() {\n const history = this.state.history; const current = history[history.length - 1]; const winner = calculateWinner(current.squares); let status; if (winner) { status = 'Winner: ' + winner; } else { status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O'); }\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board squares={current.squares} onClick={(i) => this.handleClick(i)} /> </div>\n <div className=\"game-info\">\n <div>{status}</div> <ol>{/* TODO */}</ol>\n </div>\n </div>\n );\n }Dado que el componente ahora está renderizando el estado del juego, podemos eliminar el código correspondiente del método render del Board. Luego de refactorizar, el método render se ve así:
render() { return ( <div> <div className=\"board-row\"> {this.renderSquare(0)}\n {this.renderSquare(1)}\n {this.renderSquare(2)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(3)}\n {this.renderSquare(4)}\n {this.renderSquare(5)}\n </div>\n <div className=\"board-row\">\n {this.renderSquare(6)}\n {this.renderSquare(7)}\n {this.renderSquare(8)}\n </div>\n </div>\n );\n }Por último, necesitamos mover el método handleClick del componente Board al componente Game. También necesitamos modificar handleClick porque el estado del componente Game está estructurado diferente. En el método handleClick de Game, concatenamos la nueva entrada del historial en history.
handleClick(i) {\n const history = this.state.history; const current = history[history.length - 1]; const squares = current.squares.slice(); if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{ squares: squares, }]), xIsNext: !this.state.xIsNext,\n });\n }\n\nNota
\nA diferencia del método
\npush()de los arrays que debes estar más familiarizado, el métodoconcat()no muta el array original, por eso lo preferimos.
En este punto, el componente Board solo necesita los métodos renderSquare y render. El estado del juego y el método handleClick deberían estar en el componente Game.
Ver el código completo en este punto
\nMostrando los movimientos anteriores
\nDesde que grabamos el historial del juego tic-tac-toe, ahora podemos mostrarlo al jugador como una lista de movimientos anteriores.
\nAprendimos antes que los elementos de React son objetos de primera clase en JavaScript; así que podemos pasarlo alrededor de nuestras aplicaciones. Para renderizar múltiples elementos en React, podemos usar un array de elementos de React.
\nEn JavaScript, los arrays tienen un método map() que es comúnmente usado para mapear datos a otros datos, por ejemplo:
const numbers = [1, 2, 3];\nconst doubled = numbers.map(x => x * 2); // [2, 4, 6]Usando el método map, podemos mapear nuestro historial de movimientos a elementos de React representando botones en la pantalla, y mostrando una lista de botones para “saltar” a movimientos anteriores.
Vamos a mapear sobre el historial en el método render del componente Game:
render() {\n const history = this.state.history;\n const current = history[history.length - 1];\n const winner = calculateWinner(current.squares);\n\n const moves = history.map((step, move) => { const desc = move ? 'Go to move #' + move : 'Go to game start'; return ( <li> <button onClick={() => this.jumpTo(move)}>{desc}</button> </li> ); });\n let status;\n if (winner) {\n status = 'Winner: ' + winner;\n } else {\n status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');\n }\n\n return (\n <div className=\"game\">\n <div className=\"game-board\">\n <Board\n squares={current.squares}\n onClick={(i) => this.handleClick(i)}\n />\n </div>\n <div className=\"game-info\">\n <div>{status}</div>\n <ol>{moves}</ol> </div>\n </div>\n );\n }Ver el código completo en este punto
\nMientras iteramos por el array history, la variable step hace referencia al valor del elemento actual de history, y move hace referencia al índice del elemento actual de history. Aquí solo nos interesa move, por lo que no se asigna step a nada.
Por cada movimiento en el historial del juego de tic-tac-toe, creamos un elemento de lista <li> que contiene un botón <button>. El botón tiene un manejador onClick que invoca a un método llamado this.jumpTo(). No hemos implementado el método jumpTo() aun. Por ahora, debemos ver una lista de los movimientos que han ocurrido en el juego y una advertencia en la consola de las herramientas de desarrollador que dice:
\n\nAtención:\nCada hijo de un array o iterador debe tener una prop única “key”. Revisa el método render de “Game”.
\n
Vamos a discutir que significa la advertencia anterior.
\nEscogiendo una key
\nCuando renderizamos una lista, React almacena información acerca de cada elemento de la lista renderizado. Cuando actualizamos una lista, React necesita determinar qué ha cambiado. Podríamos haber añadido, eliminado, reacomodado, o actualizado los elementos de la lista.
\nImagina cambiar de
\n<li>Alexa: 7 tasks left</li>\n<li>Ben: 5 tasks left</li>a
\n<li>Ben: 9 tasks left</li>\n<li>Claudia: 8 tasks left</li>\n<li>Alexa: 5 tasks left</li>Además de los contadores actualizados, un humano leyendo esto probablemente diría que se intercambiaron el orden de Alexa y Ben e insertaron Claudia entre ellos. Sin embargo, React es un programa de computadora y no sabe lo que intentamos. Porque React no puede saber nuestras intenciones, necesitamos especificar una propiedad key para cada elemento de la lista para diferenciar cada uno de sus hermanos. Una opción sería usar los strings alexa, ben, claudia. Si fueramos a mostrar datos de una base de datos, los ids de base de datos de Alexa, Ben y Claudia podrían ser usados como keys.
<li key={user.id}>{user.name}: {user.taskCount} tasks left</li>Cuando una lista es re-renderizada, React toma cada key del elemento de la lista y busca el elemento de la lista anterior que coincida el key. Si la lista actual tiene un key que no existía antes, React crea un componente. Si a la lista actual le falta un key que existía en la lista anterior, React destruye el componente previo. Si dos keys coinciden, el componente correspondiente es movido. Los keys le dicen a React acerca de la identidad de cada componente lo cual permite a React mantener su estado entre re-renderizados. Si el key de un componente cambia, el componente será destruido y re-creado con un nuevo estado.
\nkey es una propiedad especial y reservada en React (al igual que con ref, una característica más avanzada). Cuando un elemento es creado, React extrae la propiedad key y la almacena directamente en el elemento retornado. Aun cuando el key puede verse que pertenece a las props, key no puede ser referenciado usando this.props.key. React automáticamente usa key para decidir qué componentes actualizar. Un componente no puede averiguar sobre su key.
Se recomienda fuertemente que uses keys apropiado cuando construyas listas dinámicas. Si no tienes un key apropiado, quizás quieras considerar reestructurar tus datos para que puedas tenerla.
\nSi el key no está especificado, React presentará una advertencia y usará el índice del array como índice por defecto. Usando el índice del array como un key es problemático cuando intentas reordenar los elementos de una lista ó insertar/eliminar elementos de la lista. Pasar explícitamente key={i} silencia la advertencia pero tiene los mismos problemas que los índices del array y no es recomendado en la mayoría de los casos.
Los keys no necesitan ser globalmente únicos; solo necesitan ser únicos entre componentes y sus hermanos..
\nImplementando viaje en el tiempo
\nEn el historial del juego de tic-tac-toe, cada movimiento anterior tiene un ID único asociado; es el número secuencial del movimiento. Los movimientos nunca son reordenados, eliminados, ó insertados en el medio, así que es seguro usar los índices del movimiento como un key.
\nEn el método render del componente Game, podemos agregar el key como <li key={move} la advertencia de React debería desaparecer:
const moves = history.map((step, move) => {\n const desc = move ?\n 'Go to move #' + move :\n 'Go to game start';\n return (\n <li key={move}> <button onClick={() => this.jumpTo(move)}>{desc}</button>\n </li>\n );\n });Ver el código completo en este punto
\nHaciendo click en cualquiera de los botones de la lista arroja un error porque el método jumpTo no está definido. Antes de implementar jumpTo, agregaremos stepNumber al estado del componente Game para indicar qué paso estamos viendo actualmente.
Primero, agrega stepNumber: 0 al estado inicial en el constructor de Game:
class Game extends React.Component {\n constructor(props) {\n super(props);\n this.state = {\n history: [{\n squares: Array(9).fill(null),\n }],\n stepNumber: 0, xIsNext: true,\n };\n }Luego, definiremos el método jumpTo en el componente Game para actualizar el stepNumber. También estableceremos xIsNext a verdadero si el número que estamos cambiando en stepNumber es par:
handleClick(i) {\n // este método no ha cambiado\n }\n\n jumpTo(step) { this.setState({ stepNumber: step, xIsNext: (step % 2) === 0, }); }\n render() {\n // este método no ha cambiado\n }Nota que en el método jumpTo no hemos actualizado la propiedad history del estado. No lo hacemos que porque las actualizaciones de estado se mezclan, o en términos más simples, React solo actualizará las propiedades mencionadas en el método setState dejando el resto del estado como estaba. Para más información consulta la documentación
Ahora haremos unos pequeños cambios al método handleClick de Game, el cuál se dispara cuando haces click en un cuadrado.
El estado stepNumber que hemos añadido ahora refleja el movimiento mostrado al usuario. Después de hacer un nuevo movimiento, necesitamos actualizar stepNumber añadiendo stepNumber: history.length como parte del argumento de this.setState. Esto asegura que no nos estanquemos mostrando el mismo movimiento después de uno nuevo realizado.
También reemplazaremos this.state.history por this.state.history.slice(0, this.state.stepNumber + 1). Esto asegura que si “volvemos en el tiempo” y luego hacemos un nuevo movimiento desde ese punto, tiramos todo la historia “futura” que ahora sería incorrecta.
handleClick(i) {\n const history = this.state.history.slice(0, this.state.stepNumber + 1); const current = history[history.length - 1];\n const squares = current.squares.slice();\n if (calculateWinner(squares) || squares[i]) {\n return;\n }\n squares[i] = this.state.xIsNext ? 'X' : 'O';\n this.setState({\n history: history.concat([{\n squares: squares\n }]),\n stepNumber: history.length, xIsNext: !this.state.xIsNext,\n });\n }Finalmente, modificaremos el método render del componente Game de siempre renderizar el último movimiento a renderizar el movimiento seleccionado actualmente de acuerdo a stepNumber:
render() {\n const history = this.state.history;\n const current = history[this.state.stepNumber]; const winner = calculateWinner(current.squares);\n\n // el resto no ha cambiadoSi clickeamos en cualquier paso de la historia del juego, el tablero tic-tac-toe debería actualizarse inmediatamente para mostrar el tablero como se veía luego de que el paso ocurrió.
\nVer el código completo en este punto
\nConcluyendo
\n¡Felicitaciones! Has creado un juego de tic-tac-toe que:
\n- \n
- Te permite jugar tic-tac-toe, \n
- Indica cuando un jugador ha ganado el juego, \n
- Almacena el historial del juego como va progresando, \n
- Permite a los jugadores revisar el historial del juego y ver versiones anteriores del tablero de juego. \n
¡Buen trabajo! Esperamos que ahora te sientas que tienes un entendimiento decente sobre cómo funciona React.
\nRevisa el resultado final aquí: Resultado final.
\nSi tienes un tiempo extra o quieres practicar tus nuevas habilidades de React, aquí algunas ideas de mejoras que puedes hacer al juego de tic-tac-toe, las cuales están listadas en orden de dificultad creciente:
\n- \n
- Muestra la ubicación para cada movimiento en el formato (columna, fila) en la lista del historial de movimientos. \n
- Convierte en negrita el elemento actualmente seleccionado en la lista de movimientos. \n
- Reescribe el Board para usar 2 ciclos para hacer los cuadrados en vez de escribirlos a mano. \n
- Agrega un botón de switch que te permita ordenar los movimientos en orden ascendente o descendente. \n
- Cuando alguien gana, resalta los 3 cuadrados que hicieron que gane. \n
- Cuando nadie gana, muestra un mensaje acerca de que el resultado es un empate. \n
A lo largo de este tutorial, hemos abordado conceptos de React incluyendo elementos, componentes, props, y estado. Para una explicación más detallada de cada uno de estos temas, revisa el resto de la documentación. Para aprender más acerca de definir componentes, revisa la referencia del API de React.Component.