Skip to content

Latest commit

 

History

History
208 lines (150 loc) · 5.5 KB

README.md

File metadata and controls

208 lines (150 loc) · 5.5 KB

React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

React Compiler

The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see this documentation.

Expanding the ESLint configuration

If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the TS template for information on how to integrate TypeScript and typescript-eslint in your project.

React Portfolio Site

This project is a personal portfolio website built using React and Vite, designed to demonstrate modern front-end development practices, component-based architecture, and client-side routing.

1. Project Initialization (Vite + React)

The project was created using Vite, a modern front-end build tool optimized for fast development and hot module replacement (HMR).

npm create vite@latest react-portfolio -- --template react
cd react-portfolio
npm install
npm run dev

Why Vite?

  • Extremely fast dev server and rebuilds
  • Native ES module support
  • Minimal configuration
  • Production-ready builds out of the box

The application runs locally using a Vite development server (typically on http://localhost:5173).

2. Application Entry Point (main.jsx)

src/main.jsx is the entry point of the React application.

Responsibilities:

  • Mounts the React app to the DOM
  • Wraps the app in React Strict Mode
  • Enables client-side routing via BrowserRouter
<BrowserRouter>
  <App />
</BrowserRouter>

This allows navigation between pages without full page reloads.

3. Root Component (App.jsx)

App.jsx acts as the main application shell.

It:

  • Defines the overall layout
  • Renders persistent UI elements (navigation and footer)
  • Defines all application routes
<Nav />
<Routes>
  <Route path="/" element={<Home />} />
  <Route path="/about" element={<About />} />
  <Route path="/projects" element={<Projects />} />
  <Route path="/gallery" element={<Gallery />} />
  <Route path="/contact" element={<Contact />} />
  <Route path="*" element={<NotFound />} />
</Routes>
<Footer />

Navigation and footer remain visible while the main content changes dynamically.

4. Client-Side Routing (React Router)

The site uses React Router to simulate multiple pages within a single-page application (SPA).

Routes include:

  • / → Home
  • /about → About
  • /projects → Projects
  • /gallery → Gallery
  • /contact → Contact
    • → 404 Not Found

Benefits:

  • Faster navigation
  • Deep linking
  • No full page reloads

5. Project Structure

The project follows a clean and scalable folder structure:

src/
├── components/
│   ├── Nav.jsx
│   └── Footer.jsx
├── pages/
│   ├── Home.jsx
│   ├── About.jsx
│   ├── Projects.jsx
│   ├── Gallery.jsx
│   ├── Contact.jsx
│   └── NotFound.jsx
├── App.jsx
├── main.jsx
└── index.css

components/

Reusable UI elements shared across multiple pages.

pages/

Top-level page components rendered by React Router.

6. Navigation (Nav.jsx)

Navigation is implemented using NavLink from React Router.

<NavLink to="/projects">Projects</NavLink>

This allows:

  • SPA-style navigation
  • Active link styling based on the current route

7. Data-Driven Rendering (Projects Page)

The Projects page demonstrates rendering UI from data using JavaScript objects and arrays.

const projects = [
  {
    title: "Cash Register App",
    description: "Calculates change based on payment and drawer contents.",
    tags: ["JavaScript", "Logic"]
  }
];

Rendered using .map():

{projects.map(project => (
  <ProjectCard key={project.title} {...project} />
))}

Benefits:

  • Cleaner JSX
  • Easier maintenance
  • Scales well as more projects are added

8. Styling (index.css)

Global styling is handled in src/index.css.

Includes:

  • Responsive container widths
  • Grid layouts
  • Card-based UI components
  • Consistent spacing and typography
  • Subtle shadows and rounded corners

The design prioritizes clarity, accessibility, and professionalism without heavy frameworks.

9. Debugging & Error Resolution

A Vite import error occurred:

Failed to resolve import "./pages/Home.jsx"

Resolution steps:

  • Created the missing pages/ directory
  • Ensured file names and capitalization matched imports exactly
  • Verified .jsx file extensions
  • Restarted the development server

This highlights the importance of correct file paths and naming conventions in modern JavaScript tooling.

Summary

This project demonstrates:

  • Core React fundamentals
  • Component-based architecture
  • Client-side routing
  • Data-driven UI rendering
  • Clean project organization
  • Real-world debugging with modern tooling

It provides a solid foundation for adding advanced features such as dynamic routes, form handling, external APIs, and automated deployment.