আমাদের HTML Templeate প্রোভাইড করা হলে, সর্বপ্রথম html templete থেকে jsx রুপান্তরের মাধ্যমে Component গুলো তৈরি করে নিব।

নিচের ভিডিওতে তাপসদা দেখিয়েছেন কিভাবে HTML থেকে JSX রুপান্তর করতে হয়। ও ফটো/আইকন গুলো jsx এ কিভাবে ব্যবহার করতে হয়।

১। Install vite with tailwindcss and React ২। html template থেকে jsx রুপান্তর ও ফটো/আইকন গুলো jsx এ কিভাবে ব্যবহার (copy assests folder and icons)। ৩। tailwindcss setup (vite.config.js and tailwind.config.js)।

tailwind.config.js setup

theme: {
 extend: {
   // Add custom spacing
   container: {
     center: true,
     padding: "2rem",
   },
   // Add custom colors
   colors: {
     primary: "#ff0000",
     secondary: "#00ff00",
   },
 },
},

৪। কম্পোনেন্ট তৈরি শুরু এবং একে একে সবগুলো কম্পোনেন্ট তৈরি করে নিব।

create data folder make movies data hardcoded

কিভাবে Theme Switch করব।

একটি ThemeContext তৈরি করব। নিচের ক্লাসটি এড করব styles.css.