CLASS COMPONENT
// ############# State with class component ############ //
// What was a State & why So Used us?
// Answer:- State is a data container just like:- (var,let,const) And
state its use for the component data re-rending us for data change.
import React, { Component } from 'react'; /* Using Class component So
Use An Component from React Library */
import logo from './logo.svg';
import './App.css';
class App extends Component { /* Class Extends Component for
Library */
constructor() { /* This constructor is used to
Javascripts & super is used
for call any type of Classes like:-
(Parent's & children's) */
super();
this.state = { /** this is used for our own constructor
*/
data: "lucky"
}
}
Apple() {
this.setState({ data: "bandhey" })
}
render() { /* Render used to Class */
return (
<div className="App">
<h1>{this.state.data}</h1>
<button onClick={() => this.Apple()}>Update Data</button>
</div>
);
}
export default App;
FUNCTIONAL COMPONENT
// ############# State with functional component ############ //
// What was a State & why So Used us?
// Answer:- State is a data container just like:- (var,let,const) And
state its use for the component data re-rending us for data change.
import {useState} from 'react'; // use to State this form
import logo from './logo.svg';
import './App.css';
function App() {
const [data,setData]=useState("Lucky") // ‘data is an State’,
‘setDate’ name for a const.
function updateData()
{
setData("bandhey") // change for State Data.
}
console.warn("______");
return (
<div className="App">
<h1>{data}</h1>
<button onClick={updateData}>Update Data</button>
</div>
);
}
export default App;
Props(properties)
App.js /* javascript file name App */
// ############# props with functional component ############ //
// What were the props & why So Used us?
// Answer:- Basically props are passed through the data into components.
It’s used for data changing & parameters as props.
import React from 'react';
import logo from './logo.svg';
import './App.css';
import User from './User'
function App() {
return (
<div className="App">
<h1>go go</h1>
<User Name={"lucky"} Email={"bandhey@gmail.com"}/>
<User Name={"bandhey"} Email={"bandhey01@gmail.com"}/>
</div>
);
}
export default App;
User.js /* Javascript file name User this file is import App.js */
function Apple(name) {
console.log(name.Name); /* (name.Name)==(Prop Name.context Name)
*/
return (
<div style={{ backgroundColor: "skyblue", color:
"blue",margin:10}}>
<h1>hello guy's {name.Name}</h1>
<h2>hello guy's {name.Email}</h2>
</div>
);
}
export default Apple;
Get Input Box Value
import './App.css';
import React,{useState} from 'react';
function App(){
const [data,setData]= useState(null);
function getDate(val){
setData(val.target.value);
}
return(
<div className="App">
<h1>Get Input Box value</h1>
<p>{data}</p>
<input type="text" onChange={getDate}/>
</div>
);
}
export default App;
Input Box Value get an Button
// Get Input Box Value for an button
import './App.css';
import React,{useState} from 'react';
function App(){
const [data,setData]= useState(null);
const [print,setPrint]= useState(false);
function getDate(val){
setData(val.target.value);
setPrint(false);
}
return(
<div className="App">
<h1>Get Input Box value</h1>
<div>
{
print?
<h1>{data}</h1> // If Else Condition On a function
:null
}
</div>
<input type="text" onChange={getDate}/>
<button onClick={()=>setPrint(true)}>Get Print</button>
</div>
);
}
export default App;
Values Are Show, hide & Toggle with function
// containts show, hide, toggle
import './App.css'
import React from 'react'
function App(){
const [status,setStatus]=React.useState(false);
return(
<div className="App">
{
status? <h1>Hello World!</h1>:null
}
<button onClick={()=>setStatus(false)}>hide</button>
<button onClick={()=>setStatus(true)}>show</button>
<button onClick={()=>setStatus(!
status)}>toggle</button>
</div>
);
}
export default App;
Form Handling
import React from "react";
import './App.css';
function App() {
const [name,setName]= React.useState("");
const [tnc,setTnc]= React.useState(false);
const [like,setLike]= React.useState("")
function getFromData(a){
console.warn(name,tnc,like)
a.preventDefault()
}
return (
<div className="App">
<h1>My Form</h1>
<form onSubmit={getFromData}>
<p><input type="text" placeholder="Enter Name"
value={name} onChange={(a)=>setName(a.target.value)}/></p>
<p><select
onChange={(a)=>setLike(a.target.value)}>
<option>--Select Option--</option>
<option>MCU</option>
<option>DC</option>
<option>Disney</option>
</select></p>
<p><input type="checkbox"
onChange={(a)=>setTnc(a.target.checked)}/>Accept All Term And
Condition.</p>
<button type="submit">Submit</button>
<button>reset</button>
</form>
</div>
);
}
export default App;
Conditional method
App.js
import './App.css';
import User from './User';
function App(){
return(
<div className="App">
<User/>
</div>
);
}
export default App;
User.js :- Export to App.js
//## this is if else condition ##//
import { useState } from 'react';
function Profile() {
const [conditional, setCondition] = useState(false)
return (
<div>
// that’s condition is ternary operation
{conditional ? <h2>hello bhai!</h2> : <h2>hii bhai!
</h2>}
</div>
);
}
export default Profile;
//## this is if else if condition ##//
import { useState } from 'react';
function Profile() {
const [conditional, setCondition] = useState(2)
// 1,2,3
return (
<div>
// that’s condition is ternary operation
{conditional==1?<h2>hello bhai!
</h2> :conditional==2? <h2>hii bhai!</h2>:<h2>bye bhai!</h2>}
</div>
);
}
export default Profile;
Form Validation Concept
App.js
import './App.css';
import Login from './Login';
import React from 'react';
function App(){
return(
<div className="App">
<Login />
</div>
);
}
export default App;
Login.js :- new component
import React from "react";
import { useState } from "react";
function LoggedIn() {
const [name, setName] = useState("")
const [password, setPassword] = useState("")
const [error, setError] = useState(false)
const [errorPass, setErrorPass] = useState(false)
function Submit(e) {
if (name.length<=2 || password.length<=2) {
alert("Enter Your Correct Validation")
}
else {
alert("All Good :)")
}
e.preventDefault()
}
function Name(e) {
let item = e.target.value;
if (item.length <= 2) {
setError(true)
}
else {
setError(false)
}
setName(item)
}
function Password(e) {
let item = e.target.value;
if (item.length <= 2) {
setErrorPass(true)
}
else {
setErrorPass(false)
}
setPassword(item)
}
return (
<div>
<h1>Login Form</h1>
<form onSubmit={Submit}>
<input type="text" placeholder="Enter Name"
onChange={Name} />
{error ? <p>invaild</p> : ""}<br /><br />
<input type="text" placeholder="Enter Password"
onChange={Password} />
{errorPass ? <p>invaild</p> : ""}<br /><br />
<button>Submit</button>
</form>
</div>
);
}
export default LoggedIn;
