Initial outline of containers and posts outline

App.tsx

@@ -1,11 +1,14 @@
 import { StatusBar } from 'expo-status-bar';
 import { StyleSheet, Text, View } from 'react-native';
 
+import { PostsContainer } from './src/components/PostsContainer';
+
 export default function App() {
   return (
     <View style={styles.container}>
       <Text>Open up App.tsx to start working on your app!</Text>
       <StatusBar style="auto" />
+      <PostsContainer />
     </View>
   );
 }

src/components/PostView.tsx

@@ -0,0 +1,21 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { Post } from "../util/api";
+
+/**
+ * This is the component that holds a single Post
+ *
+ * @param {Post} post The post to display
+ * @returns {JSX.Element} The JSX for the Post
+ */
+export function PostView({ post }: { post: Post }): JSX.Element {
+  // WARNING THIS IS NOT ACCEPTABLE WARNING REMOVE WARNING
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  const [thisPost, setThisPost] = React.useState<Post>(post);
+
+  return (
+    <View style={{ flexDirection: "row", height: 100, padding: 20 }}>
+      <Text>{thisPost.content}</Text>
+    </View>
+  );
+}

src/components/PostsContainer.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { View, Text } from "react-native";
+import { getPosts, Post } from "../util/api";
+import { PostView } from "./PostView";
+
+export function PostsContainer(): JSX.Element {
+  const [posts, setPosts] = React.useState<Post[]>([]);
+
+  React.useEffect(() => {
+    async function fetchPosts(): Promise<void> {
+      const posts = await getPosts();
+      setPosts(posts);
+    }
+    fetchPosts();
+  }, []);
+
+  return (
+    <View style={{ height: 100, padding: 20 }}>
+      <Text>Hello World!</Text>
+      {posts.map((post) => (
+        <PostView key={post.id} post={post} />
+      ))}
+    </View>
+  );
+}