data load fetch useEffect, useState

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react'; // useEffect, useState need

function App() {
   // data load kore ek state a rakte hobe  [] mane potom empty array takbe
  const [countries, setCountries] = useState([]);
  // useEffect (2ta pera 1. function fetch korbo , 2. ek bar load ar jonno [])
  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then(res => res.json())
      .then(data => setCountries(data))  // (ekane data load ar por kit korbe console kore dekte pare otoba set korte paro)
      .catch(error => console.log(error)) // error find
  }, [])


  return (
    <div className="App">
      <h1>countries numbers : {countries.length}</h1>


      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;