尝试将网页项目移植到 React (web)

Question

我对 React 非常陌生，但我无法在任何地方找到这个答案（我已经看到很多使用 React-native 的示例，但这是用于在 PC 上查看网页）。我有一个非常简单的页面/应用程序，目前使用 HTML、CSS、JS 运行，并允许用户按下键盘上的键（映射为按钮）来猜测一个词。尝试为 React 重写这个被证明是非常令人生畏的，我想知道是否：

A) 这是别人已经做过的事情？ B) 如果有人指出如何将其转换为 React 组件，因为我找不到任何与导入 react-native 库没有直接关系的信息？

我的 JS 在简单的 web 视图（HTML、CSS、JS）中看起来像这样：

function generateButtons() {
        /*
            alphabet str is split into individual letters with split()
            each letter is mapped with a function .map(letter => ...)
                buttonsHTML write all letters as <button> elements within
                the .html file and creates an onClick event listener that 
                calls handleGuess() function
        */

        let buttonsHTML = 'abcdefghijklmnopqrstuvwxyz'.split('').map(letter =>
            `
                <button
                class="keys"
                id='` + letter + `'
                onClick="handleGuess('` + letter + `')"
                >
                ` + letter + `
                </button>
            `).join('');

        // assigns the value of html id keyboard to buttonsHTML 
        document.getElementById('keyboard').innerHTML = buttonsHTML;
    }

我难以置信的准系统 React 应用程序目前看起来像这样 (App.js)：

import './App.css';
import React from 'react';


function GameTitle() {
  return (
    <h1>Random Word Guessing Game</h1>
  )
}

function GamePrompt() {
  return (
    <p>Word to be guessed:</p>
  )
}

function SetDifficulty() {
  return (
    <label>
      Set difficulty level:
      <select>
        <option value="setEasy">Easy</option>
        <option value="setMedium">Medium</option>
        <option value="setHard">Hard</option>
      </select>
    </label>
  )
}

function GuessCounter() {
  return(
    <p>Number of guesses: </p>
  )
}


const alphabet = [
  "A", "B", "C", "D", "E", "F", "G", "H", "I",
  "J", "K", "L", "M", "N", "O", "P", "Q", "R",
  "S", "T", "U", "V", "W", "X", "Y", "Z"
];

function GameKeyboard() {
  return(
    <>
    {alphabet}
    </>
  )
}

function App () {
  return (
      <div>
        <>
          <GameTitle />
          <GamePrompt />
        </>
        <SetDifficulty />
        <GuessCounter />
        <GameKeyboard />
      </div>
      
  );
}


export default App;

我曾尝试重新创建一个字母表设置（使用

const

并显示它）但是当我尝试实现一个映射到字母表元素的按钮组件时，我无法找出正确的语法来允许它用作组件。