React Installation Guide

export default defineConfig({
  base: '/your-repo-name/',
  // ... rest of config
})

npm run build
npx gh-pages -d dist

FROM node:18-alpine AS build
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

FROM nginx:alpine
COPY --from=build /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#0891B2',      // Your primary brand color
        secondary: '#F97316',    // Accent color
        accent: '#8B5CF6',       // Additional accent
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        display: ['Poppins', 'sans-serif'],
      },
    },
  },
}

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
import Services from './pages/Services'; // New page

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/services" element={<Services />} /> {/* New route */}
      </Routes>
    </BrowserRouter>
  );
}

// src/components/Button.jsx
export default function Button({ children, onClick, variant = 'primary' }) {
  const styles = {
    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800',
  };
  
  return (
    <button
      onClick={onClick}
      className={`px-4 py-2 rounded-lg font-medium ${styles[variant]}`}
    >
      {children}
    </button>
  );
}

VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My React App

const apiUrl = import.meta.env.VITE_API_URL;
const title = import.meta.env.VITE_APP_TITLE;