From bf59b044ff22e29320192bf373ee20efddabd6a3 Mon Sep 17 00:00:00 2001 From: zihluwang Date: Mon, 15 Sep 2025 20:19:56 +0800 Subject: [PATCH] feat: add guide page --- src/App.tsx | 64 +++++++++++ src/components/error-page/index.tsx | 69 +++++++++++ src/layout/empty-layout/index.tsx | 13 +++ src/main.tsx | 16 ++- src/page/about/index.tsx | 110 ++++++++++++++++++ src/page/contact/index.tsx | 171 ++++++++++++++++++++++++++++ src/page/home/index.tsx | 140 +++++++++++++++++++++++ src/router/index.tsx | 34 ++++++ 8 files changed, 608 insertions(+), 9 deletions(-) create mode 100644 src/App.tsx create mode 100644 src/components/error-page/index.tsx create mode 100644 src/layout/empty-layout/index.tsx create mode 100644 src/page/about/index.tsx create mode 100644 src/page/contact/index.tsx create mode 100644 src/page/home/index.tsx create mode 100644 src/router/index.tsx diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..d46f430 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,64 @@ +import { Outlet, Link } from "react-router-dom" +import { useMemo, useState } from "react" +import moment from "moment" + +/** + * Main application component that serves as the root layout. + * Uses React Router's Outlet to render child routes. + */ +export default function App() { + const today = useMemo(() => moment(), []) + + return ( +
+ {/* Navigation Header */} +
+
+
+
+

+ OnixByte React Template +

+
+ +
+
+
+ + {/* Main Content Area */} +
+
+ +
+
+ + {/* Footer */} +
+
+

+ © 2024-{today.year()} OnixByte. Built with React & TypeScript. +

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/components/error-page/index.tsx b/src/components/error-page/index.tsx new file mode 100644 index 0000000..6e5bcb1 --- /dev/null +++ b/src/components/error-page/index.tsx @@ -0,0 +1,69 @@ +import { useRouteError, Link } from "react-router-dom" + +/** + * Error page component that displays when routing errors occur. + * Uses React Router's useRouteError hook to get error information. + */ +export default function ErrorPage() { + const error = useRouteError() as Error & { statusText?: string; status?: number } + + return ( +
+
+
+
+ {/* Error Icon */} +
+ + + +
+ + {/* Error Title */} +

+ Oops! Something went wrong +

+ + {/* Error Message */} +
+

+ {error?.statusText ?? error?.message ?? "An unexpected error occurred"} +

+ {error?.status && ( +

+ Error Code: {error.status} +

+ )} +
+ + {/* Action Buttons */} +
+ + Go back home + + +
+
+
+
+
+ ) +} \ No newline at end of file diff --git a/src/layout/empty-layout/index.tsx b/src/layout/empty-layout/index.tsx new file mode 100644 index 0000000..9b51dfb --- /dev/null +++ b/src/layout/empty-layout/index.tsx @@ -0,0 +1,13 @@ +import { Outlet } from "react-router-dom" + +/** + * Empty layout component that provides minimal structure. + * Useful for pages that need full control over their layout. + */ +export default function EmptyLayout() { + return ( +
+ +
+ ) +} \ No newline at end of file diff --git a/src/main.tsx b/src/main.tsx index 319db61..fb4f525 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,21 +1,19 @@ import { StrictMode } from "react" import { createRoot } from "react-dom/client" import { Provider } from "react-redux" -import { BrowserRouter, Route, Routes } from "react-router" +import { RouterProvider } from "react-router-dom" import store from "@/store" +import router from "@/router" import "./index.css" -import ProtectedRoute from "@/components/protected-route" +/** + * Main application entry point. + * Sets up the React app with Redux store and React Router. + */ createRoot(document.getElementById("root")!).render( - - - }> - - - - + , ) diff --git a/src/page/about/index.tsx b/src/page/about/index.tsx new file mode 100644 index 0000000..6cf33d9 --- /dev/null +++ b/src/page/about/index.tsx @@ -0,0 +1,110 @@ +/** + * About page component that displays information about the application. + */ +export default function About() { + return ( +
+ {/* Page Header */} +
+

+ About This Template +

+

+ Learn more about the technologies and architecture behind this React Router template. +

+
+ + {/* Content Sections */} +
+ {/* Technology Stack */} +
+

+ Technology Stack +

+
    +
  • + + React 19 - Latest version with modern features +
    • +
  • + + TypeScript - Type-safe development +
    • +
  • + + React Router v7 - Client-side routing +
    • +
  • + + Tailwind CSS - Utility-first styling +
    • +
  • + + Redux Toolkit - State management +
    • +
  • + + Vite - Fast build tool and dev server +
    • +
+
+ + {/* Features */} +
+

+ Key Features +

+
    +
  • + + Modern React Router implementation +
    • +
  • + + Protected routes with authentication +
    • +
  • + + Error boundary and error pages +
    • +
  • + + Responsive design with Tailwind +
    • +
  • + + TypeScript for type safety +
    • +
  • + + ESLint and Prettier configuration +
    • +
+
+
+ + {/* Architecture Overview */} +
+

+ Architecture Overview +

+
+

+ This template follows modern React development practices with a clear separation of concerns: +

+
    +
  • Components: Reusable UI components organised by feature
    • +
  • Pages: Route-level components that represent different views
    • +
  • Layouts: Wrapper components that provide consistent structure
    • +
  • Store: Redux Toolkit slices for state management
    • +
  • Router: Centralised routing configuration
    • +
+

+ The routing system uses React Router's latest data router approach with createBrowserRouter, + providing better performance and developer experience compared to the legacy BrowserRouter approach. +

+
+
+
+ ) +} \ No newline at end of file diff --git a/src/page/contact/index.tsx b/src/page/contact/index.tsx new file mode 100644 index 0000000..747e3fa --- /dev/null +++ b/src/page/contact/index.tsx @@ -0,0 +1,171 @@ +import React from "react" + +/** + * Contact page component that displays contact information and a contact form. + */ +export default function Contact() { + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault() + // Handle form submission logic here + alert("Thank you for your message! This is a demo form.") + } + + return ( +
+ {/* Page Header */} +
+

+ Get in Touch +

+

+ Have questions about this template? We'd love to hear from you. +

+
+ +
+ {/* Contact Information */} +
+

+ Contact Information +

+ +
+ {/* Email */} +
+
+ + + +
+
+

Email

+

zihlu.wang@outlook.com

+
+
+ + {/* GitHub */} +
+
+ + + +
+
+

GitHub

+

github.com/onixbyte/react-template

+
+
+ + {/* Documentation */} +
+
+ + + +
+
+

Documentation

+

Check the README.md file

+
+
+
+ + {/* Quick Links */} + +
+ + {/* Contact Form */} +
+

+ Send us a Message +

+ +
+ {/* Name */} +
+ + +
+ + {/* Email */} +
+ + +
+ + {/* Subject */} +
+ + +
+ + {/* Message */} +
+ +