Simple login using ReactJS

Question

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(
    <LoginSuccess name={name} />,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginFail />,
    document.getElementById(id)
  );
};

var Header = React.createClass({
  render() {
    return (
      <h1>Web App - Login</h1>
    )
  }
});

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

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

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

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

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

var LoginFail = React.createClass({
  render() {
    return (
      <h2>Login FAIL...</h2>
    )
  }
});

ReactDOM.render(
  <LoginForm />,
  document.getElementById("container")
);

Answer 1

No, you are re-rendering the application manually.

function ShowSuccessAtDOM(id, name) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginSuccess name={name} />,
    document.getElementById(id)
  );
};

function ShowFailureAtDOM(id) {
  ReactDOM.unmountComponentAtNode(document.getElementById(id));
  ReactDOM.render(
    <LoginFail />,
    document.getElementById(id)
  );
};

Better:

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

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


ReactDOM.render(<LoginApp {...props} />,
                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.