React - quiz app cd.

Kontynuujemy mini-projekcik czyli quizowa Apka w biblioteczce React. Kontynuacja lekcji poprzednich – do dzieła.

Ok, po pierwsze utworzymy plik questions.js i tam robimy returna z tablicą (robiliśmy już coś podobnego w projekcie framework MVC w PHP):

export default [
    {
      id: 'q1',
      text: 'What is 2 + 2 = ?',
      answers: [
        '2',
        '4',
        '6',
        '8',
      ],
      correctIndex: 1
    },
    {
        id: 'q2',
        text: 'What is 2 x 2 = ?',
        answers: [
          '2',
          '4',
          '6',
          '8',
        ],
        correctIndex: 1
      },
      {
        id: 'q1',
        text: 'What is 2 + 2 x 2 = ?',
        answers: [
          '2',
          '4',
          '6',
          '8',
        ],
        correctIndex: 3
      },
  ];

Komponent RFC Question będzie bardzo prosty (plus jak to importujemy tutaj jest pokazane):

import QUESTIONS from './questions.js';
function Question({index}){
    return (
        <>
        <h2>{QUESTIONS[index].text}</h2>
        </>
    )
};

export {Question};

Ok, importy w Quiz RFC:

import QUESTIONS from './questions.js';
import { useState} from 'react';
import { Question } from './Question.js';

Komponent pomocniczy, którego eksportować nie będziemy:

function SimpleSummary({idx, len}){
    return (
        <>
        <p>Question {idx + 1} / {len}</p>
        </>
    )
}

Teraz początek komponentu Quiz, który będzie miał własny stan:

function Quiz({setMode, name, score, setScore}){

    const [userAnswers, setUserAnswers] = useState([]);

    const activeQuestionIndex = userAnswers.length;
    const quizIsComplete = activeQuestionIndex === QUESTIONS.length;

    function handleClick(){
            setScore(score => score + 1);
            setUserAnswers((arr) => [...arr, 1]);
    }

I teraz JSX, jeżeli wiemy, jak działają operatory logiczne to ten kod będzie dla nas piękny, jak nie, to szpetny, ale polecam rozgryźć go:

 return (
        <>
        <p>Your name: {name}</p>
        <p>Your score: {score}</p>
        {quizIsComplete || <Question index={activeQuestionIndex} /> }
        {quizIsComplete || <SimpleSummary idx={activeQuestionIndex} len={QUESTIONS.length}/>}
        {quizIsComplete || <button onClick={handleClick}>Answer</button> }
        {quizIsComplete && <button onClick={() => setMode('finish')}>Finish</button>}
       
        </>
    )
};

export {Quiz};

Polecam rozgryźć metodą prób i błędów jak to działa, na razie tak mi się napisało. Musimy rozumieć operatory logiczne i renderowanie w ten sposób.

Jasne, jest taka biblioteczka (chyba nawet więcej niż 1) jak React Control Structures. To zresztą bardzo typowe – ściągnij biblioteczkę dla osób, które nie wiedzą, jak działa short circuit evaluation (co się można w 5 minut jeśli nie 50 sekund nauczyć) ale chcą mieć control structures. Tak samo z typowanymi propsami dla Reacta bez TSa…

Ok, na razie to tyle. Potem pewnie zmienimy to i owo, ale fajnie wyszedł przykład z short circuitem i chciałem to opisać, pokazać, bo w sumie nie wiemy, ile z tego zostanie, a jest to ważna rzecz.

React – quiz app cd.