React Crash Course: Gerçek Bir Projeyi Sıfırdan Kodla! (2026)

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/challen... ⏱ 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](  / gumrah.codes  ) 🎵 [TikTok](  / gumrahsindar  ) 💼 [LinkedIn](  / gumrahsindar  ) 🧠 Etiketler (Tags) #react #reactjs #frontend #contextapi #usememo #reactuse #hooks #tailwindcss #frontendmentor #uygulamalıeğitim #figmatocode #reactdersi #reacteğitimi #webdevelopment