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={"[email protected]"}/>
<User Name={"bandhey"} Email={"[email protected]"}/>
</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;