React 前端考試

接觸過的 React 前端考試如下：

使用 React 或 Plan HTML\CSS\JS 實作以下畫面

備註：文字需要置中 Figma Link

Source Code:

- 以下範例是使用 Tailwind CSS UI Library
<div>
  <div className="flex justify-center items-center flex-wrap h-screen">
    <div className="flex justify-center items-center w-1/2 h-1/2">1</div>
    <div className="flex justify-center items-center w-1/2 h-1/2">2</div>
    <div className="flex justify-center items-center w-1/2 h-1/2">3</div>
    <div className="flex justify-center items-center w-1/2 h-1/2">4</div>
  </div>
</div>

延續第一題畫面上添加一個按鈕，點擊按鈕 3 號區塊變成的值更換成 5 號

Source Code：

import { useState } from "react";
const App = () => {
  const [count, setCount] = useState(3);
  return (
    <div style={{ position: "relative" }}>
      <button style={{ position: "absolute", top: "50%", left: "50%", transform: "translate('50%','50%')" }} onClick={() => setCount(5)}>
        click
      </button>
      <div className="flex justify-center items-center flex-wrap h-screen">
        <div className="flex justify-center items-center w-1/2 h-1/2">1</div>
        <div className="flex justify-center items-center w-1/2 h-1/2">2</div>
        <div className="flex justify-center items-center w-1/2 h-1/2">{count}</div>
        <div className="flex justify-center items-center w-1/2 h-1/2">4</div>
      </div>
    </div>
  );
}

摘寫一個函式可以輸入參數，根據輸入的數字 console 出 '*'

Source Code：

function printStar(number) {
  let starStr = "";
  for (let i = 0; i < number; i++) {
    starStr += "*";
  }
  return starStr;
}

console.log(printStar(13));

摘寫一個函式可以輸入兩個參數 a. 第一個參數會輸入一個非零的矩陣 b. 第二個參數會輸入非零的數 remark: 回傳在矩陣中一共有多少個數字大於第二個參數

Source Code：

function findSmaller(element, number) {
  let count = 0;
  for (let i = 0; i < element.length; i++) {
    if (element[i] < number) count++;
  }
  return count;
}

console.log(findSmaller([1, 2, 3, 4], 4));

摘寫一個函式可以輸入兩個參數 a. 第一個參數會輸入一個非零的矩陣 remark: 檢查矩陣中是否有重複的數字。如有回傳 true；如無回傳 false

Source Code：

function findRepeat(element) {
  let uniqueData = [];
  for (let i = 0; i < element.length; i++) {
    if (uniqueData.includes(element[i])) {
      return true;
    } else {
      uniqueData.push(element[i]);
    }
  }
  return false;
}

console.log(findRepeat([1, 2, 3, 4, 1]));

嘗試說出點擊按鈕後，count 的值會是什麼

import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

  return (
    <>
      <button onClick={onClick}>onClick</button>
      <span>{count}</span>
    </>
  );
}

export default App;

- 解答：count 的只會是數值 1

嘗試說出點擊按鈕後，count 的值會是什麼

import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount((state) => state + 1);
    setCount((state) => state + 1);
    setCount((state) => state + 1);
    setCount((state) => state + 1);
  };

  return (
    <>
      <button onClick={onClick}>onClick</button>
      <span>{count}</span>
    </>
  );
}

export default App;

- 解答：count 的只會是數值 4

嘗試說出點擊按鈕後，count 的值會是什麼。console.log 的內容又會是什麼

import { useState } from "react";
import "./App.css";

function App() {
  const [count, setCount] = useState(0);
  const onClick = () => {
    setCount((state) => state + 1);
    setCount(count + 1);
    setCount((state) => state + 3);
    setCount((state) => state + 4);
    console.log(count);
  };

  return (
    <>
      <button onClick={onClick}>onClick</button>
      <span>{count}</span>
    </>
  );
}

export default App;

- 解答：
1. console.log 的 count 數值是 0
2. 畫面上的 count 會是 8