React'e Giriş Rehberi: Sıfırdan İlk Kullanıcı Arayüzünüzü Oluşturun

React, kullanıcı arayüzleri oluşturmak için kullanılan bir JavaScript kütüphanesidir. Facebook tarafından geliştirilmiş ve bakımı yapılmaktadır ve ön uç geliştirmede en popüler araçlardan biri haline gelmiştir. Bu kılavuz sizi sıfırdan başlayarak, React'in temel kavramlarını adım adım anlamanıza ve basit bir kullanıcı arayüzü oluşturmanıza yardımcı olacaktır.

Neden React'i Seçmelisiniz?

React'in aşağıdaki avantajları vardır:

• Bileşenleştirme: React, kullanıcı arayüzünü bağımsız, yeniden kullanılabilir bileşenlere ayırır. Bu, kodun bakımını ve anlaşılmasını kolaylaştırır.
• Bildirimsel: React, bildirimsel bir programlama stili kullanır; bu, yalnızca sunmak istediğiniz şeyi tanımlamanız gerektiği ve React'in güncellemeleri ve oluşturmayı otomatik olarak ele alacağı anlamına gelir.
• Verimli: React, sanal DOM ve akıllı diff algoritması kullanarak, kullanıcı arayüzünü verimli bir şekilde güncelleyebilir ve gereksiz oluşturmayı azaltabilir.
• Büyük Topluluk Desteği: React, geniş bir topluluğa ve zengin bir ekosisteme sahiptir; geliştirmenize yardımcı olacak çok sayıda eğitim, kütüphane ve araç bulabilirsiniz.
• Çapraz Platform Yeteneği: React Native, React'i kullanarak yerel mobil uygulamalar (iOS ve Android) geliştirmenize olanak tanır.

Hazırlık

Başlamadan önce, bilgisayarınızda aşağıdaki araçların kurulu olduğundan emin olmanız gerekir:

• Node.js: Node.js, React geliştirme araçlarını çalıştırmak için kullanılan bir JavaScript çalışma zamanı ortamıdır. https://nodejs.org/ adresinden indirip yükleyebilirsiniz.
• npm veya yarn: npm (Node Package Manager) ve yarn, React'in bağımlılıklarını kurmak ve yönetmek için kullanılan JavaScript paket yöneticileridir. Genellikle Node.js kurulduğunda npm de kurulur. yarn, https://yarnpkg.com/ adresinden kurulabilir.

İlk React Uygulamanızı Oluşturun

Bir React projesini hızlı bir şekilde oluşturmak için create-react-app kullanacağız.

1. npm kullanarak oluşturun:

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

2. yarn kullanarak oluşturun:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Yukarıdaki komutları çalıştırdıktan sonra, create-react-app otomatik olarak my-first-react-app adlı bir dizin oluşturacak ve bu dizinde bir React projesi başlatacaktır. npm start veya yarn start komutu, geliştirme sunucusunu başlatacak ve tarayıcınızda http://localhost:3000 adresini ziyaret ederek React uygulamanızı görüntüleyebilirsiniz.

Dizin Yapısı

create-react-app tarafından oluşturulan proje dizin yapısı aşağıdaki gibidir:

my-first-react-app/
├── node_modules/         # Proje bağımlılıkları için kütüphaneler
├── public/               # Statik kaynaklar (örneğin HTML dosyaları)
│   ├── index.html        # Uygulamanın giriş HTML dosyası
│   └── ...
├── src/                  # React kaynak kodu
│   ├── App.css           # App bileşeninin CSS stilleri
│   ├── App.js            # App bileşeni
│   ├── App.test.js       # App bileşeninin test dosyası
│   ├── index.css         # Global CSS stilleri
│   ├── index.js          # Uygulamanın giriş JavaScript dosyası
│   ├── logo.svg          # React logosu
│   └── ...
├── .gitignore            # Git yok sayma dosyası
├── package.json          # Projenin meta verileri ve bağımlılıkları
├── README.md             # Projenin açıklama belgesi
└── yarn.lock             # Bağımlılık sürüm kilitleme dosyası (yarn kullanılıyorsa)

React Bileşenlerini Anlama

React uygulamaları bileşenlerden oluşur. Bileşenler, kullanıcı arayüzünün belirli bölümlerini oluşturmak için kullanılan bağımsız, yeniden kullanılabilir kod bloklarıdır.

src/App.js dosyasında, varsayılan bir App bileşeni görebilirsiniz:

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

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Kod açıklaması:

• import React from 'react'; React kütüphanesini içe aktarır.
• function App() { ... } App adında bir fonksiyonel bileşen tanımlar.
• return ( ... ) Bileşenin ne oluşturması gerektiğini açıklayan bir JSX ifadesi döndürür.
• export default App; App bileşenini dışa aktarır, böylece diğer dosyalarda kullanılabilir.

JSX (JavaScript XML)

JSX, JavaScript kodunda HTML benzeri kod yazmanıza olanak tanıyan bir JavaScript sözdizimi uzantısıdır. Yukarıdaki örnekte, ... bir JSX ifadesidir. JSX kodu, tarayıcıların anlayabilmesi için Babel tarafından standart JavaScript koduna dönüştürülür.

App Bileşenini Değiştirme

App bileşenini değiştirelim ve basit bir sayaç oluşturalım.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Sayaç

      Şu Anki Sayı: {count}

      +
      -
    
  );
}

export default App;

Değişiklik Açıklaması:

• import React, { useState } from 'react'; useState Hook'unu içe aktarır. useState, fonksiyonel bileşenlere durum eklemek için kullanılan bir React Hook'udur.
• const [count, setCount] = useState(0); useState Hook'unu kullanarak count adında bir durum değişkeni oluşturur ve başlangıç değerini 0 olarak ayarlar. setCount, count durumunu güncellemek için kullanılan bir fonksiyondur.
• const increment = () => { setCount(count + 1); }; count durumunu 1 artırmak için increment adında bir fonksiyon tanımlar.
• const decrement = () => { setCount(count - 1); }; count durumunu 1 azaltmak için decrement adında bir fonksiyon tanımlar.
• Şu Anki Sayı: {count} Sayfada count durumunun değerini gösterir. {count}, JSX koduna JavaScript değişkenlerini eklemek için kullanılan bir JSX ifadesidir.
• + ve - increment ve decrement fonksiyonlarını bağlayan iki buton oluşturur. onClick, buton tıklandığında belirtilen fonksiyonu çalıştırmak için kullanılan bir olay işleyicisidir.

src/App.js dosyasını kaydettikten sonra, tarayıcı otomatik olarak yenilenecek ve basit bir sayaç göreceksiniz. "+" butonuna tıklamak sayıyı artıracak, "-" butonuna tıklamak sayıyı azaltacaktır.

CSS Stilleri Kullanımı

React uygulamanızı güzelleştirmek için CSS kullanabilirsiniz. create-react-app CSS Modules ve normal CSS dosyalarını destekler.

CSS Modules Kullanımı:

CSS Modules, her bileşen için bağımsız CSS stilleri oluşturmanıza olanak tanır, böylece stil çakışmalarını önler. Bir bileşende CSS Modules kullanmak için, .module.css ile biten bir dosya oluşturmanız gerekir.

Örneğin, App.module.css adında bir dosya oluşturun ve içine aşağıdaki CSS stillerini ekleyin:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Ardından, src/App.js dosyasında CSS Modules'ü içe aktarın:

import React, { useState } from 'react';
import styles from './App.module.css'; // CSS Modules'ü içe aktar

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* CSS sınıflarına başvurmak için styles nesnesini kullanın */}
      

# Sayaç

      Şu anki sayı: {count}

      +
      -
    
  );
}

export default App;

Normal CSS dosyası kullanma:

Ayrıca genel stilleri tanımlamak için normal bir CSS dosyası da kullanabilirsiniz. src/index.css dosyasında genel stilleri tanımlayabilirsiniz.

Örneğin, aşağıdaki CSS stilini ekleyin:

body {
  font-family: sans-serif;
}

Bu stil, uygulamanın tamamındaki body öğesine uygulanacaktır.

Sonraki Adım

Tebrikler, ilk React uygulamanızı tamamladınız! Ardından, React hakkında daha fazla bilgi edinebilirsiniz, örneğin:

• Bileşen iletişimi: Farklı bileşenlerin nasıl iletişim kuracağını öğrenin.
• Form işleme: Formların nasıl oluşturulacağını ve işleneceğini öğrenin.
• Yönlendirme: React Router kullanarak çok sayfalı uygulamaların nasıl oluşturulacağını öğrenin.
• Redux veya Context API: Uygulama durumunun nasıl yönetileceğini öğrenin.
• Hooks: useEffect, useContext vb. gibi React Hooks hakkında daha fazla bilgi edinin.

Unutmayın, React sürekli pratik ve öğrenme gerektiren bir teknolojidir. İyi öğrenmeler!