Estou tentando rodar meu projeto, inicialmente já não conseguia abrir pela url do jar que a gente instalou, então coloquei http://cdc-react.herokuapp.com/api/autores e veio todos os dados, mas não estou conseguindo cadastrar e nem digitar nos inputs, ele fica travado.. e quando tento enviar nao exibe nem meu console.log diz que o server nao esta estartado, e pior, ja reolehit oda aula pra ver o que fiz de errado, e não veio nenhuma luz, estou vendo que algumas pessoas no forum tiveram problemas semelhantes e não obtiveram resposta. Preciso de uma luz!!! Afinal contratei o alura pra aprender React, todos os outros cursos que fiz, foram bem mais explicativos que este, está um pouco mais confuso na parte de configurações.

Meu App.js

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:[]};
    }

    componentDidMount(){
        $.ajax({
            url:"http://cdc-react.herokuapp.com/api/autores",
            dataType:'json',
            success:function(resposta){
                this.setState ({lista:resposta});
            }.bind(this)
        });
    }
    enviaForm(evento){
        evento.preventDefault();
        console.log('dados sendo enviados');
        $.ajax({
            url:"http://cdc-react.herokuapp.com/api/autores",
            contentType:'application/json',
            dataType:'json',
            type:'post',
            data: JSON.stringfy({nome:'',email:'',senha:''}),
            success: function(resposta){
                console.log("Enviado com sucesso");
            },
            error: function(resposta){
              console.log("erro");  
            }
        });


    }
    render() {
    return (

<div id="layout">
    { /*Menu toggle*/ }
    <a href="#menu" id="menuLink" className="menu-link">
    { /*Hamburguer icon*/ }
        <span></span>
    </a>

    <div id="menu">
        <div className="pure-menu">
            <button className="pure-menu-heading">Taynara estudo</button>

            <ul className="pure-menu-list">
                <li className="pure-menu-item"><button className="pure-menu-link">Home</button></li>
                <li className="pure-menu-item"><button className="pure-menu-link">Autor</button></li>
                <li className="pure-menu-item"><button className="pure-menu-link">Livro</button></li>
            </ul>
        </div>
    </div>

    <div id="main">
        <div className="header">
            <h1>Cadastro de autores</h1>
            <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 key={autor.id}>
                                   <td>{autor.nome}</td>
                                   <td>{autor.email}</td>
                               </tr>
                           )
                       })
                   }
                  </tbody>
                </table> 
              </div>             
            </div>
          </div>  

        </div>

        <div className="content">

        </div>
    </div>


    );
  }
}

export default App;