1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef } from "https://esm.sh/react@18.2.0";
3import type { Recipe, Ingredient, ParseRequest } from "../../shared/types.ts";
4
145 };
146
147 const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
148 const file = event.target.files?.[0];
149 if (!file) return;
169 };
170
171 const handleSubmit = async (e: React.FormEvent) => {
172 e.preventDefault();
173
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { Recipe } from "../../shared/types.ts";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import type { Recipe } from "../../shared/types.ts";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import type { Recipe } from "../../shared/types.ts";
4import RecipeForm from "./RecipeForm.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
4import App from "./components/App.tsx";
5
6const root = ReactDOM.createRoot(document.getElementById('root')!);
7root.render(<App />);
10 <script src="https://cdn.twind.style" crossorigin></script>
11
12 <!-- React -->
13 <script crossorigin src="https://esm.sh/react@18.2.0/umd/react.production.min.js"></script>
14 <script crossorigin src="https://esm.sh/react-dom@18.2.0/umd/react-dom.production.min.js"></script>
15
16 <!-- Error catching -->
101 <div id="root"></div>
102
103 <!-- Load the React app -->
104 <script type="module" src="/frontend/index.tsx"></script>
105</body>
19## Tech Stack
20
21- **Frontend**: React with TypeScript, TailwindCSS
22- **Backend**: Hono API framework
23- **Database**: SQLite for recipe storage
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4console.log("useState", typeof useState); // should be 'function'
5
6
7export default function App(): React.JSX.Element {
8 const [refreshFrequency, setRefreshFrequency] = useState("");
9 const [isSubmitting, setIsSubmitting] = useState(false);
10 const [message, setMessage] = useState("");
11
12 const handleSubmit = async (e: React.FormEvent) => {
13 e.preventDefault();
14 if (!refreshFrequency.trim()) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React from "https://esm.sh/react@18.2.0";
4import App from "./components/App.tsx";
5
34
35 <script type="module">
36 import { createElement as h, useState, useEffect } from 'https://esm.sh/react@18.2.0';
37 import { createRoot } from 'https://esm.sh/react-dom@18.2.0/client';
38
39 function App() {
