Sample programming of React

........................................................................................................................................................................................................................................

.......................................................................................................................................................................................................................................

Example : # 1
useState with previous state

import React, { Component, useState} from 'react'

  const Home =()=>{
  const initialState=0
  const [count1, setCount1]=useState(initialState)

  return(
    <>
    <h1>useState with previous state</h1>
    <h1>{count1}</h1>
   <button onClick={()=>{setCount1(prevCount=>prevCount+1)}}> Increment:{count1}</button>
    </>
  )
}
export default class App extends Component{
  render(){
    return(
      <>
      <Home/>
      </>
    )
  }
}
..........................................................................................................................................................................................................................................
useState with object

default value in object
import React, { Component, useState } from 'react'

const Home = () => {
  const initialState = 0
  const [name, setName] = useState({ firstname: '', lastName: '' })
  return (
    <>
      <h1>useState with object</h1>
      <h1>Form</h1>
      <form>
        <input
          type='text'
          name='firstname'
          value={name.firstname}
          onChange={(e)=>setName({...name, firstname:e.target.value})}
        />
        <input
          type='text'
          name='lastName'
          value={name.lastName}
          onChange={(e)=>setName({...name ,lastName:e.target.value})}
        />
        <h1>The first name is :{name.firstname}</h1>
        <h1>The first name is :{name.lastName}</h1>
        <h4>{JSON.stringify(name)}</h4>

      </form>
    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}
.................................................................................................................................................................................................................
useState with array

..........................................................................................................................................................................................................................................
Example : # 1

import React, { Component, useState } from 'react'
const Home = () => {
  const [state, setState] = useState(10)
  return (
    <>
      <h1>count:{state}</h1>
      <button onClick={() => setState(count => count + 1)}>Increment</button>
    </>
  )
}
export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }
}
.........................................................................................................................................................................................................................................
Example : # 2
import React, { Component, useState } from 'react'

const Home = () => {
  const [{count1, count2}, setCount] = useState({count1:10, count2:20})
//destructing {}
  return (
    <>
      <h1>count1:{count1}</h1>
      <h1> count2:{count2}</h1>
      
      <button onClick={()=>setCount(e=>({
//...e,
count1: e.count1+1,
//or
 count2:e.count2
 }))} >Increment</button>
      {/* ...e //calling current state */}
    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}
.........................................................................................................................................................................................................................................
Example : # 3

import React, { Component, useState } from 'react'

const Home = () => {
  const [count1, setCount1] = useState(10)
  const [count2, setCount2]= useState(20)

  return (
    <>
      <h1>count1:{count1}</h1>
      <h1> count2:{count2}</h1>
      {/* Single one */}
     <button onClick={()=>setCount1(c=>c+1)} >Increment</button>

     {/* double one */}
     <button onClick={()=>{
       setCount1(c=>c+1);
       setCount2(c=>c+1)
      }

       } >Increment</button>
    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}
.........................................................................................................................................................................................................................................
Example : # 4

.........................................................................................................................................................................................................................................
Example : # 5

.........................................................................................................................................................................................................................................
Example : # 6

.........................................................................................................................................................................................................................................
Example : # 7

.........................................................................................................................................................................................................................................
Example : # 8

.........................................................................................................................................................................................................................................
Example : # 9

.........................................................................................................................................................................................................................................
Example : # 10

useEffect
useEffect after render

useEffect run after Every render


Conditionally run effects

second paramets as array[]
change effects will be excuted
values don't change between render the effect is simply not
run
..........................................................................................................................................................................................................................................

Example : # 1

import React, { Component, useEffect, useState } from 'react'

const Home = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('')

  const Tick = () => {
    setCount(c=>c + 1)
  }

  useEffect(() => {
    const interval= setInterval(Tick,1000)

    console.log('Dom is updating')
    return ()=>{
      clearInterval(interval)
    }
  }, [count])
  return (
    <>
    
      <button onClick={Tick}>Increment: {count}</button>

    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}

..........................................................................................................................................................................................................................................

Example : # 2
import React, { Component, useEffect, useState } from 'react'
import axios from 'axios'
const Home = () => {
  const [post, setPost] = useState([])

  useEffect(() => {
    axios.get('https://jsonplaceholder.typicode.com/posts')
      .then(res => {
        console.log(res)
        setPost(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  },[])
  return (
    <>
      <ul>
        {
          post.map(p=>{
            return(
              <li key={p.id}>{p.title}</li>
            )
          })
        }
      </ul>

    </>
  )
}

export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}

..........................................................................................................................................................................................................................................

Example : # 3

import React, { Component, useEffect, useState } from 'react'
import axios from 'axios'
const Home = () => {
  const [post, setPost] = useState({})
  const [id, setId] =useState(1)

  useEffect(() => {
    axios.get(`https://jsonplaceholder.typicode.com/posts/${id}`)
      .then(res => {
        console.log(res)
        setPost(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  },[id])
  return (
    <>
      <input value={id} onChange={e=>setId(e.target.value)}/>
    <h1>{post.title}</h1>
    </>
  )
}
export default class App extends Component {
  render() {
    return (
      <>
        <Home />
      </>
    )
  }

}

Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 4 [ How to Do Multiple API Requests In ReactJS ]

import React, { useState, useEffect } from 'react'
import Axios from 'axios'


const App = () => {
  const [playerName, setPlayerName] = useState([])
  const [playerPic, setPlayerPic] = useState([])

  const fetchData = () => {
    const playerApi = 'https://www.balldontlie.io/api/v1/players/237'
    const playerPic = 'https://nba-players.herokuapp.com/players/james/lebron'

    const getNBAPlayer = Axios.get(playerApi)
    const getPlayerPic = Axios.get(playerPic)

    Axios.all([getNBAPlayer, getPlayerPic])
      .then(
        Axios.spread((...allData) => {
          const allDataPlayer = allData[0].data.first_name
          const getNBAPlayerPic = allData[1].config.url
          setPlayerName(allDataPlayer)
          setPlayerPic(getNBAPlayerPic)
        })
      )
  }

  useEffect(() => {
    fetchData()
  }, [])

  return (
    <>
      <h1>player name :{playerName}</h1>
      <img src ={playerPic} />
    </>
  )
}
export default App

Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 5 [ useMemo]

import React, { Component, useMemo, useState } from 'react';
const Home = () => {
  return (
    <>
      <h3>{Math.random()}</h3>
    </>
  )
}
const App = () => {
  const [count, setCount] = useState(0)
  const _increament = () => {
    setCount(c => c + 1)
  }
  const childMemo = useMemo(() => {
    return <Home></Home>
  },[])
  return (
    <>
      <h2>{count}</h2>
      <button onClick={_increament}> Increment</button>
      {childMemo}
    </>
  )
}
export default App

Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 6 [ Suspense, lazy]

import React, { Component, lazy, Suspense } from 'react';

const Home = lazy(() => import('./constants/Home'))
const About = lazy(() => import('./constants/About'))

export default class App extends Component {
  render() {
    return (
      <>
        <h1> App </h1>
        <Suspense fallback={<h2>Home is loading...</h2>}>
          <Home />
        </Suspense>

        <Suspense fallback={<h2>About is loading...</h2>}>
          <About />
        </Suspense>
      </>
    )
  }

}
Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 5 [ us]





Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 5 [ useMemo]



Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 5 [ useMemo]


Happy Coding :)
..........................................................................................................................................................................................................................................
Example : # 5 [ useMemo]