*React Dersleri 2025!* Bu videoda, Frontend Mentor'daki bir Figma tasarımını sıfırdan *React* kullanarak, öğretici bir şekilde ve modern tekniklerle adım adım kodluyorum.
Gerçek bir projeyle, component mimarisi, props, state yönetimi, *useMemo hook'u*, context API, React Use kütüphanesi ve Tailwind CSS kullanımı gibi modern *React tekniklerini* uygulamalı olarak gösteriyorum.
Bu video, React öğrenmek isteyenler için uygulamalı bir rehberdir. Ekstra hiçbir hazır UI kütüphanesi kullanmadan, sadece React ekosistemi ve Tailwind CSS ile profesyonel bir tasarımı hayata geçiriyoruz.
🎯 *Hedef Kitle*
• React öğrenmeye başlayanlar
• Component mimarisi, props ve state yönetimini öğrenmek isteyenler
• useMemo ve Context API gibi teknikleri görmek isteyenler
• React Use hook'larıyla işlevselliği artırmak isteyenler
• Frontend Mentor projelerini uygulamalı şekilde geliştirmek isteyenler
💻 *Kullanılan Teknolojiler*
• React (Functional Components & Hooks)
• TypeScript
• React Use (https://github.com/streamich/react-use)
• Context API
• Tailwind CSS
• HTML5, CSS3
📌 *Konular*
• Component tabanlı yapı ve props kullanımı
• State yönetimi ve useState hook'u
• useMemo ile performans optimizasyonu
• React Use kütüphanesi ile hazır hook kullanımı
• Context API ile global state örneği
• Tailwind CSS ile hızlı ve esnek stil oluşturma
• Frontend Mentor figma tasarımı ile birebir uygulama
📌 *Proje Linki*
🔗 https://www.frontendmentor.io/challenges/browser-extension-manager-ui-yNZnOfsMAp
⏱ *TimeStamps*
00:00 Intro
00:38 Project Overview
01:20 Figma Overview
02:06 Project Setup & Variables
04:46 Tailwind Setup
08:31 App Layout & Header Section
15:40 App Structure & Header Section
24:54 Main Header Section
33:39 Main Cards Section
47:20 Making App Dynamic
58:40 Filtering With Buttons
01:02:42 useMemo()
01:06:45 Context API
01:15:47 Outro
📩 *İletişim:* contact@gumrahsindar.dev
🌐 [GitHub](https://github.com/gumrahsindar)
📸 [Instagram](https://www.instagram.com/gumrah.codes)
🎵 [TikTok](https://www.tiktok.com/@gumrahsindar)
💼 [LinkedIn](https://www.linkedin.com/in/gumrahsindar)
🧠 *Etiketler (Tags)*
#react #reactjs #frontend #contextapi #usememo #reactuse #hooks #tailwindcss #frontendmentor #uygulamalıeğitim #figmatocode #reactdersi #reacteğitimi #webdevelopment
Дата на публикация: 20 юни, 2025
Категория:
Друго
Харесайте ни във Facebook