Estou perdido com as explicações.

Olá,

Gosto muito dos cursos da Alura, mas vocês precisam criar um método mais consistente entre os instrutores. Acabei de fazer o curso de JS Avançado com o Flávio, e, um conteúdo denso e extremamente difícil foi passado com maestria, sem deixar os alunos assustados.

Já nesses dois módulos do React, estou achando que é passado de uma forma muito apressada e sem demonstrar efetivamente o que está acontecendo. Só no vídeo "Definindo regras genéricas", tive que assistir mais de 2x, pois, não entra na minha cabeça o que está acontecendo. Se for para copiar e colar código, prefiro não fazer o curso.. Aproveitem que é um curso que podemos facilmente utilizar o CONSOLE.LOG, para demonstrar o que efetivamente está ocorrendo. A lógica talvez seja mais simples do que parece, mas está muito escondida do jeito que está sendo passado.

Deixem mais claro o porquê e quando devemos utilizar React, o que são e quais as vantagens de se usar Components, etc. Informações essas que são extremamente importantes, ainda mais se tratando de uma tecnologia mais recente.

Fiquei perdido em questões como:

• validacao[regra.campo] ,por quê se usa a sintaxe []?
• Spread operator ...args - vou inserir onde?
• validador[this.validacao.metodo] - metodo de quem?
• Entre muitas outras dúvidas...

    valida(state){

        let validacao = this.valido();

        this.validacoes.forEach(regra => {

            const campoValor = state[this.validacao.campo.toString()];
            const args = regra.args || [];

            const metodoValidacao = typeof regra.metodo === 'string' ? 
            validador[this.validacao.metodo] : regra.metodo

            if(metodoValidacao(campoValor, ...args, state) !== regra.validoQuando){
                validacao[regra.campo] = {
                    isInvalid : true,
                    message : regra.mensagem
                }
            }
                validacao.isValid = false;
        });

        return validacao;
    }

    valido(){
        const validacao = {};

        this.validacoes.map(regra =>{
            validacao[regra.campo] = {isInvalid : false, message : ''}
        });

        return {isValid : true, ...validacao};
    }

Fica o feedback.