Modern web geli\u015ftirmenin temel ta\u015flar\u0131ndan biri haline gelen React, bile\u015fen tabanl\u0131 yap\u0131s\u0131 ve deklaratif yakla\u015f\u0131m\u0131 sayesinde dinamik ve kullan\u0131c\u0131 dostu aray\u00fczler olu\u015fturmak i\u00e7in e\u015fsiz bir ara\u00e7 sunar. Bu makalede, React becerilerinizi peki\u015ftirmek ve farkl\u0131 karma\u015f\u0131kl\u0131k seviyelerindeki projelerde deneyim kazanmak amac\u0131yla d\u00f6rt farkl\u0131 uygulama geli\u015ftirece\u011fiz: Duyarl\u0131 bir dijital kartvizit, etkile\u015fimli bir portf\u00f6y sayfas\u0131, basit bir yap\u0131lacaklar listesi ve son olarak kapsaml\u0131 bir Noel dilek listesi uygulamas\u0131. Bu yolculuk boyunca React’\u0131n temel kavramlar\u0131ndan (bile\u015fenler, prop’lar, state) ileri seviye konulara (yerel depolama, veri y\u00f6netimi) kadar bir\u00e7ok konuya de\u011finecek, pratik \u00f6rneklerle \u00f6\u011frenmenizi kolayla\u015ft\u0131raca\u011f\u0131z. Haz\u0131rsan\u0131z, React d\u00fcnyas\u0131na dalal\u0131m!<\/p>\n
React, Facebook taraf\u0131ndan geli\u015ftirilen ve kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in kullan\u0131lan a\u00e7\u0131k kaynakl\u0131 bir JavaScript k\u00fct\u00fcphanesidir. Temel felsefesi, karma\u015f\u0131k UI’lar\u0131 y\u00f6netilebilir, yeniden kullan\u0131labilir ve ba\u011f\u0131ms\u0131z bile\u015fenlere ay\u0131rmakt\u0131r. Bu b\u00f6l\u00fcm, React’a yeni ba\u015flayanlar veya bilgilerini tazelemek isteyenler i\u00e7in bir temel olu\u015fturacakt\u0131r.<\/p>\n
React’ta her \u015fey bir bile\u015fendir. Bile\u015fenler, uygulaman\u0131z\u0131n ba\u011f\u0131ms\u0131z ve yeniden kullan\u0131labilir par\u00e7alar\u0131d\u0131r. \u0130ki ana bile\u015fen t\u00fcr\u00fc vard\u0131r: Fonksiyonel bile\u015fenler ve s\u0131n\u0131f bile\u015fenleri. G\u00fcn\u00fcm\u00fczde, React Hook’lar\u0131 sayesinde fonksiyonel bile\u015fenler \u00e7ok daha yayg\u0131n olarak kullan\u0131lmaktad\u0131r. Prop’lar (properties), bile\u015fenler aras\u0131nda veri aktar\u0131m\u0131 yapmak i\u00e7in kullan\u0131l\u0131r. \u00dcst bile\u015fenden alt bile\u015fene veri g\u00f6ndermenin tek y\u00f6nl\u00fc bir yoludur ve prop’lar genellikle salt okunurdur.<\/p>\n
import React from 'react';\n\nfunction Selamlama(props) {\n return Merhaba, {props.isim}!<\/h3>;\n}\n\n\/\/ Kullan\u0131m:
<\/code><\/p>\n
State Y\u00f6netimi ve Hook'lar (useState, useEffect)<\/h4>\n
State, bir bile\u015fenin zamanla de\u011fi\u015febilen verilerini ifade eder. React'ta state, uygulaman\u0131z\u0131n dinamik olmas\u0131n\u0131 sa\u011flayan temel mekanizmad\u0131r. useState<\/code> hook'u, fonksiyonel bile\u015fenlerde state y\u00f6netimi i\u00e7in kullan\u0131l\u0131rken, useEffect<\/code> hook'u yan etkileri (veri \u00e7ekme, DOM manip\u00fclasyonu, timer'lar vb.) y\u00f6netmek i\u00e7in kullan\u0131l\u0131r. Bu hook'lar, React'\u0131n g\u00fcc\u00fcn\u00fc fonksiyonel bile\u015fenlere ta\u015f\u0131m\u0131\u015ft\u0131r.<\/p>\nimport React, { useState } from 'react';\n\nfunction Sayac() {\n const [sayi, setSayi] = useState(0);\n\n return (\n \n Saya\u00e7: {sayi}<\/p>\n