LaunchedBerry07/index.html

## index.html
<body>

  <div id="space"></div>
</body>

## script.babel
var Parent  = React.createClass({
  getInitialState:function(){
    return {signup:false,login:true}
  },
  switch:function(word){
    var signup,login;
    if(word == "signup"){signup = true;login = false;}
    else{login = true; signup = false;}
    return this.setState({login:login,signup:signup})

  },
  render:function(){

        var self = this;
        return (
              <div>
                      <div id="buttons">
                        <p id="signupButton" onClick={self.switch.bind(null,"signup")} className={self.state.signup ? "yellow":"blue"}>Sign In</p>
                      <p id="loginButton" onClick={self.switch.bind(null,"login")} className={self.state.login ? "yellow":"blue"}> Login</p>
                      </div>

                   { self.state.signup?<Signup/> : null}
                   {self.state.login? <Login /> : null}

             </div>

        )


  }
})


var Signup = React.createClass({


      render:function(){


            return (
            <div>

                  <div id="signup">
                        <input type="text" id="first" placeholder="First Name"/>
                        <input type="text" id="last" placeholder="Last Name"/>
                        <input type="email" id="email" placeholder="Email"/>
                    <input type="password" id="password" placeholder="Password"/>
                    <input type="password" id="confirm" placeholder="Confirm Password"/>
                    <button id="send">Send</button>
            </div>
                </div>

            )
      }
})

var Login = React.createClass({
      render:function(){


            return (

                  <div>

                 <div id="login">
                    <input type="email" id="email" placeholder="Email"/>
                    <input type="password" id="password" placeholder="Password"/>
                    <button id="send">Send</button>
            </div>

                  </div>

            )
      }
})


ReactDOM.render(<Parent/>,document.getElementById("space"))

## scripts
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://fb.me/react-15.1.0.min.js"></script>
<script src="https://fb.me/react-dom-15.1.0.min.js"></script>

## sign-up-login-form-with-reactjs.markdown

      
    Raw
  

              sign-up-login-form-with-reactjs.markdown
            
          
    Sign Up/ Login Form with ReactJS

The code is messy but was bored so...yep
A Pen by Ajala Comfort on CodePen.
License.

  
## style.scss
$height:400px;
body{width:100%;height:700px;margin:0;padding:0;}
#space > div{width:500px;margin:auto;margin-top:10%;font-family: 'Roboto', sans-serif;}

#signup,#login{width:100%;background:#2c3e50;}
#signup{height:$height;} #login{height:$height / 2;}
.yellow{background-color:gold;}

#buttons{height:100px;background:#2c3e50;}
#buttons > p {width:49.95%;float:left;color:white;text-align:center;padding-top:25px;height:75%;margin:0;}
#buttons > p:hover{background:#f1c40f;color:#2c3e50;cursor:pointer;}
#signup > input, #signup > button{margin-top:20px;margin-left:105px;height:25px;border:none;border-radius:2px;}
#first,#last,#confirm{width:250px;}
#email{width:175px;}
#password{width:125px;margin-left:6px !important;}


#login > #email,#login > #password,#login >button{width:250px;margin-left:125px !important;margin-top:20px;height:25px;}
	var Parent = React.createClass({
	getInitialState:function(){
	return {signup:false,login:true}
	},
	switch:function(word){
	var signup,login;
	if(word == "signup"){signup = true;login = false;}
	else{login = true; signup = false;}
	return this.setState({login:login,signup:signup})

	},
	render:function(){

	var self = this;
	return (
	<div>
	<div id="buttons">
	<p id="signupButton" onClick={self.switch.bind(null,"signup")} className={self.state.signup ? "yellow":"blue"}>Sign In</p>
	<p id="loginButton" onClick={self.switch.bind(null,"login")} className={self.state.login ? "yellow":"blue"}> Login</p>
	</div>

	{ self.state.signup?<Signup/> : null}
	{self.state.login? <Login /> : null}

	</div>

	)


	}
	})


	var Signup = React.createClass({


	render:function(){


	return (
	<div>

	<div id="signup">
	<input type="text" id="first" placeholder="First Name"/>
	<input type="text" id="last" placeholder="Last Name"/>
	<input type="email" id="email" placeholder="Email"/>
	<input type="password" id="password" placeholder="Password"/>
	<input type="password" id="confirm" placeholder="Confirm Password"/>
	<button id="send">Send</button>
	</div>
	</div>

	)
	}
	})

	var Login = React.createClass({
	render:function(){



	return (

	<div>

	<div id="login">
	<input type="email" id="email" placeholder="Email"/>
	<input type="password" id="password" placeholder="Password"/>
	<button id="send">Send</button>
	</div>

	</div>

	)
	}
	})


	ReactDOM.render(<Parent/>,document.getElementById("space"))
	<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
	<script src="https://fb.me/react-15.1.0.min.js"></script>
	<script src="https://fb.me/react-dom-15.1.0.min.js"></script>
	$height:400px;
	body{width:100%;height:700px;margin:0;padding:0;}
	#space > div{width:500px;margin:auto;margin-top:10%;font-family: 'Roboto', sans-serif;}

	#signup,#login{width:100%;background:#2c3e50;}
	#signup{height:$height;} #login{height:$height / 2;}
	.yellow{background-color:gold;}

	#buttons{height:100px;background:#2c3e50;}
	#buttons > p {width:49.95%;float:left;color:white;text-align:center;padding-top:25px;height:75%;margin:0;}
	#buttons > p:hover{background:#f1c40f;color:#2c3e50;cursor:pointer;}
	#signup > input, #signup > button{margin-top:20px;margin-left:105px;height:25px;border:none;border-radius:2px;}
	#first,#last,#confirm{width:250px;}
	#email{width:175px;}
	#password{width:125px;margin-left:6px !important;}


	#login > #email,#login > #password,#login >button{width:250px;margin-left:125px !important;margin-top:20px;height:25px;}