Cómo crear una aplicación de prueba con React, con consejos y código de inicio

En este tutorial de React para principiantes, vamos a crear una aplicación de prueba. Trabajaremos con objetos de estado complejos, cómo manejar diferentes ganchos de estado y renderizar cosas según el estado.

Echale un vistazo:

Inténtalo tú mismo

Si primero quiere probarlo usted mismo, aquí están los escenarios (también puede obtener el código de inicio a continuación):

  • Cuando el usuario hace clic en un botón, la siguiente pregunta debería aparecer
  • Si el usuario responde correctamente la pregunta, debería incrementar su puntuación
  • Cuando el usuario llega al final de la prueba, se debe mostrar su puntuación total

Tutorial en video

Código de inicio

Consíguelo en GitHub aquí.

¡Vamonos!

Si abre el código de inicio y va a App.js , verá que le he dado una lista de preguntas / respuestas, almacenada como una matriz llamada preguntas . Este es nuestro cuestionario.

Nuestro primer objetivo es tomar los datos de la pregunta de la matriz y mostrarlos en la pantalla.

Eliminaremos el texto codificado y tomaremos los datos de la primera pregunta por ahora, solo para que todo funcione. Nos preocuparemos por cambiar de pregunta más tarde.

En nuestro JSX, elimine el texto de la pregunta codificado y escriba {questions[0]}para obtener el primer elemento (o pregunta) en nuestra matriz de preguntas.

 {questions[0]} 

Representar la pregunta y las respuestas

La primera pregunta es un objeto, por lo que podemos usar la "notación de puntos" para obtener acceso a las propiedades. Ahora solo haremos {question[0].questionText}para obtener acceso al texto de la pregunta para este objeto:

 {questions[0].questionText} 

Guarde y ejecute la aplicación. Observe cómo se actualiza el texto. Recuerde que solo estamos tomando el texto de la primera pregunta del primer objeto en nuestra matriz de preguntas.

Adoptaremos un enfoque similar a las opciones de respuesta. Elimine los botones codificados y usaremos la función de mapa para recorrer las opciones de respuesta para una pregunta determinada.

Recuerde que la función de mapa recorre la matriz y nos da el elemento actual en el que se encuentra el bucle, en forma de variable.

Reemplace el div "sección de respuestas" con lo siguiente:

 {questions[0].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} 

Guarde y ejecute la aplicación. Observe cómo aparecen cuatro botones de respuesta y el texto se representa de forma dinámica.

Recapitulemos:

  • Recibimos la primera pregunta de la matriz de preguntas: questions[0]
  • La primera pregunta es un objeto, que contiene una matriz de answerOptions. Podemos llegar a esta matriz usando la notación de puntos:questions[0].answerOptions
  • Debido a que answerOptionses una matriz, podemos mapear esto:questions[0].answerOptions.map
  • Dentro de la función de mapa, representamos un botón para cada uno answerOptiony mostramos el texto

Cambiar preguntas usando el estado

Ahora volvamos a nuestro JSX. Note como si cambiamos questions[0]a questions[1], o questions[2], la interfaz de usuario a actualizar. Esto se debe a que está tomando los datos de diferentes preguntas en nuestra matriz de preguntas, según el índice.

Lo que queremos hacer es usar un objeto de estado para contener la pregunta en la que está actualmente el usuario y actualizarla cuando se hace clic en un botón de respuesta. Puede ver esto al ejecutar el código en el ejemplo final.

Continúe y agregue un objeto de estado, que contendrá el número de pregunta actual en el que se encuentra el usuario. Esto se inicializará en 0 para que el cuestionario tome la primera pregunta de la matriz:

const [currentQuestion, setCurrentQuestion] = useState(0); 

Ahora queremos reemplazar el '0' codificado en nuestro JSX con esta variable. Primero para el texto de la pregunta:

 {questions[currentQuestion].questionText} 

Y también para la sección de preguntas:

 {questions[currentQuestion].answerOptions.map((answerOption, index) => ( {answerOption.answerText} ))} 

Ahora, si inicializa currentQuestion con un valor diferente a 0, por ejemplo 1 o 2, la interfaz de usuario se actualizará para mostrar la pregunta y las respuestas para esa pregunta en particular. ¡Muy genial!

Agreguemos algo de código para que cuando hagamos clic en una respuesta, incrementemos el valor currentQuestion para llevarnos a la siguiente pregunta.

Cree una nueva función llamada handleAnswerButtonClick . Esto es lo que se llamará cuando el usuario haga clic en una respuesta.

Vamos a incrementar el valor actual de la pregunta en uno, guardarlo en una nueva variable y establecer esta nueva variable en estado:

const handleAnswerButtonClick = (answerOption) => { const nextQuestion = currentQuestion + 1; setCurrentQuestion(nextQuestion); }; 

Luego agregue un evento onClick a nuestro botón así:

 handleAnswerButtonClick()}>{answerOption.answerText} 

Si intentamos esto, verá que funciona, hasta que lleguemos al final:

¿Entonces que esta pasando? Bueno, en nuestra función handleAnswerButtonClick , estamos incrementando el número y configurándolo en estado. Está bien.

Pero recuerde que usamos este número para acceder a una matriz, con el fin de obtener las opciones de preguntas y respuestas. Una vez que lleguemos a 5, se romperá ya que no hay un quinto elemento.

Hagamos una verificación para asegurarnos de que no superemos el límite. En nuestra función handleAnswerButtonClick, agreguemos la siguiente condición:

if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { alert('you reached the end of the quiz'); } 

Esto básicamente dice que si el número de la siguiente pregunta es menor que el número total de preguntas, actualice el estado a la siguiente pregunta. De lo contrario, hemos llegado al final de la prueba, así que muestre una alerta por ahora.

Mostrar la pantalla de puntuación

En lugar de mostrar una alerta, lo que queremos hacer es mostrar la pantalla de "puntuación".

Si miramos el JSX, notará que he puesto el marcado aquí para usted, solo necesitamos reemplazar "falso" con la lógica.

Entonces, ¿cómo lo hacemos? ¡Bueno, esto es perfecto para poner en marcha!

Agregue otro objeto de estado que almacenará si queremos mostrar la pantalla de puntuación o no:

const [showScore, setShowScore] = useState(false); 

Y reemplazar falsecon showScoreen nuestra JSX:

 {showScore ? // ... score section markup : // ... quiz question/answer markup} 

Nada cambiará, pero si cambiamos el valor del estado a verdadero, se mostrará el div de puntuación. Esto se debe a que todo está envuelto en un ternario, es decir:

"Si showScore es verdadero, renderice la marca de la sección de puntuación; de lo contrario, renderice la marca de pregunta / respuesta del cuestionario"

Ahora, queremos actualizar esta variable de estado cuando el usuario haya llegado al final de la prueba. Ya hemos escrito la lógica para esto en nuestra función handleAnswerButtonClick.

Todo lo que tenemos que hacer es reemplazar la lógica de alerta que actualiza la variable showScore para que sea verdadera:

if (nextQuestion < questions.length) { setCurrentQuestion(nextQuestion); } else { setShowScore(true); } 

Si hacemos clic en las respuestas del cuestionario, se mostrará la sección de puntuación cuando lleguemos al final. Por el momento, el texto y la puntuación que se muestran son una cadena codificada, por lo que deberíamos hacerla dinámica.

Guardar la partitura

Nuestra siguiente tarea es mantener una puntuación en algún lugar de nuestra aplicación e incrementar este valor si el usuario selecciona la opción correcta.

El lugar lógico para hacer esto es dentro de la función "handleAnswerOptonClick".

Recuerde que cuando iteramos sobre answerOptions , la función de mapa nos da un objeto para cada uno que incluye el questionText , y un valor booleano que muestra si esa respuesta es correcta o no. Este booleano es lo que usaremos para ayudarnos a incrementar nuestra puntuación.

En nuestro botón, actualice la función así:

onClick={()=> handleAnswerButtonClick(answerOption.isCorrect) 

A continuación, actualice la función para aceptar este parámetro:

const handleAnswerButtonClick = (isCorrect) => { //... other code }; 

Ahora podemos agregar algo de lógica aquí en nuestra función. Por ahora queremos decir "si isCorrect es verdadero, queremos mostrar una alerta":

const handleAnswerButtonClick = (isCorrect) => { if (isCorrect) { alert(“the answer is correct!”) } //...other code }; 

Esto es lo mismo que if(isCorrect === true), solo una versión abreviada. Ahora, si intentamos esto, verá que recibimos una alerta cuando hacemos clic en la respuesta correcta.

Solo para recapitular hasta ahora:

  • Cuando iteramos sobre los botones, pasamos el isCorrectvalor booleano de ese botón a la función handleAnswerButtonClick
  • En la función verificamos si este valor es verdadero y mostramos una alerta si lo es.

A continuación, queremos guardar la partitura. ¿Cómo crees que hacemos esto? Si dijiste valor de estado, ¡estás en lo correcto!

Continúe y agregue otro valor de estado llamado "puntaje". Recuerde prefijar la función para cambiar el valor con "set" para que sea setScore. Inicializarlo en 0:

const [score, setScore] = useState(0); 

A continuación, en lugar de mostrar una alerta, queremos actualizar nuestra puntuación en 1 si el usuario obtuvo la respuesta correcta.

En nuestra función handleAnswerButtonClick , elimine la alerta e incremente nuestra puntuación en uno:

const handleAnswerButtonClick = (isCorrect) => { if (answerOption.isCorrect) { setScore(score + 1); } //...other code }; 

Mostrando la puntuación

Para mostrar la puntuación solo tenemos que hacer un pequeño cambio en nuestro código de renderizado. En nuestro JSX, elimine la cadena codificada en la sección de puntuación y agregue esta nueva variable:

 You scored {score} out of {questions.length} 
 You scored {score} out of {questions.length} 

Ahora, si revisamos las respuestas, la puntuación es dinámica y se mostrará correctamente al final.

Una última cosa antes de terminar nuestra aplicación de prueba: notará que la pregunta actual que se muestra en la interfaz de usuario siempre es "1", ya que está codificada. Necesitamos cambiar esto para que sea más dinámico.

Reemplace el "recuento de preguntas" con lo siguiente:

 Question {currentQuestionIndex + 1}/{questions.length} 

Recuerde que necesitamos el +1 ya que las computadoras comienzan a contar desde 0 y no desde 1.

¿Quieres más ideas de proyectos?

¿Por qué no intentar crear algunos proyectos de React para impulsar aún más su aprendizaje? Cada semana te envío un nuevo proyecto para que pruebes un ejemplo funcional, un código de inicio y consejos. Suscríbete para recibir esto directamente en tu bandeja de entrada.