Website tutorial interaktif untuk mempelajari React Lanjutan, Tailwind CSS, dan Form Handling.
- ✅ Context API dan state management
- ✅ Custom Hooks dan optimasi render
- ✅ Routing dengan React Router v6
- ✅ Tailwind CSS (Fokus Utama)
- Basics: Colors, Typography, Spacing, Flexbox, Grid
- Advanced: Responsive Design, Animations, Gradients
- Components: Cards, Buttons, Modals, Navigation
- ✅ Form Handling (Fokus Utama)
- Basic: Controlled components, Select, Radio, Checkbox
- Advanced: File upload, Date/Time pickers, Range sliders
- Validation: Formik & Yup integration
- Install dependencies:
npm install- Jalankan development server:
npm run dev- Buka browser di
http://localhost:5173
day2ui/
├── src/
│ ├── components/
│ │ └── Layout.jsx # Layout dengan navigation
│ ├── pages/
│ │ ├── Home.jsx # Homepage
│ │ ├── ContextAPI.jsx # Context API tutorial
│ │ ├── CustomHooks.jsx # Custom Hooks tutorial
│ │ ├── TailwindBasics.jsx # Tailwind CSS dasar
│ │ ├── TailwindAdvanced.jsx # Tailwind CSS lanjutan
│ │ ├── TailwindComponents.jsx # Komponen Tailwind
│ │ ├── FormsBasic.jsx # Form handling dasar
│ │ ├── FormsAdvanced.jsx # Form handling lanjutan
│ │ ├── FormsValidation.jsx # Form validation
│ │ └── ReactRouter.jsx # React Router tutorial
│ ├── App.jsx # Main app dengan routing
│ ├── main.jsx # Entry point
│ └── index.css # Tailwind CSS imports
├── index.html
├── package.json
├── tailwind.config.js
└── vite.config.js
- React 18
- React Router v6
- Tailwind CSS 3
- Formik & Yup
- Vite
- Home - Overview dan navigasi ke semua tutorial
- Context API - State management dengan Context API
- Custom Hooks - Membuat dan menggunakan custom hooks
- Tailwind Basics - Dasar-dasar Tailwind CSS
- Tailwind Advanced - Teknik lanjutan Tailwind
- Tailwind Components - Membangun komponen UI
- Forms Basic - Dasar-dasar form handling
- Forms Advanced - Teknik lanjutan form handling
- Forms Validation - Validasi dengan Formik & Yup
- React Router - Routing dan navigasi
npm run buildFile hasil build akan berada di folder dist/.
npm run preview