Simple login using ReactJS I have successfully implemented a simple login page using ReactJS by coding it all in JavaScript (a flexibility that I like) but I am still a beginner in React and would like to know whether this is efficient and modular and if anything can be improved.

"use strict";

function Login(email, password) {
  var LOGIN_FLAG = 1002
  $.post("/server/account/login.php", { email: email, password: password })
   .done(function(data) {
     var JSONData = tryParseJSON(data);
     if (!JSONData || JSONData["statusCode"] == LOGIN_FLAG) {
       ShowFailureAtDOM("container");
       return;
     }

     var JWTData = KJUR.jws.JWS.parse(JSONData["jwt"]);
     if (JWTData) {
       ShowSuccessAtDOM("container", JWTData.payloadObj.name);
     } else {
       ShowFailureAtDOM("container");
     }
   });
};

function ShowSuccessAtDOM(id, name) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    &lt;LoginSuccess name={name} /&gt;,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    &lt;LoginFail /&gt;,
    document.getElementById(id)
  );
};

var Header = React.createClass({
  render() {
    return (
      &lt;h1&gt;Web App - Login&lt;/h1&gt;
    )
  }
});

var LoginForm = React.createClass({
  ValidateLogin() {
    var email = this.refs.loginEmail.state.value;
    var password = this.refs.LoginPassword.state.value;
    Login(email, password);
  },
  render() {
    return (
      &lt;div className="loginDiv"&gt;
        &lt;Header /&gt;
        &lt;LoginEmail ref="loginEmail"/&gt;
        &lt;LoginPassword ref="LoginPassword"/&gt;
        &lt;br&gt;&lt;/br&gt;
        &lt;LoginSubmit ValidateLogin={this.ValidateLogin}/&gt;
      &lt;/div&gt;
    )
  }
});

var LoginEmail = React.createClass({
  getInitialState() {
    return {value: null}
  },
  onChange(e) {
    this.setState({value: e.target.value});
  },
  render() {
    return (
      &lt;div className="LoginEmailDiv"&gt;
        &lt;h6&gt;Email:&lt;/h6&gt;
        &lt;input type="text" onChange={this.onChange}/&gt;
      &lt;/div&gt;
    )
  }
});

var LoginPassword = React.createClass({
  getInitialState() {
    return {value: null}
  },
  onChange(e) {
    this.setState({value: e.target.value});
  },
  render() {
    return (
      &lt;div className="LoginEmailDiv"&gt;
        &lt;h6&gt;Password:&lt;/h6&gt;
        &lt;input type="password" onChange={this.onChange}/&gt;
      &lt;/div&gt;
    )
  }
});

var LoginSubmit = React.createClass({
  onClick() {
    this.props.ValidateLogin();
  },
  render() {
    return (
      &lt;button onClick={this.onClick}&gt;Login&lt;/button&gt;
    )
  }
});

var LoginSuccess = React.createClass({
  render() {
    return (
      &lt;h2&gt;Login Success! Welcome Back, {this.props.name}&lt;/h2&gt;
    )
  }
});

var LoginFail = React.createClass({
  render() {
    return (
      &lt;h2&gt;Login FAIL...&lt;/h2&gt;
    )
  }
});

ReactDOM.render(
  &lt;LoginForm /&gt;,
  document.getElementById("container")
);
No, you are re-rendering the application manually.

function ShowSuccessAtDOM(id, name) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    &lt;LoginSuccess name={name} /&gt;,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    &lt;LoginFail /&gt;,
    document.getElementById(id)
  );
};


Better:

class LoginApp extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      &lt;div&gt;
        {this.props.errors.length &gt; 0 &amp;&amp; &lt;LoginFailure {...props} /&gt;}
        {this.props.success &amp;&amp; &lt;h1&gt;You are logged in!&lt;/h1&gt;}
        {!this.props.success &amp;&amp; &lt;LoginForm /&gt;}
      &lt;/div&gt;
    );
  }
}


ReactDOM.render(&lt;LoginApp {...props} /&gt;,
                document.getElementById('react-root'))


Too pass the props into your application, there are many ways. One of the most popular is using some kind of flux architecture. There is a library called redux. Its really easy to use, you should take a look, then you will understand how easy it is, to implement the example above.