Como seria uma requisição ajax em react utilizando um XMLHttpRequest nativo?

Oi Cristiano, o código do AJAX feito com outras bibliotecas é apenas para facilitar o processo. Mas a ideia é sempre a mesma, você pode me passar um trecho de react com outra biblioteca pra mim te mostrar ele refatorado? Fica mais simples assim eu acho.

peguei esse exemplo na Atividade 1 da Aula 4:

componentDidMount(){
 console.log("didMount");
  $.ajax({
      url:"http//localhost:8080/api/autores",
      dataType: 'json',
      sucess:function(resposta){
        this.setState = ({lista:resposta});
      }.bind(this)
    }
  );
}     
enviaForm(evento){
  console.log("dados sendo enviados");
}

Certo, pegando seu exemplo, uma forma de escrever com javascript nativo seria:

Estou em dúvidas se de fato funcionar, não consigo testar aqui.

componentDidMount(){
    console.log("didMount");
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'http//localhost:8080/api/autores');
    xhr.addEventListener('load', function(resposta){
        this.setState = ({lista: JSON.parse(resposta.responseText) });
        }.bind(this));
    xhr.send();
}     
enviaForm(evento){
  console.log("dados sendo enviados");
}

Uma outra maneira seria utilizar a API FETCH, para realizar as requisições ajax sem uso de jquery ou outras libs.

componentDidMount() {
    let url = "http://localhost:8080/api/autores";
    fetch(url)
        .then((response) => response.json()
            .then((data) => {
                console.log(data)
                this.setState({ lista: data })
            })
        ).catch(
        error => console.log(error)
        );
}

Boa José! Refatorei o código do Cristiano de jQuery para XMLHttpRequest por que foi assim que ele pediu, mas a API FETCH com certeza é uma ótima solução também. A tendência é que os códigos escritos em ES6 use a api FETCH, enquanto os mais antigos, sejam em XMLHttpRequest mesmo.

Concerteza Wanderson Macêdo a API FETCH está sendo usado em novos projetos ela é menos verbosa que XMLHttpRequest.