From d2ff2fa9fdb784f0fd2ca70a2299c6cd642e066e Mon Sep 17 00:00:00 2001
From: Dian <guodian44@gmail.com>
Date: Fri, 31 Jan 2025 21:56:48 +0800
Subject: [PATCH] add working react view

---
 CustomView.ts | 16 +++++++++++++---
 ReactView.tsx |  9 +++++++++
 tsconfig.json |  2 +-
 3 files changed, 23 insertions(+), 4 deletions(-)
 create mode 100644 ReactView.tsx

diff --git a/CustomView.ts b/CustomView.ts
index 97bf201..4dd4d23 100644
--- a/CustomView.ts
+++ b/CustomView.ts
@@ -2,10 +2,15 @@ import { ItemView, WorkspaceLeaf } from "obsidian";
 // Each view is uniquely identified by a text string
 // and several operations require that you specify the view you'd like to use.
 // Extracting it to a constant, VIEW_TYPE_EXAMPLE, is a good idea—as you will see later in this guide.
+import { Root, createRoot } from "react-dom/client";
+import * as React from "react";
+import { ExampleReactView } from "./ReactView";
 
 export const VIEW_TYPE_EXAMPLE = "example-view";
 
 export class ExampleView extends ItemView {
+	root: Root | null = null;
+
 	constructor(leaf: WorkspaceLeaf) {
 		super(leaf);
 	}
@@ -19,12 +24,17 @@ export class ExampleView extends ItemView {
 	}
 
 	async onOpen() {
-		const container = this.containerEl.children[1];
-		container.empty();
-		container.createEl("h4", { text: "Example view" });
+		// const container = this.containerEl.children[1];
+		// container.empty();
+		// container.createEl("h4", { text: "Example view" });
+		this.root = createRoot(this.containerEl.children[1]);
+		// this.root.render(<div>asdf</div>);
+		// this.root.render(<ExampleReactView />);
+		this.root.render(React.createElement(ExampleReactView));
 	}
 
 	async onClose() {
 		// Nothing to clean up.
+		this.root?.unmount();
 	}
 }
diff --git a/ReactView.tsx b/ReactView.tsx
new file mode 100644
index 0000000..c9bd332
--- /dev/null
+++ b/ReactView.tsx
@@ -0,0 +1,9 @@
+import * as React from "react";
+export const ExampleReactView = () => {
+	return (
+		<div>
+			<h1>Hello Nemesis</h1>
+			<p>This is a React view</p>
+		</div>
+	);
+};
diff --git a/tsconfig.json b/tsconfig.json
index 1d53216..f111986 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -12,7 +12,7 @@
 		"isolatedModules": true,
 		"strictNullChecks": true,
 		"lib": ["DOM", "ES5", "ES6", "ES7"],
-		"jsx": "react-jsx"
+		"jsx": "react"
 	},
 	"include": ["**/*.ts"]
 }