1. 程式人生 > >從0開始,手把手教你使用React開發答題App

從0開始,手把手教你使用React開發答題App

## 專案演示地址 [專案演示地址](https://kamiba.gitee.io/react-hooks-exam-app/) ## 專案原始碼 [專案原始碼](https://gitee.com/kamiba/react-hooks-quiz-app) ## 其他版本教程 [Vue版本](https://www.cnblogs.com/songboriceboy/p/13265777.html) [小程式版本](https://www.cnblogs.com/songboriceboy/p/13273987.html) ## 專案程式碼結構 ![](https://media.songbo.info/20200623130952.png) ## 前言 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 [官網連結](https://nodejs.org/en/) (2)安裝vscode [官網連結](https://code.visualstudio.com/) (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應用程式將彈出一個新視窗。 ![](https://media.songbo.info/20200528141955.png) ### 專案目錄結構 右鍵react-exam目錄,使用vscode開啟該目錄。 react-exam專案目錄中有一個/public和/src目錄,以及node_modules,.gitignore,README.md,和package.json。 ![](https://media.songbo.info/20200528142703.png) 在目錄`/public`中,重要檔案是`index.html`,其中一行程式碼最重要 ``` ``` 該div做為我們整個應用的掛載點 `/src`目錄將包含我們所有的React程式碼。 要檢視環境如何自動編譯和更新您的React程式碼,請找到檔案`/src/App.js`: 將其中的 ``` Learn React ``` 修改為 ``` 和豆約翰 Learn React ``` 儲存檔案後,您會注意到`localhost:3000`編譯並重新整理了新資料。 ![](https://media.songbo.info/20200528143142.png) ## 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 ( ); } 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 ( <>