Krishan Dev Personal Blog

 App.js: import React , { useRef } from "react" ; import './App.css' function App () {   let inputRef = useRef ( null )   let inputRef2 = useRef ( null )   function formHandle ( e )   {     e . preventDefault ()     console . warn ( "Value of Field 1 :" , inputRef . current . value )     console . warn ( "Value of Text Field 2" , inputRef2 . current . value )     let input3 = document . getElementById ( 'input3' ). value     console . warn ( "Input field 3 value : " , input3 )   } return (   <div className = "App" >     <h1> UnControlled Component </h1>     <form onSubmit = { formHandle } >       <input type = "text" ref = { inputRef } /> <br/><br/>       <input type = "text" ref = { inputRef2 } /><br/> <br/>       <input type = "text" id = "input3" /><br/> <br/>       <button> S

 App.js: import React , { useState } from "react" ; import './App.css' function App () {   const [ val , setVal ]= useState ( "" ); return (   <div>     <h1> Controlled Component </h1>     <input type = "text" value = { val } onChange = { ( e ) => setVal ( e . target . value ) } />     <h3> Text Value : { val } </h3>   </div> ) } export default App ;

 App.js: import React , { useRef } from "react" ; import './App.css' import Student   from "./Components/Student" ; function App () {   let inputRef = useRef ( null )   function updateinput ()   {     inputRef . current . value = "3000"     inputRef . current . style . color = "red"     inputRef . current . focus ()   } return (   <div>     <h1> Forward Ref Tutorial </h1>     < Student ref = { inputRef } />         <button onClick = { updateinput } > Update Inputbox </button>   </div> ) } export default App ; ----------------------------------- Student.js: import React ,{ forwardRef } from 'react' function Student ( props , ref ) {   return (     <div>         <h3> Student Component </h3>         <input type = "text" ref = { ref } />     </div>       ) } export default forwardRef ( Student );

 App.js: import React , { useRef } from "react" ; import './App.css' function App () {   let inputRef = useRef ( null )   function handleInput ()   {     console . warn ( "handleInput Called" )     inputRef . current . value = "2000"     inputRef . current . focus ();     inputRef . current . style . color = "red"   } return (   <div>     <h1> Use Ref Tutorial </h1>     <input type = "text" ref = { inputRef } />     <button onClick = { handleInput } > Handle Input </button>   </div> ) } export default App ;

 App.js: import React , { useState , useMemo } from "react" ; import './App.css' function App () {   const [ count , setCount ]= useState ( 0 )   const [ item , setItem ]= useState ( 10 )   const multicountMemo = useMemo (     function multiCount ()     {       console . warn ( "multicount" )       return count * 5     }, [ count ]   )   return (     <div className = "App" >       <h1> Use Memo Tutorial </h1>       <h3> Count : { count } </h3>       <h3> Item : { item } </h3>       <h3> Multicountmemo: { multicountMemo } </h3>       <button onClick = { () => setCount ( count + 1 ) } > Update Count </button>       <button onClick = { () => setItem ( item * 10 ) } > Update Item </button>     </div>   ) } export default App ;

 App.js: import React , { Component , createRef } from "react" ; import './App.css' class App extends Component {   constructor ()   {     super ()     this . inputRef = createRef ();   }   componentDidMount ()   {     console . warn ( this . inputRef . current . value = "10001" )   }   getVal ()   {     console . warn ( this . inputRef . current . value )     this . inputRef . current . style . color = "red"     this . inputRef . current . style . backgroundColor = "black"   }   render ()   {     return (       <div className = "App" >         <h1> Ref Component </h1>         <input type = "text" ref = {this . inputRef } />         <button onClick = { () =>this . getVal () } > GetRef </button>       </div>     )   } } export default App ;

 App.js: import React ,{ PureComponent } from "react" ; class App extends PureComponent {   constructor ()   {     super ();     this . state ={ count : 1 }   }   render ()   {     console . warn ( "Check Re-rendring" )     return (       <div>         <h1> App Component: { this . state . count } </h1>         <button onClick = { () =>this . setState ({ count : 1 }) } > Click Me </button>       </div>     )   } } export default App ;

 App.js: import React from "react" ; import './App.css' import { Student } from "./Components/Student" ; function App () {   function alertFunc ( data )   {     alert ( data )   }   const name = "Krishan Dev"   return (     <div className = "App" >     < Student data = { name } alert1 = { alertFunc } />         </div>   ) } export default App ; ---------------------------- Student.js import React from 'react' export const Student = ( props ) => {   const data = "Bhavesh"   return (     <div>       <h6> { props . data } </h6>       <button onClick = { props . alert1 ( data ) } > Click Me </button>     </div>   ) }

 App.js: import React from "react" ; import { Table } from 'react-bootstrap' import './App.css' function App () {   const Student =[     { name : "Krishan" , email : "krishan@gmail.com" , Address : [       { Hn : "10" , city : "Noida" , Country : "India" },       { Hn : "34" , city : "Delhi" , Country : "India" },       { Hn : "54" , city : "Gurgaon" , Country : "India" },       { Hn : "95" , city : "Mumbai" , Country : "India" }   ]},     { name : "Dev" , email : "dev@gmail.com" , Address : [       { Hn : "10" , city : "Noida" , Country : "India" },       { Hn : "34" , city : "Delhi" , Country : "India" },       { Hn : "54" , city : "Gurgaon" , Country : "India" },       { Hn : "95" , city : &quo

 App.js: import React from "react" ; import { Table } from 'react-bootstrap' import './App.css' function App () {   const Student =[     { name : "Krishan" , email : "krishan@gmail.com" , Phone : 1111 },     { name : "Dev" , email : "dev@gmail.com" , Phone : 2222 },     { name : "Bhavesh" , email : "bhavesh@gmail.com" , Phone : 3333 },     { name : "Brijesh" , email : "brijesh@gmail.com" , Phone : 4444 }   ];   return (     <div className = "App" >     <h1> Handle Array with List </h1>     < Table striped bordered hover >       <tbody>       <tr>         <td> Name </td>         <td> Email </td>         <td> Phone </td>       </tr>     {       Student . map (( data , i ) =>       <tr key = { i } >         <td> { data . name } </td>         <td> { data . ema

 App.js: import React , { useEffect , useState } from "react" ; import './App.css' import Student from "./Components/Student" ; function App () {   const [ data , setData ]= useState ( 10 )   const [ count , setCount ]= useState ( 100 )   return (     <div className = "App" >       < Student count = { count } data = { data } />             <button onClick = { () => setCount ( count + 1 ) } > Update Count </button>       <button onClick = { () => setData ( data + 1 ) } > Update Data </button>     </div>   ) } export default App ; ---------------------- Student.js: import React ,{ useEffect } from "react" ; function Student ( props ) {     useEffect (() => {         alert ( "Count is :" + props . count )     }, [ props . count ])     return (         <div className = "App" >             <h1> count props: { props . count } </h1>      

 App.js: import React from 'react' ; import { useState } from 'react' ; import { useEffect } from 'react' ; import './App.css' function App () {   const [ count , setCount ]= useState ( 0 )   useEffect (() => { console . warn ( "useEffect" )})   return (   <div className = 'App' >     <h1> useEffect in React { count } </h1>     <button onClick = { () => setCount ( count + 1 ) } > Update Counter </button>   </div>  ) } export default App ;

 App.js: import React , { Component , useState } from 'react' ; import Student from './Components/Student' import './App.css' class App extends Component {   constructor ()   {     super ();     this . state ={ show : true }   }   render ()   {     return (       <div>         {           this . state . show ? < Student /> : <h1> Child Component Removed </h1>         }         <h1> Component will Unmount </h1>         <button onClick = { () =>this . setState ({ show : ! this . state . show }) } > Toggle </button>               </div>     )   } } export default App ; ----------------------------------- Student.js: import React , { Component } from "react" ; class App extends Component {     componentWillUnmount ()     {         console . warn ( "Componentwillunmount called" )     }     render ()     {         return (             <div>                 <h1>

 App.js: import React , { Component , useState } from 'react' ; import './App.css' class App extends Component {   constructor ()   {   super ()   console . warn ( "Constructor" )   // this.state={name:"Krishan"}   this . state ={ count : 0 }   }   shouldComponentUpdate ()   {     console . warn ( "Should Component Update" , this . state . count )     if ( this . state . count < 5 && this . state . count < 10 )     {       return true ;     }     }   render ()   {     console . warn ( "Render" )     return (       <div>         <h1> Should Component Update { this . state . count } </h1>         <button onClick = { () => { this . setState ({ count : this . state . count + 1 })} } > Update Counter </button>       </div>       )   }   } export default App ;

 App.js import React , { Component , useState } from 'react' ; import './App.css' class App extends Component {   constructor ()   {   super ()   console . warn ( "Constructor" )   // this.state={name:"Krishan"}   this . state ={ count : 0 }   }   componentDidUpdate ( preProps , preState , snapshot )   {     console . warn ( "Component did Update" , preState )   }   render ()   {     console . warn ( "Render" )     return (       <div>         <h1> Component Did Mount { this . state . count } </h1>         <button onClick = { () => { this . setState ({ count : this . state . count + 1 })} } > Update Name </button>       </div>       )   }   } export default App ;

 App.js: import React , { useState } from 'react' ; import './App.css' import Student from './Components/Student' ; function App () {   function callChildComponent ()   {     alert ( "Called Student Component from App.js" )   }   return (     <div className = 'App' >       < Student data = { callChildComponent } />     </div>   ) } export default App ; ----------------------- Student.js: import React from "react" ; function Student ( props ) {     return (         <div>             <h1> Student Component </h1>             <button onClick = { props . data } > Call App.js Function </button>         </div>     ) } export default Student ;

 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ name , setName ]= useState ( "" )   const [ password , setPassword ]= useState ( "" )   const [ userErr , setUserErr ]= useState ( false )   const [ passErr , setPassErr ]= useState ( false )   function formHandle ( e )   {     e . preventDefault ();     if ( name . length < 3 || password . length < 3 )     {       console . warn ( "Enter Correct Values" )       alert ( "Enter Correct Values" )     }     else {       console . warn ( "All Good, Login Sucessfully" )       alert ( "Login Sucessfully" )     }   }   function userHandle ( e )   {     let item = e . target . value ;     if ( item . length < 3 )     {       console . warn ( "Invalid" )       setUserErr ( true )     }     else {       setUserErr ( false )     }     console . warn ( e . target . value );     setName ( item )

 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   // const [loggedIn, setLoggedIn]=useState(false)   const [ loggedIn , setLoggedIn ]= useState ( 1 )   return (     <div>       {   //  loggedIn?<h1>Hello User</h1>:<h1>Hello Guest</h1>   loggedIn == 1 ? <h1> Hello User 1 </h1> : loggedIn == 2 ? <h1> Hello User 2 </h1> : <h1> Hello Guest </h1>       }       </div>   ) } export default App ;

 App.js: import React , { useState } from 'react' ; import './App.css' function App () {   const [ name , setName ] = useState ( "" )   const [ gender , setGender ] = useState ( "" )   const [ tnc , setTnc ] = useState ( false )   function getData ( e ) {     console . warn ( name , gender , tnc )     e . preventDefault ()   }   return (     <div className = 'App' >       <form onSubmit = { getData } >         <br /><br /><br />         <input type = "text" placeholder = "Enter Name" onChange = { ( e ) => setName ( e . target . value ) } /> <br /><br />         <select onChange = { ( e ) => setGender ( e . target . value ) } >           <option> Select Option </option>           <option> Male </option>           <option> Female </option>         </select>         <br /><br />