TypeScript is an open-source programming language, developed and maintained by Microsoft. It is a strongly typed language that builds on javascript. It is usually used in large-scale projects. It follows javascript syntax and adds more features to it.
ReactJS is an open-source Javascript library specially used to design UI(user interfaces) majorly single-page applications. Having a large developer community it is widely used for making single-page applications.
A simple Quiz App that contains a set of curated questions and their answers and checks for the correctness of the answer given by the user. It navigates through the questions using dynamic programming. A quiz can be used as a method of assessment in education and other similar fields to measure knowledge or skills.
In this article, we will learn how to build a quiz app using ReactJS and Typescript.
Modules required:
- npm
- React
- React Bootstrap
- Typescript
Basic Setup:Â
Step 1: Run the following commands to create a new React project using the create-react-app package:
npx create-react-app quiz-app --template typescript
Step 2: Change the directory to the project root directory:
cd quiz-app
Step 3: Change directory to src:
cd src
Step 4: Delete everything inside the directory
rm *
Step 5: Now will create a components directory in the src folder and Question.tsx and Quiz.tsx files in it.
mkdir components && cd components && touch Question.tsx touch Quiz.tsx
Step 6: Now we will go to the src directory using these commands:
cd ..
Step 7: The src directory will create an index.tsx, App.tsx, and index.css using the following commands:
touch index.tsx && touch index.css && touch App.tsx
Project Structure: The project structure will be as follows:
Â
Start the server using the following command:
npm start
Example 1:
- src/index.tsx file:
Javascript
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; Â Â const root = ReactDOM.createRoot( Â Â Â Â document.getElementById('root') as HTMLElement ); root.render( Â Â Â Â <React.StrictMode> Â Â Â Â Â Â Â Â <App /> Â Â Â Â </React.StrictMode> ); |
- src/components/Question.tsx: This component will be responsible for displaying each question.
Javascript
import React from 'react';   interface Props {     question: string;     choices: string[];     answer: string;     onAnswer: (answer: string) => void; }   const Question: React.FC<Props> = (     { question, choices, answer, onAnswer }) => {     return (         <div className="d-flex                         justify-content-center                         align-center                         text-center                         flex-column">             <h2 className="">{question}</h2>             <div className="">                 {choices.map((choice) => (                     <button className="btn btn-success m-2"                         onClick={() => onAnswer(choice)}>                                         {choice}</button>                 ))}             </div>         </div>     ); };   export default Question; |
- src/components/Quiz.tsx: This file will be the component responsible for managing the quiz and displaying the questions.
Javascript
import React, { useState } from 'react'; import Question from './Question';   const questions = [     {         question: 'What is the capital of France?',         choices: ['Paris', 'London', 'New York'],         answer: 'Paris',     },     {         question: 'What is the largest planet in our solar system?',         choices: ['Mars', 'Jupiter', 'Venus'],         answer: 'Jupiter',     },     {         question: 'What is the boiling point of water?',         choices: ['100°C', '0°C', '50°C'],         answer: '100°C',     },     {         question: 'What is the largest planet in our solar system?',         choices: ['Mars', 'Jupiter', 'Venus'],         answer: 'Jupiter',     },     {         question: 'What is the boiling point of water?',         choices: ['100°C', '0°C', '50°C'],         answer: '100°C',     }, ];   const Quiz: React.FC = () => {     const [currentQuestion, setCurrentQuestion] = useState(0);     const [score, setScore] = useState(0);       const handleAnswer = (answer: string) => {         if (answer === questions[currentQuestion].answer) {             setScore(score + 1);         }           const nextQuestion = currentQuestion + 1;         if (nextQuestion < questions.length) {             setCurrentQuestion(nextQuestion);         } else {             alert(`Quiz finished. You scored ${score}/${questions.length}`);         }     };       return (         <div>             <h1 className="text-center">Quiz App</h1>             {currentQuestion < questions.length ? (                 <Question                     question={questions[currentQuestion].question}                     choices={questions[currentQuestion].choices}                     answer={questions[currentQuestion].answer}                     onAnswer={handleAnswer}                 />             ) : "null"            }         </div>     ) }   export default Quiz; |
- src/App.tsx: As we are done with implementing all the components in the project, let us now import them into the App.tsx to see them in action.Â
Javascript
import Quiz from "./components/Quiz"; import 'bootstrap/dist/css/bootstrap.min.css'; Â Â function App() { Â Â Â Â return ( Â Â Â Â Â Â Â Â <div className="container my-5"> Â Â Â Â Â Â Â Â Â Â Â Â <Quiz /> Â Â Â Â Â Â Â Â </div> Â Â Â Â ); } Â Â export default App; |
Output:
How to build a Quiz App with React and TypeScript
