├── .codesandbox └── workspace.json ├── .gitignore ├── README.md ├── package.json ├── public └── index.html └── src ├── App.js ├── index.js └── styles.css /.codesandbox/workspace.json: -------------------------------------------------------------------------------- 1 | { 2 | "responsive-preview": { 3 | "Mobile": [ 4 | 320, 5 | 675 6 | ], 7 | "Tablet": [ 8 | 1024, 9 | 765 10 | ], 11 | "Desktop": [ 12 | 1400, 13 | 800 14 | ], 15 | "Desktop HD": [ 16 | 1920, 17 | 1080 18 | ] 19 | } 20 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Test-React-Fetch-API-GoogleMap 2 | Created with CodeSandbox 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react", 3 | "version": "1.0.0", 4 | "description": "React example starter project", 5 | "keywords": ["react", "starter"], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "18.2.0", 9 | "react-dom": "18.2.0", 10 | "react-scripts": "4.0.0" 11 | }, 12 | "devDependencies": { 13 | "@babel/runtime": "7.13.8", 14 | "typescript": "4.1.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"] 23 | } 24 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 14 | 23 | React App 24 | 25 | 26 | 27 | 30 |
31 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import "./styles.css"; 3 | 4 | export default function App() { 5 | const [userData, setuserData] = useState([]); 6 | useEffect(() => { 7 | fetch(`https://jsonplaceholder.typicode.com/users`) 8 | .then((res) => res.json()) 9 | .then((data) => { 10 | console.log(data); 11 | setuserData(data); 12 | }); 13 | }, []); 14 | return ( 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | {userData.map((user) => ( 25 | 26 | 27 | 28 | 29 | 33 | 34 | ))} 35 |
First NameLast NameCompanyAddress
{user.name.split(" ")[0]}{user.name.split(" ")[1]}{user.company.name} 30 | {user.address.suite} , {user.address.street} ,{" "} 31 | {user.address.zipcode} 32 |
36 |
37 |
38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import { createRoot } from "react-dom/client"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | const root = createRoot(rootElement); 8 | 9 | root.render( 10 | 11 | 12 | 13 | ); 14 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | display: flex; 5 | } 6 | --------------------------------------------------------------------------------