dsb/react-starter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
cloud0x42
2026-03-01 02:08:17 +01:00
commit 356cc94bee
20 changed files with 4781 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/app.css Normal file
View File

@@ -0,0 +1,6 @@
@import "tailwindcss";
@theme {
--font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

7
app/components/error/ErrorView.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function ErrorView() {
return (
<div>
<p>Ups, an unexpected error occurred.</p>
</div>
);
}

7
app/components/loading/LoadingView.tsx Normal file
View File

@@ -0,0 +1,7 @@
export function LoadingView() {
return (
<div className="flex justify-center items-center">
<p className="sr-only">Loading...</p>
</div>
);
}

7
app/lib/fetch.ts Normal file
View File

@@ -0,0 +1,7 @@
export const fetchApi = async <T = any>(url: string): Promise<T> => {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
};

11
app/pages/home/HomePage.tsx Normal file
View File

@@ -0,0 +1,11 @@
import { Link } from "react-router";
export function HomePage() {
return (
<div className="flex flex-col items-center justify-center min-h-[90vh]">
<p>Hello React!</p>
<Link to="/person/John" className="text-blue-500 mt-10">Go to Person</Link>
</div>
);
}

13
app/pages/person/PersonPage.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { Link, useParams } from "react-router";
export function PersonPage() {
const { id } = useParams();
return (
<div className="flex flex-col items-center justify-center min-h-[90vh]">
<p>Person Page: {id}</p>
<p>(Retrieved from the URL params)</p>
<Link to="/" className="text-blue-500 mt-10">Go to Home</Link>
</div>
);
}

86
app/root.tsx Normal file
View File

@@ -0,0 +1,86 @@
import {
isRouteErrorResponse,
Links,
Meta,
Outlet,
Scripts,
ScrollRestoration,
} from "react-router";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const queryClient = new QueryClient();
import type { Route } from "./+types/root";
import "./app.css";
export const links: Route.LinksFunction = () => [
{ rel: "preconnect", href: "https://fonts.googleapis.com" },
{
rel: "preconnect",
href: "https://fonts.gstatic.com",
crossOrigin: "anonymous",
},
{
rel: "stylesheet",
href: "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap",
},
];
export function Layout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<head>
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<Meta />
<Links />
</head>
<body>
<div className="container mx-auto">
<main className="pt-10 pb-4">
{children}
</main>
</div>
<ScrollRestoration />
<Scripts />
</body>
</html>
);
}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<Outlet />
</QueryClientProvider>
);
}
export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {
let message = "Oops!";
let details = "An unexpected error occurred.";
let stack: string | undefined;
if (isRouteErrorResponse(error)) {
message = error.status === 404 ? "404" : "Error";
details =
error.status === 404
? "The requested page could not be found."
: error.statusText || details;
} else if (import.meta.env.DEV && error && error instanceof Error) {
details = error.message;
stack = error.stack;
}
return (
<main className="pt-16 p-4 container mx-auto">
<h1>{message}</h1>
<p>{details}</p>
{stack && (
<pre className="w-full p-4 overflow-x-auto">
<code>{stack}</code>
</pre>
)}
</main>
);
}

6
app/routes.ts Normal file
View File

@@ -0,0 +1,6 @@
import { type RouteConfig, index, route } from "@react-router/dev/routes";
export default [
index("routes/home.tsx"),
route("person/:id", "routes/person.tsx"),
] satisfies RouteConfig;

12
app/routes/home.tsx Normal file
View File

@@ -0,0 +1,12 @@
import { HomePage } from "../pages/home/HomePage";
export function meta() {
return [
{ title: "React Starter" },
{ name: "description", content: "Welcome to React!" },
];
}
export default function Home() {
return <HomePage />;
}

6
app/routes/person.tsx Normal file
View File

@@ -0,0 +1,6 @@
import { PersonPage } from "../pages/person/PersonPage";
export default function Person() {
return <PersonPage />;
}