使用 ReactJS 创建一个测验应用程序

React 是一个用于开发交互式用户界面的 JavaScript 库。它由 Facebook 和一个由个人开发者和公司组成的社区管理。 react主要专注于开发单页网页或移动应用。在这里，我们将创建一个测验应用程序来了解 reactjs 的基础知识。

所需模块：

npm
反应
反应引导
```
npm install react-bootstrap bootstrap
```

基本设置：

通过以下命令启动项目 -

npx create-react-app quiz

NPX是 npm 5.2+ 自带的包运行工具，npx 是易于使用的 CLI 工具。 npx 用于执行节点包。它极大地简化了许多事情，其中之一是快速检查/运行节点包，而无需在本地或全局安装它。

现在，转到文件夹创建

cd quiz

启动服务器 - 通过在终端中键入以下命令启动服务器 -

npm start

打开http://localhost:3000/

将目录更改为 src –

cd src

删除目录中的所有内容

rm *

现在创建index.js文件

touch index.js

该文件会将我们的应用程序渲染为现在位于公共文件夹中的 html 文件，使用文件src/components/QuestionBox.js和src/components/ResultBox.js创建一个文件夹名称 components 来保存我们的应用程序组件和一个带有文件src的文件夹问题/question/index.js来保存我们的问题。

mkdir components && cd components && touch app.js

mkdir question && cd question && index.js

编辑 src/index.js 文件
该文件包含我们的应用程序逻辑。

import React, {Component} from "react";
import ReactDOM from "react-dom";
import "./style.css";
import questionAPI from './question';
import QuestionBox from './components/QuestionBox';
import Result from './components/ResultBox';
  
class Quiz extends Component {
  constructor() {
    super();
    this.state = {
      questionBank: [],
      score: 0,
      responses: 0
    };
  }
  
  // Function to get question from ./question
  getQuestions = () => {
    questionAPI().then(question => {
      this.setState({questionBank: question});
    });
  };
  
  // Set state back to default and call function
  playAgain = () => {
    this.getQuestions();
    this.setState({score: 0, responses: 0});
  };
  
  // Function to compute scores
  computeAnswer = (answer, correctAns) => {
    if (answer === correctAns) {
      this.setState({
        score: this.state.score + 1
      });
    }
    this.setState({
      responses: this.state.responses < 5
        ? this.state.responses + 1
        : 5
    });
  };
  
  // componentDidMount function to get question
  componentDidMount() {
    this.getQuestions();
  }
  
  render() {
    return (
      
        QuizOn
      
  
      {this.state.questionBank.length > 0 && 
       this.state.responses < 5 && 
       this.state.questionBank.map(({question, answers,
       correct, questionId}) =>  this.computeAnswer(answer, correct)}/>)}
  
      {
        this.state.responses === 5
          ? ()
          : null
      }
  
    )
  }
}
  
ReactDOM.render(, document.getElementById("root"));

编辑 src/question/index.js 文件：该文件包含将显示的所有问题。

const qBank = [
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "099099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "093909"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "009039"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "090089"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "01010101"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "092299"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "099099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "222099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "2222099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "09922099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "222292099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "0998999099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "099099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "099099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "099099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "09459099"
  },
  {
    question:
      "how build the app ?",
    answers: ["vinayak", "sarthak", "somil", "devesh"],
    correct: "vinayak",
    questionId: "0912219099"
  },
  
];
  
// n = 5 to export 5 question
export default (n = 5) =>
  Promise.resolve(qBank.sort(() => 0.5 - Math.random()).slice(0, n));

编辑 src/components/QuestionBox.js 文件：该文件制作带有按钮的问题框。

import React, {useState} from "react";
import "../style.css";
  
// Function to question inside our app
const QuestionBox = ({ question, options, selected}) => {
  const [answer, setAnswer] = useState(options);
  return (
    
        {question}
        {answer.map((text, index) => (
          
        ))}
    
  )
};
  
export default QuestionBox;

编辑 src/components/ResultBox.js 文件：此文件显示结果。

import React from 'react';
import "../style.css";
  
const Result = ({score, playAgain}) => (
  
     Your score is {score} / 5 correct answer ! ! ! 
    
  
)
  
export default Result;

保存所有文件并启动服务器：

npm start

在浏览器中打开http://localhost:3000/ URL。它将显示结果。