diff --git a/frontend-mark-alive/mark-alive/public/index.html b/frontend-mark-alive/mark-alive/public/index.html index 6252f08..ede1a59 100644 --- a/frontend-mark-alive/mark-alive/public/index.html +++ b/frontend-mark-alive/mark-alive/public/index.html @@ -6,7 +6,6 @@ React App -
diff --git a/frontend-mark-alive/mark-alive/src/App.js b/frontend-mark-alive/mark-alive/src/App.js index d3de418..a274d1e 100644 --- a/frontend-mark-alive/mark-alive/src/App.js +++ b/frontend-mark-alive/mark-alive/src/App.js @@ -1,7 +1,9 @@ +import BookmarkList from "./components/BookmarkList"; function App() { - return ( <> -

First React Component

- + return ( +
+ +
); } diff --git a/frontend-mark-alive/mark-alive/src/components/BookmarkList.js b/frontend-mark-alive/mark-alive/src/components/BookmarkList.js new file mode 100644 index 0000000..e35190e --- /dev/null +++ b/frontend-mark-alive/mark-alive/src/components/BookmarkList.js @@ -0,0 +1,19 @@ +import { useEffect, useState } from "react"; +import List from "./List"; + +const BookmarkList = () => { + const [urlList, setUrlList] = useState([]); + + useEffect(() => { + fetch("http://localhost:8080/bookmarks") + .then((resp) => resp.json()) + .then((data) => setUrlList(data)); + }, [urlList]); + return ( +
+ +
+ ); +}; + +export default BookmarkList; diff --git a/frontend-mark-alive/mark-alive/src/components/list.js b/frontend-mark-alive/mark-alive/src/components/list.js new file mode 100644 index 0000000..840577b --- /dev/null +++ b/frontend-mark-alive/mark-alive/src/components/list.js @@ -0,0 +1,25 @@ +export const List = ({ Headers, data }) => { + return ( +
+ + + + {Headers.map((element, index) => ( + + ))} + + + + {data.map((element, index) => ( + + + + + ))} + +
{element}
{element.id}{element.url}
+
+ ); +}; + +export default List;