Skip to content

Instantly share code, notes, and snippets.

@kaineer

kaineer/PageFetch.jsx

Last active February 18, 2025 10:17
Show Gist options
  • Save kaineer/e225a05e9875d9e9790f84bbc52a84cd to your computer and use it in GitHub Desktop.
Save kaineer/e225a05e9875d9e9790f84bbc52a84cd to your computer and use it in GitHub Desktop.
Download ZIP
Работа с fetch()
Raw
README.md
  • Сохраняем db.json в корень проекта
  • Добавляем PageFetch.jsx как еще одну страницу
  • Запускаем npx json-server db.json чтобы иметь "что-то вроде бэкенда"
  • Запускаем npm run dev, чтобы работать с проектом
  • Переходим по ссылке, на которой висит PageFetch
  • Работаем с данными через fetch()
Raw
db.json
{
"users": [
{
"id": 1,
"firstname": "John",
"lastname": "Doe",
"email": "[email protected]",
"birthDate": "1973-01-22",
"login": {
"uuid": "1a0eed01-9430-4d68-901f-c0d4c1c3bf22",
"username": "johndoe",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-10T10:03:20.022Z"
},
"address": {
"street": "123 Main Street",
"suite": "Apt. 4",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.2345"
}
},
"phone": "(555) 555-1234",
"website": "www.johndoe.com",
"company": {
"name": "ABC Company",
"catchPhrase": "Innovative solutions for all your needs",
"bs": "Marketing"
}
},
{
"id": 2,
"firstname": "Jane",
"lastname": "Smith",
"email": "[email protected]",
"birthDate": "1983-02-22",
"login": {
"uuid": "2a0eed02-9430-4d68-901f-c0d4c1c3bf22",
"username": "janesmith",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-06-10T12:45:20.022Z"
},
"address": {
"street": "456 Oak Street",
"suite": "Suite 200",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.3456",
"lng": "-71.6789"
}
},
"phone": "(555) 555-5678",
"website": "www.janesmith.com",
"company": {
"name": "XYZ Corporation",
"catchPhrase": "Leading the way in innovation",
"bs": "Finance"
}
},
{
"id": 3,
"firstname": "Bob",
"lastname": "Johnson",
"email": "[email protected]",
"birthDate": "1974-11-12",
"login": {
"uuid": "3a0eed11-9430-4d68-901f-c0d4c1c3bf12",
"username": "bobjohnson",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-06-10T12:45:20.022Z"
},
"address": {
"street": "789 Elm Street",
"suite": "Apt. 100",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.1234"
}
},
"phone": "(555) 555-9012",
"website": "www.bobjohnson.com",
"company": {
"name": "Acme Corporation",
"catchPhrase": "Your trusted partner",
"bs": "Manufacturing"
}
},
{
"id": 4,
"firstname": "Emily",
"lastname": "Davis",
"email": "[email protected]",
"birthDate": "1974-11-30",
"login": {
"uuid": "4a0eed11-9430-4d68-901f-c0d4c1c3bf30",
"username": "emilydavis",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-07-10T11:21:20.033Z"
},
"address": {
"street": "321 Maple Street",
"suite": "Apt. 50",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.5678"
}
},
"phone": "(555) 555-3456",
"website": "www.emilydavis.com",
"company": {
"name": "GHI Corporation",
"catchPhrase": "Your success is our priority",
"bs": "Consulting"
}
},
{
"id": 5,
"firstname": "William",
"lastname": "Brown",
"email": "[email protected]",
"birthDate": "1974-11-22",
"login": {
"uuid": "5a0eed11-9430-4d68-901f-c0d4c1c3bf22",
"username": "williambrown",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-02-10T10:38:03.030Z"
},
"address": {
"street": "567 Pine Street",
"suite": "Apt. 2",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.6789",
"lng": "-71.9012"
}
},
"phone": "(555) 555-6789",
"website": "www.williambrown.com",
"company": {
"name": "JKL Industries",
"catchPhrase": "Quality products for a better world",
"bs": "Engineering"
}
},
{
"id": 6,
"firstname": "Laura",
"lastname": "Wilson",
"email": "[email protected]",
"birthDate": "1984-12-14",
"login": {
"uuid": "6a0eed12-9430-4d68-901f-c0d4c1c3bf14",
"username": "laurawilson",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-01-10T09:03:03.030Z"
},
"address": {
"street": "789 Maple Street",
"suite": "Apt. 10",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.3456",
"lng": "-71.2345"
}
},
"phone": "(555) 555-1234",
"website": "www.laurawilson.com",
"company": {
"name": "LMN Corporation",
"catchPhrase": "Innovative solutions for a better future",
"bs": "Technology"
}
},
{
"id": 7,
"firstname": "Michael",
"lastname": "Garcia",
"email": "[email protected]",
"birthDate": "1984-12-14",
"login": {
"uuid": "7a0eed12-9430-4d68-901f-c0d4c1c3bf14",
"username": "michaelgarcia",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-10T09:03:03.030Z"
},
"address": {
"street": "234 Elm Street",
"suite": "Apt. 20",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.6789"
}
},
"phone": "(555) 555-9012",
"website": "www.michaelgarcia.com",
"company": {
"name": "NOP Enterprises",
"catchPhrase": "Your partner in success",
"bs": "Consulting"
}
},
{
"id": 8,
"firstname": "Stephanie",
"lastname": "Lee",
"email": "[email protected]",
"birthDate": "1983-02-13",
"login": {
"uuid": "8a0eed02-9430-4d68-901f-c0d4c1c3bf13",
"username": "stephanielee",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-10T09:03:34.330Z"
},
"address": {
"street": "345 Oak Street",
"suite": "Suite 500",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.1234"
}
},
"phone": "(555) 555-3456",
"website": "www.stephanielee.com",
"company": {
"name": "PQR Industries",
"catchPhrase": "Innovative solutions for your needs",
"bs": "Manufacturing"
}
},
{
"id": 9,
"firstname": "David",
"lastname": "Hernandez",
"email": "[email protected]",
"birthDate": "2000-11-10",
"login": {
"uuid": "9a0eed11-9430-4d68-901f-c0d4c1c3bf10",
"username": "davidhernandez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-10T09:02:34.330Z"
},
"address": {
"street": "456 Pine Street",
"suite": "Apt. 100",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.9012"
}
},
"phone": "(555) 555-6789",
"website": "www.davidhernandez.com",
"company": {
"name": "RST Corporation",
"catchPhrase": "Innovative solutions for your business",
"bs": "Consulting"
}
},
{
"id": 10,
"firstname": "Jessica",
"lastname": "Perez",
"email": "[email protected]",
"birthDate": "1988-11-13",
"login": {
"uuid": "10aeed11-9430-4d68-901f-c0d4c1c3bf13",
"username": "jessicaperez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-09T09:01:33.330Z"
},
"address": {
"street": "789 Oak Street",
"suite": "Suite 300",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.5678"
}
},
"phone": "(555) 555-9012",
"website": "www.jessicaperez.com",
"company": {
"name": "UVW Corporation",
"catchPhrase": "Innovative solutions for a better world",
"bs": "Technology"
}
},
{
"id": 11,
"firstname": "Mark",
"lastname": "Thompson",
"email": "[email protected]",
"birthDate": "1999-01-17",
"login": {
"uuid": "11aeed01-9430-4d68-901f-c0d4c1c3bf17",
"username": "markthompson",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-08T09:00:33.330Z"
},
"address": {
"street": "123 Elm Street",
"suite": "Apt. 1",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.2345"
}
},
"phone": "(555) 555-1234",
"website": "www.markthompson.com",
"company": {
"name": "LMN Enterprises",
"catchPhrase": "Your partner for success",
"bs": "Consulting"
}
},
{
"id": 12,
"firstname": "Lisa",
"lastname": "Rodriguez",
"email": "[email protected]",
"birthDate": "1999-01-17",
"login": {
"uuid": "12aeed01-9430-4d68-901f-c0d4c1c3bf17",
"username": "lisarodriguez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2023-01-09T05:51:59.390Z"
},
"address": {
"street": "456 Maple Street",
"suite": "Apt. 30",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.3456",
"lng": "-71.6789"
}
},
"phone": "(555) 555-5678",
"website": "www.lisarodriguez.com",
"company": {
"name": "NOP Corporation",
"catchPhrase": "Your success is our priority",
"bs": "Consulting"
}
},
{
"id": 13,
"firstname": "Julia",
"lastname": "Kim",
"email": "[email protected]",
"birthDate": "2002-11-11",
"login": {
"uuid": "13aeed11-9430-4d68-901f-c0d4c1c3bf11",
"username": "juliakim",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2017-08-09T05:51:59.390Z"
},
"address": {
"street": "123 Cherry Street",
"suite": "Apt. 100",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.2345"
}
},
"phone": "(555) 555-1234",
"website": "www.juliakim.com",
"company": {
"name": "ABC Corporation",
"catchPhrase": "Your trusted partner",
"bs": "Consulting"
}
},
{
"id": 14,
"firstname": "Max",
"lastname": "Brown",
"email": "[email protected]",
"birthDate": "2007-10-07",
"login": {
"uuid": "14aeed10-9430-4d68-901f-c0d4c1c3bf07",
"username": "maxbrown",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-06-13T11:38:33.010Z"
},
"address": {
"street": "456 Oak Street",
"suite": "Apt. 200",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.3456",
"lng": "-71.6789"
}
},
"phone": "(555) 555-5678",
"website": "www.maxbrown.com",
"company": {
"name": "XYZ Enterprises",
"catchPhrase": "Innovative solutions for your needs",
"bs": "Technology"
}
},
{
"id": 15,
"firstname": "Oliver",
"lastname": "Martinez",
"email": "[email protected]",
"birthDate": "2001-11-03",
"login": {
"uuid": "15aeed01-9430-4d68-901f-c0d4c1c3bf03",
"username": "olivermartinez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-06-13T11:38:33.010Z"
},
"address": {
"street": "789 Elm Street",
"suite": "Apt. 30",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.9012"
}
},
"phone": "(555) 555-9012",
"website": "www.olivermartinez.com",
"company": {
"name": "PQR Corporation",
"catchPhrase": "Innovative solutions for your success",
"bs": "Consulting"
}
},
{
"id": 16,
"firstname": "Sophie",
"lastname": "Lee",
"email": "[email protected]",
"birthDate": "1982-04-12",
"login": {
"uuid": "16beed04-1433-3ds8-901f-d0d4c1c3bac0",
"username": "sophielee",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-08-11T11:38:33.330Z"
},
"address": {
"street": "321 Pine Street",
"suite": "Apt. 40",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.5678"
}
},
"phone": "(555) 555-3456",
"website": "www.sophielee.com",
"company": {
"name": "GHI Enterprises",
"catchPhrase": "Innovative solutions for a better future",
"bs": "Technology"
}
},
{
"id": 17,
"firstname": "Mia",
"lastname": "Nguyen",
"email": "[email protected]",
"birthDate": "1980-05-22",
"login": {
"uuid": "17beed05-9400-3ds8-901f-d0d4c1c3bfb0",
"username": "mianuguyen",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-08-11T10:33:33.330Z"
},
"address": {
"street": "567 Oak Street",
"suite": "Apt. 50",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.6789",
"lng": "-71.9012"
}
},
"phone": "(555) 555-9012",
"website": "www.mianuguyen.com",
"company": {
"name": "JKL Enterprises",
"catchPhrase": "Innovative solutions for your needs",
"bs": "Technology"
}
},
{
"id": 18,
"firstname": "Lucas",
"lastname": "Kim",
"email": "[email protected]",
"birthDate": "1980-05-22",
"login": {
"uuid": "18beed16-9400-4d68-901f-d0d4c1c3bfb0",
"username": "lucaskim",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-02-01T10:03:33.330Z"
},
"address": {
"street": "789 Cherry Street",
"suite": "Apt. 60",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.3456",
"lng": "-71.2345"
}
},
"phone": "(555) 555-5678",
"website": "www.lucaskim.com",
"company": {
"name": "LMN Industries",
"catchPhrase": "Innovative solutions for your success",
"bs": "Manufacturing"
}
},
{
"id": 19,
"firstname": "Isabella",
"lastname": "Hernandez",
"email": "[email protected]",
"birthDate": "1980-09-26",
"login": {
"uuid": "190eed16-9400-4d68-901f-d0d4c1c3bf00",
"username": "isabellahernandez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-02-01T10:01:45.010Z"
},
"address": {
"street": "123 Pine Street",
"suite": "Apt. 70",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.9012"
}
},
"phone": "(555) 555-1234",
"website": "www.isabellahernandez.com",
"company": {
"name": "NOP Industries",
"catchPhrase": "Innovative solutions for your business",
"bs": "Consulting"
}
},
{
"id": 20,
"firstname": "Ethan",
"lastname": "Kim",
"email": "[email protected]",
"birthDate": "1983-03-06",
"login": {
"uuid": "20aeed13-3420-2f38-111f-c0d4c1c3bf01",
"username": "ethankim",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-02-01T11:01:44.010Z"
},
"address": {
"street": "456 Maple Street",
"suite": "Apt. 80",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.2345"
}
},
"phone": "(555) 555-5678",
"website": "www.ethankim.com",
"company": {
"name": "PQR Enterprises",
"catchPhrase": "Innovative solutions for a better world",
"bs": "Technology"
}
},
{
"id": 21,
"firstname": "Ava",
"lastname": "Patel",
"email": "[email protected]",
"birthDate": "1983-08-01",
"login": {
"uuid": "21aeed01-3221-2f48-111f-c0d4c1c3bf20",
"username": "avapatel",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-01-01T09:00:00.000Z"
},
"address": {
"street": "789 Maple Street",
"suite": "Apt. 90",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.9012"
}
},
"phone": "(555) 555-9012",
"website": "www.avapatel.com",
"company": {
"name": "UVW Enterprises",
"catchPhrase": "Innovative solutions for your needs",
"bs": "Consulting"
}
},
{
"id": 22,
"firstname": "William",
"lastname": "Kim",
"email": "[email protected]",
"birthDate": "1983-08-01",
"login": {
"uuid": "22aeed11-3420-2f38-111f-c0d4c1c3bf00",
"username": "williamkim",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-03-25T09:38:02.390Z"
},
"address": {
"street": "123 Elm Street",
"suite": "Apt. 100",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.5678"
}
},
"phone": "(555) 555-1234",
"website": "www.williamkim.com",
"company": {
"name": "JKL Corporation",
"catchPhrase": "Innovative solutions for your business",
"bs": "Consulting"
}
},
{
"id": 23,
"firstname": "Ella",
"lastname": "Lee",
"email": "[email protected]",
"birthDate": "1983-08-01",
"login": {
"uuid": "23aeed11-9420-4f68-111f-c0d4c1c3bf00",
"username": "ellalee",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-07-05T09:12:02.390Z"
},
"address": {
"street": "456 Pine Street",
"suite": "Apt. 110",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.2345"
}
},
"phone": "(555) 555-5678",
"website": "www.ellalee.com",
"company": {
"name": "NOP Industries",
"catchPhrase": "Innovative solutions for your success",
"bs": "Technology"
}
},
{
"id": 24,
"firstname": "Noah",
"lastname": "Martin",
"email": "[email protected]",
"birthDate": "1983-09-11",
"login": {
"uuid": "24aeed11-9460-4d78-901f-c0d4c1c3bf00",
"username": "noahmartin",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-01-01T09:02:02.390Z"
},
"address": {
"street": "789 Oak Street",
"suite": "Apt. 120",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.9012"
}
},
"phone": "(555) 555-9012",
"website": "www.noahmartin.com",
"company": {
"name": "ABC Enterprises",
"catchPhrase": "Innovative solutions for a better future",
"bs": "Technology"
}
},
{
"id": 25,
"firstname": "Emma",
"lastname": "Garcia",
"email": "[email protected]",
"birthDate": "1983-09-11",
"login": {
"uuid": "25aeed09-9430-4d68-901f-c0d4c1c3bf11",
"username": "emmagarcia",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-02-01T08:03:02.390Z"
},
"address": {
"street": "123 Oak Street",
"suite": "Apt. 130",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.9012"
}
},
"phone": "(555) 555-1234",
"website": "www.emmagarcia.com",
"company": {
"name": "GHI Corporation",
"catchPhrase": "Innovative solutions for your needs",
"bs": "Consulting"
}
},
{
"id": 26,
"firstname": "Aiden",
"lastname": "Martinez",
"email": "[email protected]",
"birthDate": "1983-09-11",
"login": {
"uuid": "26aeed09-9430-4d68-901f-c0d4c1c3bf11",
"username": "aidenmartinez",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-02-01T08:03:02.390Z"
},
"address": {
"street": "456 Cherry Street",
"suite": "Apt. 140",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.2345"
}
},
"phone": "(555) 555-5678",
"website": "www.aidenmartinez.com",
"company": {
"name": "JKL Industries",
"catchPhrase": "Innovative solutions for a better world",
"bs": "Manufacturing"
}
},
{
"id": 27,
"firstname": "Chloe",
"lastname": "Nguyen",
"email": "[email protected]",
"birthDate": "1988-12-13",
"login": {
"uuid": "27aeed12-9430-4d68-901f-c0d4c1c3bf13",
"username": "chloenguyen",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-01-03T09:03:02.390Z"
},
"address": {
"street": "789 Maple Street",
"suite": "Apt. 150",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.9012",
"lng": "-71.5678"
}
},
"phone": "(555) 555-9012",
"website": "www.chloenguyen.com",
"company": {
"name": "LMN Enterprises",
"catchPhrase": "Innovative solutions for your success",
"bs": "Technology"
}
},
{
"id": 28,
"firstname": "Liam",
"lastname": "Brown",
"email": "[email protected]",
"birthDate": "2002-01-25",
"login": {
"uuid": "28aeed01-9430-4d68-901f-c0d4c1c3bf25",
"username": "stefankupidura",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2022-01-02T09:00:01.390Z"
},
"address": {
"street": "123 Pine Street",
"suite": "Apt. 160",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.5678"
}
},
"phone": "(555) 555-1234",
"website": "www.liambrown.com",
"company": {
"name": "PQR Corporation",
"catchPhrase": "Innovative solutions for your business",
"bs": "Consulting"
}
},
{
"id": 29,
"firstname": "Jasmine",
"lastname": "Brown",
"email": "[email protected]",
"birthDate": "1990-11-19",
"login": {
"uuid": "29aeed11-9430-4d68-901f-c0d4c1c3bf19",
"username": "jasminebrown",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-11-02T07:00:59.390Z"
},
"address": {
"street": "124 Elm Street",
"suite": "Apt. 110",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.1234",
"lng": "-71.5678"
}
},
"phone": "(555) 555-1234",
"website": "www.jasminebrown.com",
"company": {
"name": "A&B Technology",
"catchPhrase": "Innovative IT solutions for your business",
"bs": "Technology"
}
},
{
"id": 30,
"firstname": "Stefan",
"lastname": "Kupidura",
"email": "[email protected]",
"birthDate": "1978-12-25",
"login": {
"uuid": "30aeed12-9430-4d68-901f-c0d4c1c3bf25",
"username": "stefankupidura",
"password": "jsonplaceholder.org",
"md5": "c1328472c5794a25723600f71c1b4586",
"sha1": "35544a31cc19bd6520af116554873167117f4d94",
"registered": "2021-12-01T07:51:59.390Z"
},
"address": {
"street": "456 Cherry Street",
"suite": "Apt. 150",
"city": "Anytown",
"zipcode": "12345-6789",
"geo": {
"lat": "42.5678",
"lng": "-71.2345"
}
},
"phone": "(555) 555-1234",
"website": "www.stefankupidura.com",
"company": {
"name": "ABC Corporation",
"catchPhrase": "IT and Software solutions",
"bs": "Development"
}
}
],
"info": {
"date": "2025.02.18",
"name": "react json placeholder"
}
}
Raw
page.module.css
.input {
font-size: 64px;
width: 60%;
}
.select {
font-size: 64px;
width: 30%;
}
.row {
display: flex;
flex-direction: row;
gap: 8px;
}
.textarea {
width: 800px;
height: 300px;
font-size: 24px;
}
Raw
PageFetch.jsx
import classes from './page.module.css'
import { useRef, useState } from 'react'
export const PageFetch = () => {
const urlRef = useRef("");
const resultRef = useRef("");
const bodyRef = useRef("{}");
const [method, setMethod] = useState("GET");
const hasBody = ["POST", "PUT"].includes(method);
const port = 3000;
const submit = (e) => {
e.preventDefault();
const url = "http://localhost:" + port + urlRef.current.value;
const body = hasBody ? JSON.parse(bodyRef.current.value) : {};
fetch(url).then((resp) => {
return resp.json();
}).then((data) => {
const json = JSON.stringify(data, null, 2);
resultRef.current.value = json;
}).catch((err) => {
resultRef.current.value = err.toString();
});
}
return (
<div className={classes.wrapper}>
<form>
<div className="row">
<input className={classes.input} type="text" defaultValue="" ref={urlRef} />
<select className={classes.select} value={method} onChange={ (e) => setMethod(e.target.value) }>
<option value="GET">GET</option>
<option value="POST">POST</option>
<option value="PUT">PUT</option>
<option value="DELETE">DELETE</option>
</select>
</div>
{ ["POST", "PUT"].includes(method) &&
<div className="row">
<textarea ref={bodyRef} className={classes.textarea}></textarea>
</div> }
<div className="row">
<textarea ref={resultRef} className={classes.textarea}></textarea>
</div>
<div className="row">
<button onClick={submit}>Send</button>
</div>
</form>
</div>
)
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment