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.

• WalidSabihi: But how do/should I set the props.error/props.success?
• webdeb: @WalidNawfalSabihi as I said in the end, you should use something like redux