GetDefaultProps и getInitialState не работают должным образом

Я новичок в reactjs. Я пробовал некоторые из примеров. Ниже приводится программа, над которой я работаю, но getDefaultProps и getInitialState не работают должным образом.

getDefaultProps не возвращает имя по умолчанию, если я не указал никаких свойств имени для компонента Greeter. Когда я указываю getInitialState, моя форма не отображается.

var Greeter = React.createClass({
  getDefaultProps: function() {
    console.info(this.props);
    return 
    {
      name: "React";
    }
  },
  getInitialState: function() {
    return 
    {
      name: this.props.name;
    }
  },
  onButtonClick: function(e) {
    e.preventDefault();

    var name = this.refs.name.value;
    this.setState({
      name: name
    });

    //alert(name);
  },
  render: function() {
    var name = this.state.name;
    return (
      <div>
        <h1>Hi {name}</h1>
        <p>This is from the react component</p>

        <form onSubmit = {this.onButtonClick}>
          <input type = "text" ref = "name" />
          <button>Set Name</button>
        </form>
      </div>
    );
  }
});

var name = "Lmntrix";

ReactDOM.render(<Greeter name = {name} />, document.getElementById("app"));