React.js Nedir?

React.js, Facebook tarafından geliştirilen ve hızla popülerleşen bir JavaScript kütüphanesidir. Web uygulamaları geliştirmek için kullanılan bu kütüphane, bileşen tabanlı yapısıyla dikkat çeker. Her şeyden önce, React ile çalışmaya başladığınızda, kendinizi birdenbire çok güçlü bir araç setine sahip gibi hissedeceksiniz. Ama merak etmeyin, adım adım ilerleyerek her şeyi öğrenmek mümkün.

Eğer “React nedir?” sorusu aklınızdaysa, şunu söyleyebilirim: React, kullanıcı arayüzlerini (UI) inşa etmek için mükemmel bir araçtır. Dinamik web sayfaları ve uygulamalar yapmanızı sağlar. Birçok geliştirici, React’in sağladığı bileşen mantığını ve esnekliklerini seviyor. Peki, hadi o zaman React ile projeler yapmaya başlamak için gerekli adımlara bakalım.

React.js Kurulumu: Başlangıç İçin Adımlar

React.js'i bilgisayarınıza kurmak aslında oldukça basittir. Sadece birkaç komutla, yerel makinenizde çalışma ortamını hazırlayabilirsiniz.

Adım 1: Node.js ve npm Kurulumu
React, Node.js ve npm (Node Package Manager) gibi araçlarla çalışır. Bu yüzden React kurulumuna başlamadan önce bilgisayarınızda Node.js'in yüklü olması gerekiyor. Node.js, JavaScript'i sunucu tarafında çalıştırmanıza olanak sağlar. npm ise proje bağımlılıklarını yönetir.

Node.js'i indirmek için şu adrese gidin:
Node.js İndir

Kurulumdan sonra terminal veya komut satırında aşağıdaki komutları kullanarak Node.js ve npm’in doğru şekilde yüklendiğinden emin olabilirsiniz:

node -v
npm -v

Bu komutlar, sırasıyla Node.js ve npm'in yüklü sürüm numarasını gösterecektir. Eğer bir sürüm numarası görüyorsanız, kurulum başarılı demektir.

Adım 2: React Projesi Oluşturma
Şimdi ise React projemizi oluşturacağız. Bunun için `create-react-app` komut satırı aracını kullanacağız. Bu araç, React uygulamanız için gerekli tüm yapılandırmaları otomatik olarak yapar ve hızlıca bir başlangıç şablonu sunar. Terminal veya komut satırınızı açın ve aşağıdaki komutları sırasıyla girin:

npx create-react-app my-react-app
cd my-react-app
npm start

Bu komutlar şunları yapacaktır:
1. `npx create-react-app my-react-app` komutu, yeni bir React projesi oluşturur ve gerekli tüm dosyaları indirir. `my-react-app` yerine kendi proje adınızı verebilirsiniz.
2. `cd my-react-app` komutu, oluşturduğunuz proje klasörüne geçiş yapmanızı sağlar.
3. `npm start` komutu ise projeyi başlatır. Bu komut, tarayıcınızda otomatik olarak yeni React uygulamanızı açar.

Adım 3: Projenizi Keşfedin
Artık React projeniz hazır! Tarayıcınızda "http://localhost:3000" adresini ziyaret edebilirsiniz. Bu, varsayılan React başlangıç sayfanızdır. Şimdi, bu sayfayı değiştirebilir ve projeyi nasıl özelleştirebileceğinizi keşfedebilirsiniz. Projenizin ana dosyası `src/App.js`'dir. Burada, React bileşenlerini düzenleyerek uygulamanızın tasarımını değiştirebilirsiniz.

React Projeniz İçin İlk Bileşeni Yazalım

Artık React projeniz aktif, o zaman hemen bir bileşen yazalım. React bileşenleri, uygulamanızın her bir parçasını temsil eder. Hadi, basit bir "Merhaba, Dünya!" bileşeni oluşturalım.

`src/App.js` dosyasını açın ve şu şekilde düzenleyin:

import React from 'react';
import './App.css';

function App() {
  return (
    

      
Merhaba, Dünya!
    
  );
}

export default App;

Bu kadar basit! Şimdi sayfayı yenilediğinizde, "Merhaba, Dünya!" mesajını görmelisiniz. Eğer bunu gördüyseniz, React projeniz başarıyla çalışıyor demektir.

React.js ile Daha Fazlasını Yapın

React ile yapılacaklar listesi gerçekten uzun. State yönetimi, event handling, form işlemleri, API çağrıları gibi birçok özellik var. Bunlar, React’i kullanarak gerçekten dinamik ve etkileşimli web uygulamaları oluşturmanıza olanak sağlar.

Örneğin, React’in durum yönetimini (State) öğrenmek isterseniz, bir form oluşturarak kullanıcının girdiği bilgiyi saklayabilirsiniz. Veya daha ileri seviyede bir şeyler yapmak isterseniz, React Router ile sayfa geçişleri yapabilir, Redux ile uygulama durumu yönetebilirsiniz.

Projenizi Paylaşmak İçin: Netlify ve Vercel
Projeyi tamamladığınızda, bunu internette paylaşmak için ücretsiz platformları kullanabilirsiniz. Netlify ve Vercel, React uygulamanızı hızlı bir şekilde dağıtmanızı sağlayan harika araçlardır. Her iki platform da GitHub ile entegre çalışır, bu sayede projelerinizi GitHub'a yükleyip tek bir butonla yayınlayabilirsiniz.

Sonuç

React ile ilk projenizi oluşturmak, heyecan verici bir yolculuk olabilir. Bu kılavuzda, React.js kurulumunu ve basit bir proje oluşturmayı adım adım öğrendik. Artık React dünyasına adım atmaya hazırsınız! Unutmayın, her zaman pratik yaparak gelişebilirsiniz. İyi çalışmalar!