class Acc extends React.Component {
constructor(props){
super(props)
}
handleSignIn(event){
event.preventDefault()
let username=this.refs.username.value;
let password=this.refs.password.value;
this.props.onSignIn(username,password)
}
render() {
return (
);
}
}
class Acc1 extends React.Component {
constructor(props){
super(props)
}
handleSignUp(event){
event.preventDefault()
let firstname=this.refs.firstname.value;
let lastname=this.refs.lastname.value;
let username=this.refs.username.value;
let password=this.refs.password.value;
let confirmpassword=this.refs.confirmpassword.value;
this.props.onSignUp(firstname,lastname,username,password,confirmpassword)
}
render(){
return(
<form onclick={this.handleSignUp.bind(this)}>
<label>Enter your First Name</label>
<input type="text" ref="firstname" placeholder="First Name" />
<label>Enter Your Last Name</label>
<input type="text" ref="lastname" placeholder="Last Name" />
<label>Enter your User Name </label>
<input type="text" ref="username" placeholder="User Name" />
<label>Enter Your Password</label>
<input type="password" ref="password" placeholder="" />
<label>Confirm Password</label>
<input type="password" ref="confirmpassword" placeholder="" />
<input type="submit" value="Submit" />
</form>
);
}
//this.setState=({})
signIn(username, password) {
// This is where you would call Firebase, an API etc...
// calling setState will re-render the entire app (efficiently!)
this.setState({
user: {a:false,username,password,}
})
}
signOut() {
// clear out user from state
this.setState({user: null})
}
signUp(firstname,lastname,username,password,confirmpassword){
this.setState({
user1:{
a:true,
firstname,
lastname,
username,
password,
confirmpassword,
}
})
}
signOut(){
this.setState({user:null})
}
render(){
// Here we pass relevant state to our child components
// as props. Note that functions are passed using bind to
// make sure we keep our scope to App
return (
(this.state.a==false) ?
My cool
{
(this.state.user) ?
:
}
}
:
welcome our App
{
(this.state.user1) ?
:
}
)
}
}
export default App;
#index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import registerServiceWorker from './registerServiceWorker';
my program is sign in and signup form to click the signup go the registration form. only use react and javascript. my code
App.js
import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import './App.css'; //import Login1 from './Login1.js';
const Welcome = ({user, onSignOut})=> { // This is a dumb "stateless" component return (
) }
const wel =({user1,onSignOut})=> { return(
) }
class Acc extends React.Component { constructor(props){ super(props) }
render() { return (
} class Acc1 extends React.Component { constructor(props){ super(props) } handleSignUp(event){ event.preventDefault() let firstname=this.refs.firstname.value; let lastname=this.refs.lastname.value; let username=this.refs.username.value; let password=this.refs.password.value; let confirmpassword=this.refs.confirmpassword.value; this.props.onSignUp(firstname,lastname,username,password,confirmpassword) }
} } class App extends React.Component { constructor(props){ super(props); this.state = {a:false, user: null, user1:null}
} //this.setState=({}) signIn(username, password) { // This is where you would call Firebase, an API etc... // calling setState will re-render the entire app (efficiently!) this.setState({ user: {a:false,username,password,} }) }
signOut() { // clear out user from state this.setState({user: null}) } signUp(firstname,lastname,username,password,confirmpassword){ this.setState({ user1:{ a:true, firstname, lastname, username, password, confirmpassword,
}) } signOut(){ this.setState({user:null}) }
render(){ // Here we pass relevant state to our child components // as props. Note that functions are passed using
bindto // make sure we keep our scope to App return (My cool
{ (this.state.user) ?welcome our App
{ (this.state.user1) ?} }
export default App; #index.js import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App.js'; import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(
html file. <!DOCTYPE html>