[Dúvida] Criação de um calendário usando React.js

• Arquivo CSS:

(Asterístico) { padding: 0; margin: 0; font-family: 'Lato', sans-serif; }

body { background: white; }

.titulo { text-align: center; margin: 50px; text-decoration: underline; }

.conteudo { left: 50%; margin: 0 0 0 -250px; position: absolute; width: 500px; }

.calendario { text-align: center; }

.conteudo .calendario header { position: relative; }

h2 { margin-top: 20px; font-size: 32px; text-transform: uppercase; }

.bnt-ant, .bnt-pro { position: absolute; top: 50%; height: 32px; width: 32px; line-height: 32px; margin-top: -16px; border: 2px solid black; border-radius: 50%; color: black; font-size: 16px; font-weight: bold; }

.bnt-ant { left: 80px; }

.bnt-pro { right: 80px; }

.bnt-ant:hover, .bnt-pro:hover { background: orange; color: white; }

.dia-semana.domingo, .dia-semana.sabado { color: orange; }

.calendario table { margin-top: 20px; border-collapse: collapse; }

.calendario thead { background: white; font-weight: 600; text-transform: uppercase; }

.calendario td { border: 1px solid #cbd1d2; height: 71.4px; text-align: center; width: 71.4px; }

.calendario tbody td { cursor: pointer; }

.calendario tbody td:hover { background: orange; color: #f9f9f9; }

.calendario table .dia-atual { background: orange; color: #f9f9f9; }

.calendario .mes-anterior, .calendario .proximo-mes { color: #cbd1d2; }

.calendario .mes-anterior:hover, .calendario .proximo-mes:hover { background: #98a0a0; }

.event { position: relative; }

.event::after { content: ''; width: 7px; height: 7px; left: 50%; bottom: 7px; margin: -3.5px 0 0 -3.5px; background: orange; display: block; position: absolute; border-radius: 50%; }

.event:hover::after { background: #f9f9f9; }

.event.dia-atual::after { background: #f9f9f9; }

.ano-calendario { margin-bottom: 30px; }

.eventos-marcados h3 { color: #616161; font-weight: normal; text-align: center; margin-bottom: 30px; }

• Arquivo JS:

Arquivo JS:

document.addEventListener('DOMContentLoaded', function() { const monthsBR = ['janeiro', 'fervereiro', 'março', 'abril', 'maio', 'junho', 'julho', 'agosto', 'setembro', 'outubro', 'novembro', 'dezembro']; const tableDays = document.getElementById('dias');

function GetDaysCalendar(mes, ano) {
    document.getElementById('mes').innerHTML = monthsBR[mes];
    document.getElementById('ano').innerHTML = ano;

    let firstDayOfWeek = new Date(ano, mes, 1).getDay() - 1;
    let getLastDayThisMonth = new Date(ano, mes + 1, 0).getDate();

    for (var i = - firstDayOfWeek, index = 0; i < (42 - firstDayOfWeek); i++, index++) {
        let dt = new Date(ano, mes, i);
        let dtNow = new Date();
        let dayTable = tableDays.getElementsByTagName('td')[index];

        dayTable.classList.remove('mes-anterior');
        dayTable.classList.remove('proximo-mes');
        dayTable.classList.remove('dia-atual');
        dayTable.innerHTML = dt.getDate();

        if (dt.getFullYear() == dtNow.getFullYear() && dt.getMonth() == dtNow.getMonth() && dt.getDate() == dtNow.getDate()) {
            dayTable.classList.add('dia-atual');
        }
        if (i < 1) {
            dayTable.classList.add('mes-anterior');
        }
        if (i > getLastDayThisMonth) {
            dayTable.classList.add('proximo-mes');
        }
    }
}

let now = new Date();
let mes = now.getMonth();
let ano = now.getFullYear();
GetDaysCalendar(mes, ano);

const botao_proximo = document.getElementById('bnt_prev');
const botao_anterior = document.getElementById('bnt_ant');

botao_proximo.onclick = function() {
    mes++;
    if (mes > 11) {
        mes = 0;
        ano++;
    }
    GetDaysCalendar(mes, ano);
}

botao_anterior.onclick = function() {
    mes--;
    if (mes < 0) {
        mes = 11;
        ano--;
    }
    GetDaysCalendar(mes, ano);
}

})

vc já fez cursos de React? essa formação aqui vai te ajudar

porque transformar esse teu código todo pra react vai dar um trabalho bem grande e você vai acabar sem entender o que tá rolando se alguém só fizer pra vc, saca?

o bom é ir codando devagar pra entender o que ta acontecendo