diff --git a/.gitignore b/.gitignore
index 2fd7c5e..e6fab1b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -12,3 +12,6 @@ main.js
 
 # obsidian
 data.json
+
+#vscode
+.vscode
\ No newline at end of file
diff --git a/ReactView.tsx b/ReactView.tsx
new file mode 100644
index 0000000..e924dac
--- /dev/null
+++ b/ReactView.tsx
@@ -0,0 +1,6 @@
+import * as React from "react";
+import App from "./view/App";
+
+export const ReactView = () => {
+  return <App />;
+};
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 95afac4..39694e4 100644
--- a/styles.css
+++ b/styles.css
@@ -1,2 +1,14 @@
 /* Empty. change later */
 
+.book {
+    border: 1px solid var(--background-modifier-border);
+    padding: 10px;
+  }
+  
+  .book__title {
+    font-weight: 600;
+  }
+  
+  .book__author {
+    color: var(--text-muted);
+  }
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 09cf7ec..4968d9a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,8 +3,9 @@
     "baseUrl": ".",
     "inlineSourceMap": true,
     "inlineSources": true,
-    "module": "ESNext",
-    "target": "es6",
+    "module": "esnext",
+    "jsx": "react",
+    "target": "es2017",
     "allowJs": true,
     "noImplicitAny": true,
     "moduleResolution": "node",
diff --git a/view.ts b/view.ts
index fccdc4d..d54ef70 100644
--- a/view.ts
+++ b/view.ts
@@ -1,4 +1,8 @@
 import { ItemView,WorkspaceLeaf } from "obsidian";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { ReactView } from "./ReactView";
+
 
 export const VIEW_TYPE_EXAMPLE = "example-view"
 
@@ -16,12 +20,13 @@ export class ExampleView extends ItemView {
     }
 
     async onOpen() {
-        const container = this.containerEl.children[1];
-        container.empty()
-        container.createEl("h4", {text: "Example View"});
-
+        ReactDOM.render(
+            React.createElement(ReactView),
+            this.containerEl.children[1]
+        )
     }
+
     async onClose(){
-        
+        ReactDOM.unmountComponentAtNode(this.containerEl.children[1]);
     }
 }
\ No newline at end of file
diff --git a/view/App.tsx b/view/App.tsx
new file mode 100644
index 0000000..1abcb2d
--- /dev/null
+++ b/view/App.tsx
@@ -0,0 +1,51 @@
+import * as React from "react";
+import { getTasks } from "./habiticaAPI"
+
+const username = "ebbdcbab-e0dc-404b-aa50-9824f0678adf"
+const credentials = "bed67d72-63cc-479c-88d3-8845569b04f8"
+
+class App extends React.Component<any,any> {
+    constructor(props: any) {
+        super(props)
+        this.state = {
+            isLoaded: false,
+            tasks: ""
+        }
+    }
+    componentDidMount() {
+        getTasks(username, credentials)
+            .then(res => res.json())
+            .then(
+                result => {
+                    console.log(result.data)
+                    this.setState({
+                        isLoaded: true,
+                        tasks: result.data
+                    })
+                },
+                (error) => {
+                    this.setState({
+                        isLoaded: true,
+                        error
+                    })
+                }
+            )
+
+    }
+    render(){
+        const { error, isLoaded, tasks } = this.state;
+        if (error) {
+            return <div>Error: {error.message}</div>;
+        } else if (!isLoaded) {
+            return <div>Loading...</div>;
+        } else {
+            const listItems = tasks.map((tasks: any) =>
+                <li>{tasks.text}</li>
+            );
+            return (
+                <ul>{listItems}</ul>
+            );
+        }
+    }
+}
+export default App
\ No newline at end of file
diff --git a/view/habiticaAPI.ts b/view/habiticaAPI.ts
new file mode 100644
index 0000000..39b9eaf
--- /dev/null
+++ b/view/habiticaAPI.ts
@@ -0,0 +1,16 @@
+// import fetch from "node-fetch";
+
+
+export async function getTasks(username: string, credentials: string){
+    const url = "https://habitica.com/api/v3/tasks/user?type=todos"
+    const response = fetch(url, {
+        method: 'GET',
+        headers: {
+            "Content-Type": "application/json",
+            "x-client": username.concat("-testAPI"),
+            "x-api-user": username,
+            "x-api-key": credentials,
+        },
+    })
+    return (response)
+}