Ajuda com ReactJs

Front-end JavaScript
#1

Olá estou começando a estudar react e me encontro em uma dúvida:

bom tenho uma pagina com a seguinte estrutura:

import React from 'react';

export default function Home(){
    return (
        <>
           <h1 id="resultado"></h1>
                <div id="player-1" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <br />
                <br />
                <br />

                <div id="player-2" class="user-panel">
                    <p>Nome: <span class="nome"></span></p>
                    <p>Pontos: <span class="pontos">0</span></p>
                    <div class="botoes">
                        <button>Pedra</button>
                        <button>Papel</button>
                        <button>Tesoura</button>
                    </div>
                    <div class="jogada"></div>
                </div>

                <p id="espera"></p>  
        </>
    )
}

Onde eu vou abrir uma conexão com o socket e pegar informações como Nome / Pontos / Vencedor etc etc etc.
Ai entra minha dúvida no html eu iria chamar minha script.js e comunicar com o socket pegar resposta enviar etc e popular meus componentes, mas eu estou com dúvida como faria isso em react.

var socket = io();

var nome = prompt("Seu nome é:");
socket.emit('adicionar-jogador', nome);

socket.on('player conectado', function(data){
  $('#player-1').attr('usarioId', data[0].id);
  $('#player-2').attr('usarioId', data[1].id);

  if (socket.id !== $('#player-1').attr('usarioId')) {
    $('#player-1 button').attr('disabled', true);
  } else {
    $('#player-2 button').attr('disabled', true);
  }

});

socket.on('atualizar nomes', function(data){
  $('#player-1 .nome').html(data[0]);
  $('#player-2 .nome').html(data[1]);
});

$('#player-1 .botoes button').click(function() {
  var jogada = $(this).text().toLowerCase();
  
  socket.emit('jogada-player-1', jogada);
});

$('#player-2 .botoes button').click(function() {
  var jogada = $(this).text().toLowerCase();

  socket.emit('jogada-player-2', jogada);
});

socket.on('resultado', function(data){
  $('#resultado').html(data[0] + ' venceu!');
  $('#player-1 .pontos').html(data[1]);
  $('#player-2 .pontos').html(data[2]);

});

socket.on('player desconectado', function(data){
  $('#player-'+data+' .nome').html('');
});

socket.on('atualizar jogada', function (data) {
  $('#player-'+data[0]+' .jogada').html(data[1]);
});

socket.on('player na lista de espera', function (data) {
  console.log(data);
  var stringPlayers = '';
  data.forEach(function (player){
    stringPlayers += player.nome+", ";
  });
  $('#espera').html(stringPlayers);
});

minha script de comunicação basicamente seria essa.

#2

De uma olhadinha nos hooks

Para fazer as requisições pode usar fetch ou xmlhttprequest caso não queira usar pacotes.

Recomendo estudar os ciclos de vidas dos componentes para um melhor entendimento.