189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275 - Always run table creation before querying
276
2773. **React Configuration:**
278 - All React dependencies must be pinned to 18.2.0
279 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280 - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext, createContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "react";
3import { useNavigate, useParams } from "react-router";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { createContext, useState } from "react";
3import { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from "react-router";
4import { useLocalStorage } from "react-use";
5import { useUser } from "../hooks/useUser.tsx";
6import { ChatRoute } from "./ChatRoute.tsx";
14## Tecnologias Utilizadas
15
16- React 18.2.0
17- TypeScript
18- Framer Motion para animações
30## Estrutura do Projeto
31
32- `index.ts` - Ponto de entrada HTTP que serve o aplicativo React
33- `ChassiDeAco.tsx` - Componente principal do aplicativo React
34
35## Próximas Melhorias Planejadas
2
3export default async function (req: Request) {
4 // Serve the React app
5 return serveFile("/ChassiDeAco.tsx", import.meta.url);
6}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { motion } from "https://esm.sh/framer-motion@10.16.4?deps=react@18.2.0";
4
5// Define interfaces for better type safety
1// @ts-ignore
2import { React } from "https://esm.sh/react@18";
3// @ts-ignore
4import { useState } from "https://esm.sh/react@18";
5
6const treinos = [
28- [x] if valid input, call stringToBoard from utils.ts on the boardstring
29- [x] with the output board of stringToBoard, follow the pattern in the /newBoard route: call solutions and create a response object to return with the board and solutions
30- [x] /play/:boardstring should return the main react app at "/" but with the data from the boardstring. Unlike /newBoard which just returns the JSON.
31
32
33## React Hono Val Town Project Starter Template
34
35This is a (remix of a) starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.
