import React, {useEffect} from 'react';

​

useEffect(() => {

    getRecipes();

  }, []);

​

  const getRecipes = async () => {

    const response = await fetch(

      `https://........`

    );

    const data = await response.json();

    console.log(data);

React.useEffect(function() {

        console.log("Effect ran")

        fetch("https://swapi.dev/api/people/1")

            .then(res => res.json())

            .then(data => setStarWarsData(data))

    }, [])

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

​

function MyComponent() {

  const [data, setData] = useState(null);

​

  useEffect(() => {

    fetchData();

  }, []);

​

  const fetchData = async () => {

    try {

      const response = await fetch('https://api.example.com/data');

      if (response.ok) {

        const jsonData = await response.json();

        setData(jsonData);

      } else {

        throw new Error('Error: ' + response.status);

      }

    } catch (error) {

      console.log(error);

    }

  };

​

  return (

    <div>

      {data ? (

        <ul>

          {data.map((item) => (

            <li key={item.id}>{item.name}</li>

          ))}

        </ul>

      ) : (

        <p>Loading...</p>

      )}

    </div>

  );

}

​

export default MyComponent;

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

​

function MyComponent() {

  const [data, setData] = useState(null);

​

  useEffect(() => {

    const fetchData = async () => {

      try {

        const response = await fetch('https://example.com/api/data');

        const jsonData = await response.json();

        setData(jsonData);

      } catch (error) {

        console.error('Error fetching data:', error);

      }

    };

​

    fetchData();

  }, []);

​

  return (

    <div>

      {data ? (

        <pre>{JSON.stringify(data, null, 2)}</pre>

      ) : (

        <p>Loading data...</p>

      )}

    </div>

  );

}

​

export default MyComponent;

   fetch("https://catfact.ninja/fact")

   .then((res) => res.json())

   .then((data) => {

    console.log(data);

   });