Update index.css, index.js, reportWebVitals.js, setupTests.js files

index.css

+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

index.js

+import React from 'react'
+import ReactDOM from 'react-dom'
+
+const	Entry = (props) => {
+  return (
+    <div>
+      <p>{props.name} {props.phone}</p>
+
+    </div>
+  )
+}
+const	Contents = (props) => {
+
+  return (
+
+    <div>
+	 <Entry  name={props.contacts[0].name} phone={props.contacts[0].phonenumber}/>
+      <Entry  name={props.contacts[1].name} phone={props.contacts[1].phonenumber}/>
+	  <Entry  name={props.contacts[2].name} phone={props.contacts[2].phonenumber}/>
+    </div>
+  )
+}
+const Header = (props) => {
+
+  return (
+    <div>
+	 <h1>{props.title} </h1>
+    </div>
+  )
+}
+
+const App = () => {
+  const phonebookapp = {
+    title: 'Superadvanced web phonebook app',
+    contacts: [
+    {
+      name: 'John Doe',
+      phonenumber: '358401234567'
+    },
+    {
+      name: 'Jane Doe',
+      phonenumber: '44551234567'
+    },
+    {
+      name: 'Foo bar',
+      phonenumber: '000'
+    }
+    ]
+  }
+  return (
+    <div>
+	  <Header title={phonebookapp.title} />
+      <Contents contacts={phonebookapp.contacts}/>
+    </div>
+  )
+}
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)
+

reportWebVitals.js

+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

setupTests.js

+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';