1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3import { FeaturesPage } from "./FeaturesPage.tsx";
4import { CourseDetailsPage } from "./CourseDetailsPage.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1# ✨ Y2K Vibes Website ✨
2
3This is a vibey pink and purple Y2K/Gen Z inspired website built on Val Town using React and Hono.
4
5## 💖 Features
13## 🌈 Tech Stack
14
15- **Frontend**: React with TypeScript
16- **Backend**: Hono server
17- **Styling**: Custom CSS with gradients, animations, and Y2K-inspired design elements
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState, useEffect } from "https://esm.sh/react@18.2.0";
3
4export function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>React Hono Val Town Starter</title>
7 <script src="https://cdn.tailwindcss.com"></script>
8 <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
1/** @jsxImportSource https://cdn.jsdelivr.net/npm/react@18.2.0 */
2import React, { useState, useEffect } from "https://cdn.jsdelivr.net/npm/react@18.2.0/+esm";
3import { createRoot } from "https://cdn.jsdelivr.net/npm/react-dom@18.2.0/+esm/client.js";
4
5interface Link {
24 };
25
26 const addLink = async (e: React.FormEvent) => {
27 e.preventDefault();
28 await fetch("/links", {
120 <title>Helpful Links Page</title>
121 <style>${css}</style>
122 <script src="https://cdn.jsdelivr.net/npm/react@18.2.0/umd/react.production.min.js" crossorigin></script>
123 <script src="https://cdn.jsdelivr.net/npm/react-dom@18.2.0/umd/react-dom.production.min.js" crossorigin></script>
124 </head>
125 <body>
Starter template with client-side React & Hono server
Starter template with client-side React & Hono server
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
