React 入门指南：用React打造你的第一个答题 App

2024-02-17 02:23:25

React 是一个流行的 JavaScript 框架，用于构建用户界面。它以其组件化的编程思想而闻名，使得代码简洁易懂。React Hooks 是 React 16.8 发布以来最吸引人的特性之一，它简化了原有代码的编写，是未来 React 应用的主流写法。

在本教程中，我们将从零开始，手把手教你使用 React Hooks 开发一个简单的答题 App。我们将逐步讲解每个步骤，让你快速掌握 React Hooks 的使用方法。

先决条件

在开始之前，你需要确保已经安装了以下软件：

Node.js
npm
React CLI

如果你还没有安装这些软件，请按照以下步骤进行安装：

安装 Node.js：访问 Node.js 官网下载并安装 Node.js。
安装 npm：npm 是 Node.js 的包管理工具，用于安装和管理 JavaScript 包。npm 通常随 Node.js 一起安装，但如果你没有安装，可以使用以下命令进行安装：

npm install -g npm

安装 React CLI：React CLI 是一个命令行工具，用于创建和管理 React 项目。可以使用以下命令进行安装：

npm install -g create-react-app

创建 React 项目

安装好所有必要的软件后，就可以开始创建 React 项目了。打开终端，输入以下命令：

create-react-app react-quiz-app

这将创建一个名为 react-quiz-app 的新 React 项目。

启动 React 项目

创建好项目后，就可以启动项目了。进入项目目录，输入以下命令：

cd react-quiz-app

npm start

这将启动 React 项目，并在浏览器中打开项目。

编写 React 代码

项目启动后，就可以开始编写 React 代码了。在 src 文件夹下，找到 App.js 文件，这是 React 项目的入口文件。打开 App.js 文件，将里面的代码替换为以下代码：

import React, { useState } from "react";

const App = () => {
  const [questions, setQuestions] = useState([
    {
      question: "What is the capital of France?",
      answers: [
        "Paris",
        "London",
        "Rome",
        "Berlin",
      ],
      correctAnswer: "Paris",
    },
    {
      question: "What is the largest planet in our solar system?",
      answers: [
        "Jupiter",
        "Saturn",
        "Uranus",
        "Neptune",
      ],
      correctAnswer: "Jupiter",
    },
    {
      question: "Who is the current President of the United States?",
      answers: [
        "Donald Trump",
        "Joe Biden",
        "Barack Obama",
        "George W. Bush",
      ],
      correctAnswer: "Joe Biden",
    },
  ]);

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

  const handleAnswer = (answer) => {
    if (answer === questions[currentQuestion].correctAnswer) {
      setScore(score + 1);
    }

    setCurrentQuestion(currentQuestion + 1);
  };

  return (
    <div className="App">
      <h1>React Quiz App</h1>
      <div className="question-container">
        <p>{questions[currentQuestion].question}</p>
        <ul>
          {questions[currentQuestion].answers.map((answer, index) => (
            <li key={index}>
              <button onClick={() => handleAnswer(answer)}>{answer}</button>
            </li>
          ))}
        </ul>
      </div>
      <div className="score-container">
        <p>Score: {score}</p>
      </div>
    </div>
  );
};

export default App;

这段代码定义了一个 React 组件，名为 App。这个组件包含了三个状态变量：questions、currentQuestion 和 score。questions 变量包含了三个问题，每个问题都有一个问题、四个答案选项和一个正确答案。currentQuestion 变量表示当前正在显示的问题的索引。score 变量表示当前的得分。

App 组件还定义了一个 handleAnswer 函数，用于处理用户对问题的回答。当用户点击一个答案选项时，handleAnswer 函数会检查该选项是否正确，并更新 score 和 currentQuestion 变量。

最后，App 组件返回了一个 JSX 元素，定义了应用程序的 UI。JSX 元素包含了三个部分：问题容器、答案容器和得分容器。问题容器包含了当前正在显示的问题和四个答案选项。答案容器包含了四个按钮，每个按钮对应一个答案选项。得分容器包含了当前的得分。