从0开始，手把手教你使用React开发答题App
项目演示地址
项目源码
视频教程
项目代码结构
前言
React 框架的优雅不言而喻，组件化的编程思想使得React框架开发的项目代码简洁，易懂，但早期 React 类组件的写法略显繁琐。React Hooks 是 React 16.8 发布以来最吸引人的特性之一，她简化了原有代码的编写，是未来 React 应用的主流写法。
本文通过一个实战小项目，手把手从零开始带领大家快速入门React Hooks。本项目线上演示地址：
在本项目中，会用到以下知识点：
- React 组件化设计思想
- React State 和 Props
- React 函数式组件的使用
- React Hooks useState 的使用
- React Hooks useEffect 的使用
- React 使用 Axios 请求远程接口获取问题及答案
- React 使用Bootstrap美化界面
Hello React
（1）安装node.js 官网链接
（2）安装vscode 官网链接
（3）安装 creat-react-app 功能组件，该组件可以用来初始化一个项目， 即按照一定的目录结构，生成一个新项目。 打开cmd 窗口 输入：
npm install --g create-react-app
npm install --g yarn
（-g 代表全局安装）
如果安装失败或较慢。需要换源，可以使用淘宝NPM镜像，设置方法为：
npm config set registry https://registry.npm.taobao.org
设置完成后，重新执行
npm install --g create-react-app
npm install --g yarn
（4）在你想创建项目的目录下 例如 D:/project/ 打开cmd命令 输入
create-react-app react-exam
去使用creat-react-app命令创建名字是react-exam的项目
安装完成后，移至新创建的目录并启动项目
cd react-exam
yarn start
一旦运行此命令，localhost:3000新的React应用程序将弹出一个新窗口。
项目目录结构
右键react-exam目录，使用vscode打开该目录。 react-exam项目目录中有一个/public和/src目录，以及node_modules，.gitignore，README.md，和package.json。
在目录/public中，重要文件是index.html，其中一行代码最重要
<div id="root"></div>
该div做为我们整个应用的挂载点
/src目录将包含我们所有的React代码。
要查看环境如何自动编译和更新您的React代码，请找到文件/src/App.js：
将其中的
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
修改为
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
和豆约翰 Learn React
</a>
保存文件后，您会注意到localhost:3000编译并刷新了新数据。
React-Exam项目实战
1. 首页制作
1.安装项目依赖，在package.json中添加：
"dependencies": {
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"axios": "^0.19.2",
"bootstrap": "^4.5.0",
"he": "^1.2.0",
"react-loading": "^2.0.3",
"reactstrap": "^8.4.1"
},
执行命令：
yarn install
修改index.js，导入bootstrap样式
import "bootstrap/dist/css/bootstrap.min.css";
修改App.css代码
html {
width: 80%;
margin-left: 10%;
margin-top: 2%;
}
.ansButton {
margin-right: 4%;
margin-top: 4%;
}
修改App.js,引入Quiz组件
import React from 'react';
import './App.css'
import { Quiz } from './Exam/Quiz';
function App() {
return (
<div className = 'layout'>
<Quiz></Quiz>
</div>
);
}
export default App;
在项目src目录下新增Exam目录，Exam目录中新建Quiz.js
Quiz组件的定义如下： Quiz.js，引入开始页面组件Toggle。
import React, { useState } from "react";
import { Toggle } from "./Toggle";
export const Quiz = () => {
const [questionData, setQuestionData] = useState([]);
const questions = questionData.map(({ question }) => [question]);
const answers = questionData.map(({ incorrect_answers, correct_answer }) =>
[correct_answer, incorrect_answers].flat()
);
return (
<>
<Toggle
setQuestionData={setQuestionData}
/>
</>
);
};
Toggle.js，点击开始按钮，通过axios访问远程接口，获得题目及答案。
import React from "react";
import axios from "axios";
import ToggleHeader from "./ToggleHeader";
import {
Button,
Form,
} from "reactstrap";
export const Toggle = ({
setQuestionData,
}) => {
const getData = async () => {
try {
const incomingData = await axios.get(
`https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=multiple`
);
setQuestionData(incomingData.data.results);
} catch (err) {
console.error(err);
}
};
return (
<>
<ToggleHeader />
<Form
onSubmit={(e) => {
e.preventDefault();
getData();
}}
>
<Button color="primary">开始</Button>
</Form>
</>
);
};
ToggleHeader.js
import React from "react";
import { Jumbotron, Container} from "reactstrap";
export default function ToggleHeader() {
return (
<Jumbotron fluid>
<Container fluid>
<h1 className="display-4">计算机知识小测验</h1>
</Container>
</Jumbotron>
);
}
https://opentdb.com/api.php接口返回的json数据格式为
{
"response_code": 0,
"results": [{
"category": "Science: Computers",
"type": "multiple",
"difficulty": "easy",
"question": "The numbering system with a radix of 16 is more commonly referred to as ",
"correct_answer": "Hexidecimal",
"incorrect_answers": ["Binary", "Duodecimal", "Octal"]
}, {
"category": "Science: Computers",
"type": "multiple",
"difficulty": "easy",
"question": "This mobile OS held the largest market share in 2012.",
"correct_answer": "iOS",
"incorrect_answers": ["Android", "BlackBerry", "Symbian"]
}, {
"category": "Science: Computers",
"type": "multiple",
"difficulty": "easy",
"question": "How many values can a single byte represent?",
"correct_answer": "256",
"incorrect_answers": ["8", "1", "1024"]
}, {
"category": "Science: Computers",
"type": "multiple",
"difficulty": "easy",
"question": "In computing, what does MIDI stand for?",
"correct_answer": "Musical Instrument Digital Interface",
"incorrect_answers": ["Musical Interface of Digital Instruments", "Modular Interface of Digital Instruments", "Musical Instrument Data Interface"]
}, {
"category": "Science: Computers",
"type": "multiple",
"difficulty": "easy",
"question": "In computing, what does LAN stand for?",
"correct_answer": "Local Area Network",
"incorrect_answers": ["Long Antenna Node", "Light Access Node", "Land Address Navigation"]
}]
}
程序运行效果：
当前项目目录结构为：
2. 问题展示页面
Quiz.js，新增toggleView变量用来切换视图。
const [toggleView, setToggleView] = useState(true);
Quiz.js，其中Question和QuestionHeader 组件，参见后面。
import { Question } from "./Question";
import { Jumbotron } from "reactstrap";
import QuestionHeader from "./QuestionHeader";
...
export const Quiz = () => {
var [index, setIndex] = useState(0);
const [questionData, setQuestionData] = useState([]);
...
return (
<>
{toggleView && (
<Toggle
setIndex={setIndex}
setQuestionData={setQuestionData}
setToggleView={setToggleView}
/>
)}
{!toggleView &&
(
<Jumbotron>
<QuestionHeader
setToggleView={setToggleView}
/>
<Question question={questions[index]} />
</Jumbotron>
)}
</>
);
使用index控制题目索引
var [index, setIndex] = useState(0);
修改Toggle.js 获取完远程数据，通过setToggleView(false);切换视图。
export const Toggle = ({
setQuestionData,
setToggleView,
setIndex,
}) => {
...
return (
<>
<ToggleHeader />
<Form
onSubmit={(e) => {
e.preventDefault();
getData();
setToggleView(false);
setIndex(0);
}}
>
<Button color="primary">开始</Button>
</Form>
</>
);
};
QuestionHeader.js代码： 同样的，点击 返回首页按钮 setToggleView(true)，切换视图。
import React from "react";
import { Button } from "reactstrap";
export default function QuestionHeader({ setToggleView, category }) {
return (
<>
<Button color="link" onClick={() => setToggleView(true)}>
返回首页
</Button>
</>
);
}
Question.js代码 接受父组件传过来的question对象，并显示。 其中he.decode是对字符串中的特殊字符进行转义。
import React from "react";
import he from "he";
export const Question = ({ question }) => {
// he is a oddly named library that decodes html into string values
var decode = he.decode(String(question));
return (
<div>
<hr className="my-2" />
<h1 className="display-5">
{decode}
</h1>
<hr className="my-2" />
<br />
</div>
);
};
程序运行效果：
首页
点击开始后，显示问题：
当前项目目录结构为：
3. 加载等待动画
新增LoadingSpin.js
import React from "react";
import { Spinner } from "reactstrap";
export default function LoadingSpin() {
return (
<>
<Spinner type="grow" color="primary" />
<Spinner type="grow" color="secondary" />
<Spinner type="grow" color="success" />
<Spinner type="grow" color="danger" />
</>
);
}
修改Quiz.js
import LoadingSpin from "./LoadingSpin";
export const Quiz = () => {
const [isLoading, setLoading] = useState(false);
return (
<>
{toggleView && (
<Toggle
...
setLoading={setLoading}
/>
)}
{!toggleView &&
(isLoading ? (
<LoadingSpin />
) :
(
...
))}
</>
);
};
修改Toggle.js
export const Toggle = ({
...
setLoading,
}) => {
const getData = async () => {
try {
setLoading(true);
const incomingData = await axios.get(
`https://opentdb.com/api.php?amount=10&category=18&difficulty=easy&type=multiple`
);
setQuestionData(incomingData.data.results);
setLoading(false);
} catch (err) {
console.error(err);
}
};
...
};
运行效果：
目前代码结构：
4. 实现下一题功能
新增Answer.js，用户点击下一题按钮，修改index，触发主界面刷新，显示下一题：
import React from "react";
import { Button } from "reactstrap";
export const Answer = ({ setIndex, index }) => {
function answerResult() {
setIndex(index + 1);
}
return (
<Button className="ansButton" onClick={answerResult}>
下一题
</Button>
);
};
修改Quiz.js，添加Answer组件：
import { Answer } from "./Answer";
...
{!toggleView &&
(isLoading ? (
<LoadingSpin />
) :
(
<Jumbotron>
...
<Answer
setIndex={setIndex}
index={index}
/>
</Jumbotron>
))}
运行效果：
点击下一题：
5. 实现选项展示
新增AnswerList.js。 通过属性answers传进来的选项列表，需要被打乱顺序（shuffle ）
import React from "react";
import { Answer } from "./Answer";
export const AnswerList = ({ answers, index, setIndex }) => {
if (answers) var correctAns = answers[0];
const shuffle = (array) => {
return array.sort(() => Math.random() - 0.5);
};
const arrayCheck = (arg) => {
return Array.isArray(arg) ? arg : [];
};
return (
<>
{shuffle(arrayCheck(answers)).map((text,ind) => (
<Answer
text={text}
correct={correctAns}
setIndex={setIndex}
index={index}
key={ind}
/>
))}
</>
);
};
修改Answer.js
import React from "react";
import he from "he";
import { Button } from "reactstrap";
export const Answer = ({ text, correct, setIndex, index }) => {
function answerResult() {
setIndex(index + 1);
}
var decode = he.decode(String(text));
return (
<Button className="ansButton" onClick={answerResult}>
{decode}
</Button>
);
};
修改Quiz.js
// import { Answer } from "./Answer";
import { AnswerList } from "./AnswerList";
export const Quiz = () => {
...
return (
<>
...
{!toggleView &&
(isLoading ? (
<LoadingSpin />
) :
(
...
<AnswerList
answers={answers[index]}
index={index}
setIndex={setIndex}
/>
</Jumbotron>
))}
</>
);
};
运行效果：
项目结构：
6. 记录用户成绩
修改quiz.js，添加setResult，并传递给AnswerList
export const Quiz = () => {
var [result, setResult] = useState(null);
...
return (
<>
...
{!toggleView &&
(isLoading ? (
<LoadingSpin />
) :
(
<Jumbotron>
...
<AnswerList
answers={answers[index]}
index={index}
setIndex={setIndex}
setResult={setResult}
/>
</Jumbotron>
))}
</>
);
};
修改AnswerList.js，传递setResult
import React from "react";
import { Answer } from "./Answer";
export const AnswerList = ({ answers, index,setResult, setIndex }) => {
...
return (
<>
{shuffle(arrayCheck(answers)).map((text,ind) => (
<Answer
text={text}
correct={correctAns}
setIndex={setIndex}
setResult={setResult}
index={index}
key={ind}
/>
))}
</>
);
};
修改Answer.js，用户点击选项，回调setResult，通知Quiz组件，本次选择是对是错。
import React from "react";
import { Button } from "reactstrap";
import he from 'he'
export const Answer = ({ text, correct, setResult,setIndex, index }) => {
function answerResult() {
setIndex(index + 1);
correct === text ? setResult(true) : setResult(false);
}
var decode = he.decode(String(text));
return (
<Button className="ansButton" onClick={answerResult}>
{decode}
</Button>
);
};
修改Quiz.js，放一个隐藏的GameOver组件，每当index发生变化的时候，触发GameOver中的useEffect代码，累计用户答对题目的数目（setRight）
import GameOver from "./GameOver";
export const Quiz = () => {
const [right, setRight] = useState(0);
const [gameIsOver, setGameOver] = useState(false);
return (
<>
{toggleView && (
<Toggle
setIndex={setIndex}
setQuestionData={setQuestionData}
setToggleView={setToggleView}
setLoading={setLoading}
/>
)}
{!toggleView &&
(isLoading ? (
<LoadingSpin />
) :
(
<Jumbotron>
<QuestionHeader
setToggleView={setToggleView}
/>
<Question question={questions[index]} />
<AnswerList
answers={answers[index]}
index={index}
setIndex={setIndex}
setResult={setResult}
/>
</Jumbotron>
))}
<GameOver
right={right}
setRight={setRight}
quizLength={questions.length}
setGameOver={setGameOver}
result={result}
index={index}
/>
</>
);
};
新增GameOver.js组件，当index === quizLength && index时，setGameOver(true)设置游戏结束，显示用户得分。
import React, { useEffect } from "react";
export default function GameOver({
right,
setRight,
setGameOver,
index,
quizLength,
result,
}) {
useEffect(() => {
if (result === true) {
setRight(right + 1);
}
if (index === quizLength && index) {
setGameOver(true);
}
}, [index]);
return <div></div>;
}
7. 游戏结束，展示用户得分
新增ScoreBoard.js
import React from "react";
export const ScoreBoard = ({ finalScore, right }) => {
// if index === 0 then right === 0 --> this way when index is reset in toggle so is right answers
const scoreFormatted = score => {
if (score === 1) {
return 100;
} else if (score === 0) {
return 0;
} else {
return score.toFixed(2) * 100;
}
}
return (
<>
<>
<h1 className="display-4">Correct Answers: {right}</h1>
<hr className="my-2" />
<h1 className="display-4">
Final Score: %{scoreFormatted(finalScore)}
</h1>
<hr className="my-2" />
</>
<p>谢谢使用 </p>
</>
);
};
ScoreHeader.js
import React from "react";
import { Button } from "reactstrap";
export default function ScoreHeader({ setGameOver, setToggleView }) {
return (
<Button
color="link"
onClick={() => {
setGameOver(false);
setToggleView(true);
}}
>
返回首页
</Button>
);
}
修改Quiz.js，当gameIsOver 变量为true时，显示得分页面。
import { ScoreBoard } from "./ScoreBoard";
import ScoreHeader from "./ScoreHeader";
export const Quiz = () => {
...
return (
<>
{!toggleView &&
!gameIsOver &&
(isLoading ? (
<LoadingSpin />
) :
(
...
))}
{gameIsOver && (
<Jumbotron>
<ScoreHeader
setToggleView={setToggleView}
setGameOver={setGameOver}
/>
<ScoreBoard right={right} finalScore={right / index} />
</Jumbotron>
)}
...
</>
);
};
