Retrieve users from API

package.json

@@ -10,6 +10,7 @@
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "axios": "^0.21.4",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",

src/App.jsx

 import React from 'react';
+import UserDetail from './components/UserDetail';
+import UserList from './components/UserList';
+import AddPost from './components/AddPost';
 import './css/App.css';
 
 const App = function () {
     return (
         <div>
+            <UserDetail />
+            <UserList />
+            <AddPost />
         </div>
     );
 };

src/components/AddPost.jsx

+import React from "react";
+import axios from "axios";
+
+const AddPost = (props) => {
+    const createPost = () => {
+        const postToCreate = {
+            title: "Hello Guys!",
+            body: "How are you today?"
+        };
+        return axios.post("https://jsonplaceholder.typicode.com/users/1/posts", postToCreate)
+            .then((response) => {
+                console.log(response.data);
+            });
+    };
+
+    return (
+        <button onClick={() => createPost()}>Create post</button>
+    );
+};
+
+export default AddPost;
\ No newline at end of file

src/components/UserDetail.jsx

+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const UserDetail = (props) => {
+    const [user, setUser] = useState({});
+
+    // Le second paramètre [] passé à useEffect permet de n'exécuter
+    // la fonction qu'une seule fois (au montage du composant)
+    useEffect(() => {
+        axios.get("https://jsonplaceholder.typicode.com/users/1")
+            .then(response => {
+                setUser(response.data);
+            });
+    }, []);
+
+    return (
+        <div>
+            <h1>Hello {user.name}</h1>
+            <p>Your company's name is {user.company && user.company.name}.</p>
+        </div>
+    );
+};
+
+export default UserDetail;
\ No newline at end of file

src/components/UserList.jsx

+import React, { useEffect, useState } from "react";
+import axios from "axios";
+
+const UserList = (props) => {
+    const [userList, setUserList] = useState([]);
+
+    // Le second paramètre [] passé à useEffect permet de n'exécuter
+    // la fonction qu'une seule fois (au montage du composant)
+    useEffect(() => {
+        axios.get("https://jsonplaceholder.typicode.com/users")
+            .then(response => {
+                setUserList(response.data);
+            });
+    }, []);
+
+    return (
+        <table>
+            <tbody>
+                {userList.map(function (user) {
+                    return (
+                        <tr key={user.id}>
+                            <td>{user.name}</td>
+                            <td>{user.company && user.company.name}</td>
+                        </tr>
+                    );
+                })}
+            </tbody>
+        </table>
+    );
+};
+
+export default UserList;
\ No newline at end of file

yarn.lock

@@ -2728,6 +2728,13 @@ axe-core@^4.0.2:
   resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.1.2.tgz"
   integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg==
 
+axios@^0.21.4:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 axobject-query@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/axobject-query/-/axobject-query-2.2.0.tgz"
@@ -5266,6 +5273,11 @@ follow-redirects@^1.0.0:
   resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.13.2.tgz"
   integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA==
 
+follow-redirects@^1.14.0:
+  version "1.14.4"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.4.tgz#838fdf48a8bbdd79e52ee51fb1c94e3ed98b9379"
+  integrity sha512-zwGkiSXC1MUJG/qmeIFH2HBJx9u0V46QGUe3YR1fXG8bXQxq7fLj0RjLZQ5nubr9qNJUZrH+xUcwXEoXNpfS+g==
+
 for-in@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz"