Prerequisite:
i) Install node js
ii) open cmd prompt check node is installed type node -v
iii) type npm install -g Create-react-app -->global
Reactjs Create First App:
i)open cmd prompt npx create-react-app login_signup_app
it will take some times for installed dependency
ii) Install Dependency npm i axios react-router-dom if you want any npm package installed it npm i (packagename)
iii) switch the under login_signup_app/src directory your files is located
iv) then you want create new file or folder your wish
v) i have create 2 file login.js and signup.js , App.js -->Default file
Code:
App.js:
// import the modules
import React,{Component} from 'react';
//imported 2 files
import Login from './login';
import Signup from './signup';
import axios from 'axios';
import $ from 'jquery-confirm';
import {
BrowserRouter as Router,
Switch,
Route,
NavLink,
Link
} from "react-router-dom";
export default class App extends Component{constructor(){ super(); }
render(){
return(
<div>
<Router>
<nav className="header">
<ul type="none" className='nav' >
<li>
<NavLink exact activeClassName="active" to="/">Home</NavLink>
</li>
<li>
<NavLink to="/login">Login</NavLink>
</li>
<li>
<NavLink to="/signup">Signup</NavLink>
</li>
</ul>
</nav>
<Switch>
<Route exact path="/" component={Home} />
<Route path="/login" component={Login} />
<Route path="/signup" component={Signup} />
</Switch>
</Router>
</div>
)
}
}
class Home extends Component{
constructor(){ super();
}
//file upload Function
upload(e){
this.setState({
file:e.target.files[0].name
})
var rdr=new FileReader();
rdr.onload=function(t){
document.getElementById('profile').src=t.target.result;
}
rdr.readAsDataURL(e.target.files[0]);
const fd=new FormData();
fd.append("image",e.target.files[0]);
axios({
method:'post', url:'file.php',
data:fd ,
config:{headers:{'content-type': 'multipart/form-data'}}
}).then(function(res){
console.log(res)
}).catch(function(err){
console.log(err)
});
} render(){
return(<div>
//Defalut Page HTML CODES Here
</div>
)}
Login.js:
export default class Login extends Component{
constructor(){
super();
this.state={
email:"",
pwd:""
}
}
email(e){
this.setState({
email:e.target.value
})
}
pwd(e){
this.setState({
pwd:e.target.value
})
}
login(event){
var name=this.state.email;
var pwd=this.state.pwd;
var sp1=document.getElementById('nm');
var sp2=document.getElementById('pd');
if(name.length==0 && pwd.length==0){
console.log("Required fileds");
sp1.style.display="block";
sp2.style.display="block";
event.preventDefault();
}else if(name.length==0 ){
console.log("Required email");
sp1.style.display="block";
sp2.style.display="none";
event.preventDefault();
}else if(pwd.length==0){
console.log("Required passwd");
sp1.style.display="none";
sp2.style.display="block";
event.preventDefault();
}else{
axios({
url:'http://localhost/sign.php',
method:'post',
data:{
useremail:this.state.email,
userpwd:this.state.pwd
},
headers:{'Access-Control-Allow-Origin': '*'}
}).then(function (res){
console.log(res.data);
document.getElementById('frm').reset();
$.alert({
title: 'Message!',
content: 'Login Successfully',
});
}).catch(function (err){
});
}
sp1.style.display="none";
sp2.style.display="none";
}
render(){
return(
<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>
<div className="container">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-5 box">
<h2 className="text-center">Login Page</h2>
<form id='frm'>
<div className="form-group">
<label>Email</label>
<input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>
<span id="nm" style={{display:"none",color:"red"}}>Email is Required</span>
</div>
<div className="form-group">
<label>Password</label>
<input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>
<span id="pd" style={{display:"none",color:"red"}}>Pasword is Required</span>
</div>
<lable style={{cursor:"pointer"}} onClick={this.login.bind(this)} className="btn btn-primary" >Login</lable>
</form>
<br/>
</div>
<div className="col-md-1"></div>
</div>
</div>
</div>
);
}
}
Signup.js:
import React,{Component} from 'react';
import axios from 'axios';
import './register.css';
import $ from 'jquery-confirm';
export default class Signup extends Component{
constructor(){
super();
this.state={
uname:"",
email:"",
pwd:""
}
}
name(e){
this.setState({
uname:e.target.value
})
}
email(e){
this.setState({
email:e.target.value
})
}
pwd(e){
this.setState({
pwd:e.target.value
})
}
signup(){
axios({
url:'http://localhost/sign.php',
method:'post',
data:{
username:this.state.uname,
email:this.state.email,
passwd:this.state.pwd
},
headers:{'Access-Control-Allow-Origin': '*'}
}).then(function (res){
console.log(res.data);
document.getElementById('frm').reset();
$.alert({
title: 'Message!',
content: 'Register Successfully',
});
}).catch(function (err){
});
}
render(){
return(
<div style={{backgroundImage:"url(bg.jpg)",height:"85vh"}}>
<div className="container">
<div className="row">
<div className="col-md-4"></div>
<div className="col-md-5 box">
<h2 className="text-center">Register Page</h2>
<form id='frm'>
<div className="form-group">
<label>Username</label>
<input type="text" onKeyUp={this.name.bind(this)} className="form-control" placeholder="Enter Username"></input>
</div>
<div className="form-group">
<label>Email</label>
<input type="text" onKeyUp={this.email.bind(this)} className="form-control" placeholder="Enter Email"></input>
</div>
<div className="form-group">
<label>Password</label>
<input type="password" onKeyUp={this.pwd.bind(this)} className="form-control" placeholder="Enter Password"></input>
</div>
<lable style={{cursor:"pointer"}} onClick={this.signup.bind(this)} className="btn btn-primary" >Register</lable>
</form>
<br/>
</div>
<div className="col-md-1"></div>
</div>
</div>
</div>
);
}
}
Signup.php:
<?php
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");
$con=mysqli_connect("localhost","root","","test");
$data = json_decode(file_get_contents('php://input'), true);
@$name=$data['username'];
@$email=$data['email'];
@$pwd=$data['passwd'];
@$useremail=$data['useremail'];
@$userpwd=$data['userpwd'];
if(!empty($name)){
$sql="insert into signup values(NULL,'$name','$email','$pwd')";
$con->query($sql);
echo "Inserted...💜";
}else{
}
if(!empty($useremail)){
$sql="select * from signup where Email='$useremail' and Password='$userpwd'";
$res=$con->query($sql);
$cnt=mysqli_num_rows($res);
if($cnt==1){
echo "Login Successfully..🤩";
}else{
echo "Email or Password is Incorrect..😫";
}
}else{
}
?>
Output:
Thanks for sharing this blog.This article gives lot of information.
ReplyDeleteReact JS Online training
React JS training in hyderabad
Neo Thermal is one of top Thermal Insulation Material Suppliers In Bangalore We provide our insulation services for diverse sectors like Warehouses, Manufacturing Industries,etc.These insulation materials are made up with low thermal-conductive material.
ReplyDelete