Giriş: React.js ile Tanışma
Bir gün, JavaScript dünyasında gezinirken kendini birden React.js ile tanışırken buldun. Hep duyduğun, herkesin kullandığı, projelerine hayat veren o sihirli kütüphaneyi duydun ama tam olarak ne işe yaradığını bir türlü çözememiştin. Merak etme! Bugün sana React.js'in ne olduğunu, nasıl kurulduğunu ve projene nasıl dahil edeceğini adım adım anlatacağım.
React.js, Facebook tarafından geliştirilen, kullanıcı arayüzü oluşturmak için kullanılan açık kaynaklı bir JavaScript kütüphanesidir. Hızlı, verimli ve bileşen tabanlı bir yapı sunduğu için büyük projelerde bile kolayca kullanılabiliyor. Şimdi, gel birlikte React.js'i bilgisayarına kurup ilk projemizi başlatalım!
1. React.js Kurulum Adımları
Adım 1: Node.js ve npm'in Yüklü Olduğundan Emin Ol
React.js'i kullanmaya başlamadan önce, Node.js ve npm (Node Package Manager) bilgisayarında kurulu olmalıdır. Eğer Node.js yüklü değilse, ilk iş olarak [Node.js'in resmi sitesine](https://nodejs.org/) gidip en son sürümünü indir. İndirme işlemi tamamlandıktan sonra terminal veya komut istemcisinde şu komutları kullanarak kurulumun doğru yapıldığını kontrol et:
node -v
npm -v
Eğer her iki komut da sürüm numarasını gösteriyorsa, her şey doğru bir şekilde kuruldu demektir.
Adım 2: React Projesi Oluşturmak
Şimdi React projemizi oluşturmak için en kolay yolu kullanacağız: Create React App! Bu araç, React projesini sıfırdan başlatmak için gerekli tüm yapılandırmaları otomatik olarak yapar. Terminali aç ve şu komutu gir:
npx create-react-app proje-adi
Burada "proje-adi" kısmına oluşturmak istediğin projenin adını yazabilirsin. Komut çalıştığında, Create React App kütüphanesini indirip, projenin dosya yapısını kuracak ve gerekli bağımlılıkları yükleyecektir. Bu işlem tamamlandığında terminalde şu çıktıyı göreceksin:
Success! Created proje-adi at /path/to/proje-adi
Inside that directory, you can run several commands:
Adım 3: Projeyi Başlatmak
Şimdi projemizi başlatmak için gerekli adımı atıyoruz. Terminalde şu komutu yaz:
cd proje-adi
npm start
Bu komut, projeyi yerel sunucuda çalıştıracak ve genellikle tarayıcıda `http://localhost:3000` adresinden erişilebilen bir React uygulaması açılacaktır. Eğer her şey doğru yapıldıysa, tarayıcında "Welcome to React" yazan bir sayfa görmelisin. Tebrikler! Artık React projen başarıyla çalışıyor!
2. İlk React Bileşeninizi Oluşturma
Şimdi sırada, React’in asıl gücünü gösteren bileşenler var. React, her şeyi bileşenler olarak düşünür. Her bileşen, birer JavaScript fonksiyonu gibi çalışır ve bu fonksiyonlar HTML'i render eder. İlk bileşeninizi oluşturmak için `src/App.js` dosyasına gidin ve şu kodu yazın:
import React from 'react';
function App() {
return (
Merhaba, React!
İlk React bileşenini başarıyla oluşturdun!
);
}
export default App;
Yukarıdaki kod, tarayıcıda "Merhaba, React!" başlığını ve "İlk React bileşenini başarıyla oluşturdun!" yazısını gösterecektir. Şimdi tarayıcını yenileyebilir ve bileşeninizi görebilirsiniz.
3. React.js ile Hızlıca Geliştirme Yapmak
React, sadece bileşenler değil, aynı zamanda hızlı geliştirme süreçleri sunar. `npm start` komutunu çalıştırarak, projenizde yaptığınız her değişikliği anında tarayıcıda görebilirsiniz. Bu, geliştiricilerin hızlıca iterasyon yapmalarını sağlar.
Buna ek olarak, React Developer Tools tarayıcı eklentisini de kullanarak uygulamanızı daha verimli bir şekilde debug edebilirsiniz. Eklentiyi Google Chrome veya Mozilla Firefox’a indirip, uygulamanızın durumunu daha rahat izleyebilirsiniz.
Sonuç
Ve işte bu kadar! Artık React.js kurulumunu tamamladın ve ilk projenin temelini attın. Bu kütüphaneyi kullanarak daha büyük ve karmaşık projeler geliştirebilir, modern web uygulamalarının gücünden yararlanabilirsin. Unutma, React ile her şey bir bileşenle başlar ve sen bu yolculuğa adım atmış oldun.
Bonus İpucu: React’i daha verimli öğrenmek için resmi dökümantasyonunu düzenli olarak inceleyebilir, topluluklardan ve forumlardan faydalanabilirsin. Şimdi, zamanla React dünyasında ustalaşacak ve harika projelere imza atacaksın. Kolay gelsin!
