erro ao pegar os aquivo json do heroku

Oi Douglas, acho que isso não deveria impactar no carregamento dos dados no heroku. Mas caso ajude, tenta por o texto do link depois do #, como por exemplo:

<ul className="pure-menu-list">
                <li className="pure-menu-item"><a href="#home" className="pure-menu-link">Home</a></li>
                <li className="pure-menu-item"><a href="#autor" className="pure-menu-link">Autor</a></li>    
                <li className="pure-menu-item"><a href="#livro" className="pure-menu-link">Livro</a></li>
              </ul>

Acho que isso deve remediar, mas tenho minhas dúvidas.

o código adiantou que os erros sumiram, mas não trazem o console.log

No código que você postou aqui não tem console.log Douglas, é em outro trecho? Cola aqui pra que eu entenda melhor o que quis dizer?

eu quiz me referi ao console na propria ComponentWillMount()

ComponentWillMount(){
    console.log(this);
    $.ajax({
      url:"http://cdc-react.herokuapp.com/api/autores",
      dataType:'json',
      success:function(resposta){
        console.log(this);
          this.setState({lista:resposta});
        }.bind(this)
      }
    );
  }

O console.log não deveria ser impactado ao meu ver. Eles não estão funcionando? Antes de alterar o href, eles funcionavam?

na hora que roda aplicação ele deveria exibir o console junto com o objeto, mas ele não exibe o console no console do navegador

Douglas, eu perguntei se ele funcionava antes de você mudar os href. funcionavam?

Sim com a lista de email ele estava correto vou postar todo o fonte

import React, { Component } from 'react';
import './css/pure-min.css';
import './css/side-menu.css';
import $ from 'jquery';

class App extends Component{ 

  constructor(){
    super();
    this.state = {lista : []};
  }
  ComponentWillMount(){
    console.log(this);
    $.ajax({
      url:"http://cdc-react.herokuapp.com/api/autores",
      dataType:'json',
      success:function(resposta){
        console.log(this);
          this.setState({lista:resposta});
        }.bind(this)
      }
    );
  }
  render() {
    return (
        <div id="layout">        
        <a href="#menu" id="menuLink" className="menu-link">        
            <span></span>
        </a>  
        <div id="menu">
            <div className="pure-menu">
              <a className="pure-menu-heading" href="#company">Company</a>   

              <ul className="pure-menu-list">
                <li className="pure-menu-item"><a href="#home" className="pure-menu-link">Home</a></li>
                <li className="pure-menu-item"><a href="#autor" className="pure-menu-link">Autor</a></li>    
                <li className="pure-menu-item"><a href="#livro" className="pure-menu-link">Livro</a></li>
              </ul>

            </div>
        </div>

        <div id="main">
          <div className="header">
            <h1>Cadastro de Autores</h1>
          </div>
          <div className="content" id="content">
            <div className="pure-form pure-form-aligned">
              <form className="pure-form pure-form-aligned">
                <div className="pure-control-group">
                  <label htmlFor="nome">Nome</label> 
                  <input id="nome" type="text" name="nome" value=""  />                  
                </div>
                <div className="pure-control-group">
                  <label htmlFor="email">Email</label> 
                  <input id="email" type="email" name="email" value=""  />                  
                </div>
                <div className="pure-control-group">
                  <label htmlFor="senha">Senha</label> 
                  <input id="senha" type="password" name="senha"  />                                      
                </div>
                <div className="pure-control-group">                                  
                  <label></label> 
                  <button type="submit" className="pure-button pure-button-primary">Gravar</button>                                    
                </div>
              </form> 
            </div>  
            <div> 
              <table className="pure-table">
                <thead>
                  <tr>
                    <th>Nome</th>
                    <th>email</th>
                  </tr>
                </thead>
                <tbody>
                 {
                   this.state.lista.map(function(autor){
                    return(
                       <tr>
                         <td>{autor.nome}</td>
                         <td>{autor.email}</td>
                      </tr>
                    );
                  })
                 }
                </tbody>
              </table> 
            </div>             
        </div>
      </div>     
    </div>
     );
  }
}

export default App;

Isso tudo me parece muito estranho. Funcionava mas dava aquelas mensagens, agora as mensagens sumiram e não funciona mais?

Lembrando que aquelas mensagens não me pareciam erros, mas sim warnings, você não precisa de fato corrigir, mas é sempre bom fazer isso. Elas apenas reclamam de você usar # nos href.

Tenta usar botões com a tag button em vez de links com a tag a. Essa era a outra recomendação das mensagens. Depois disso, fala pra gente se funcionou?