React Uygulamasını Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi

React Uygulamasını Webpack 4 ve Babel 7 ile Manuel Kurulum Rehberi

Giriş: Neden Manuel Kurulum?

React ekosisteminde yeni bir proje başlatmanın en yaygın ve önerilen yolu, Create React App (CRA) kullanmaktır. CRA, geliştiricilere hazır bir yapılandırma ile hızlıca başlamalarını sağlayan, sıfır yapılandırma gerektiren güçlü bir araçtır. Ancak, CRA’nın sunduğu bu kolaylık, bazen projenin temelini oluşturan araçların (Webpack, Babel gibi) nasıl çalıştığına dair derinlemesine bir anlayış edinmeyi engeller. Özellikle büyük ölçekli uygulamalar geliştirirken veya projenin performansını, boyutunu ve derleme sürecini ince ayar yapmak istediğinizde, Webpack ve Babel gibi araçların manuel olarak nasıl yapılandırıldığını bilmek paha biçilmez bir yetenek haline gelir.

Bu makale, React uygulamanızı Webpack 4 ve Babel 7 kullanarak sıfırdan, adım adım nasıl kuracağınızı detaylı bir şekilde açıklayacaktır. Bu süreç, sadece bir React projesi kurmanıza yardımcı olmakla kalmayacak, aynı zamanda modern JavaScript geliştirmenin temel taşları olan modül paketleyicileri ve transpiler’ların çalışma prensiplerini de anlamanızı sağlayacaktır. Manuel kurulum, projenizin bağımlılıkları, performans optimizasyonları ve özel ihtiyaçları üzerinde tam kontrol sahibi olmanızı sağlar. Bu derinlemesine bilgi, gelecekte karşılaşacağınız karmaşık sorunları çözme ve projenizi daha verimli hale getirme konusunda size büyük avantaj sağlayacaktır.

Bu rehberde, bir React uygulamasının çalışması için gerekli olan tüm temel yapılandırma adımlarını ele alacağız: proje başlatma, React ve React DOM kurulumu, Webpack’in temel bileşenlerini anlama ve yapılandırma (giriş noktası, çıktı, loader’lar, plugin’ler), Babel’i modern JavaScript ve JSX kodunu tarayıcıların anlayabileceği formata dönüştürmek için entegre etme ve basit bir React bileşeni oluşturarak uygulamanızı çalıştırma. Ayrıca, CSS yönetimi gibi ek konulara da değinerek kapsamlı bir kurulum deneyimi sunmayı hedefliyoruz.

Ön Gereksinimler

Bu rehberi takip etmek için aşağıdaki ön gereksinimlere sahip olmanız gerekmektedir:

* Node.js ve npm/Yarn: Bilgisayarınızda Node.js kurulu olmalıdır. Node.js kurulumuyla birlikte npm (Node Package Manager) de otomatik olarak kurulur. İsteğe bağlı olarak Yarn paket yöneticisini de kullanabilirsiniz. Kurulum durumunu kontrol etmek için terminalinizde node -v ve npm -v (veya yarn -v) komutlarını çalıştırabilirsiniz.
* Temel JavaScript Bilgisi: ES6+ (ECMAScript 2015 ve sonrası) özelliklerine aşinalık.
* Temel React Bilgisi: React’in temel kavramlarına (bileşenler, JSX, props, state) yüzeysel bir aşinalık.
* Terminal/Komut İstemi Kullanımı: Temel terminal komutlarını (klasör oluşturma, klasöre gitme, paket yükleme vb.) kullanabilme becerisi.
* Metin Düzenleyici: Visual Studio Code, Sublime Text veya Atom gibi bir kod düzenleyici.

Proje Başlatma ve Temel Yapılandırma

İlk adım, projemiz için bir klasör oluşturmak ve Node.js paket yöneticisi (npm veya Yarn) ile temel bir package.json dosyası oluşturmaktır.

1. Proje Klasörü Oluşturma:
Terminalinizi açın ve aşağıdaki komutları çalıştırarak yeni bir proje klasörü oluşturun ve içine girin:

mkdir my-react-webpack-app
    cd my-react-webpack-app

2. package.json Dosyası Oluşturma:
Şimdi, projenizin bağımlılıklarını ve betiklerini yönetecek olan package.json dosyasını oluşturun. -y bayrağı, tüm varsayılan soruları onaylayarak hızlıca bir dosya oluşturmanızı sağlar.

npm init -y

Bu komut, projenizin kök dizininde package.json adında bir dosya oluşturacaktır.

3. Temel Klasör Yapısı:
Projemizin daha düzenli olması için temel bir klasör yapısı oluşturalım. src klasörü tüm kaynak kodlarımızı, public klasörü statik dosyalarımızı (örneğin index.html), dist klasörü ise Webpack’in derlediği çıktı dosyalarını barındıracaktır.

mkdir src public

Bu noktada projenizin yapısı aşağıdaki gibi görünmelidir:

my-react-webpack-app/
    ├── node_modules/ (henüz yok, sonra oluşacak)
    ├── public/
    ├── src/
    └── package.json

React ve React DOM Kurulumu

Şimdi sıra React ve React DOM paketlerini projemize eklemeye geldi. Bu paketler, React uygulamaları geliştirmek için temel yapı taşlarıdır.

npm install react react-dom

* react: React’in çekirdek kütüphanesini içerir. Bileşenler, sanal DOM ve React’in temel çalışma prensipleri bu pakette yer alır.
* react-dom: React bileşenlerini web tarayıcısında (DOM) oluşturmak için gerekli olan paket. ReactDOM.render() gibi metotları sağlar.

Bu paketler, uygulamanızın çalışması için gerekli olduğundan dependencies (bağımlılıklar) olarak kurulur.

Webpack 4’ü Anlamak ve Kurmak

Webpack Nedir ve Neden Kullanılır?

Webpack, modern JavaScript uygulamaları için bir modül paketleyicidir (module bundler). Temel görevi, projenizdeki tüm JavaScript dosyalarını, CSS dosyalarını, resimleri ve diğer statik varlıkları alıp bunları tarayıcıda verimli bir şekilde yüklenebilecek tek veya birden fazla paket (bundle) halinde birleştirmektir.

Neden Webpack’e ihtiyacımız var?

* Modül Yönetimi: Modern JavaScript geliştirme, kodu küçük, yönetilebilir modüllere ayırarak yapılır. Webpack, bu modüller arasındaki bağımlılıkları çözerek ve bunları doğru sırayla birleştirerek uygulamanın sorunsuz çalışmasını sağlar.
* Performans Optimizasyonu: Webpack, kod bölme (code splitting), sıkıştırma (minification), tree shaking (kullanılmayan kodu kaldırma) gibi tekniklerle uygulamanızın yüklenme süresini ve performansını artırır.
* Varlık Yönetimi: JavaScript dışında CSS, resimler, fontlar gibi farklı dosya türlerini de uygulama paketine dahil edebilir ve yönetebilir.
* Geliştirici Deneyimi: Hot Module Replacement (HMR) gibi özelliklerle, kodunuzda yaptığınız değişikliklerin anında tarayıcıya yansımasını sağlayarak geliştirme sürecini hızlandırır.

Webpack Kurulumu

Webpack’i projemize dev dependencies (geliştirme bağımlılıkları) olarak kuracağız çünkü Webpack sadece geliştirme ve derleme aşamasında kullanılır, üretim ortamında çalışmaz.

npm install --save-dev webpack webpack-cli webpack-dev-server

* webpack: Webpack’in çekirdek kütüphanesi.
* webpack-cli: Webpack’i komut satırından çalıştırmak için gerekli arayüz.
* webpack-dev-server: Geliştirme sırasında uygulamanızı sunan bir geliştirme sunucusu. Kodunuzda değişiklik yaptığınızda otomatik olarak yeniden derler ve tarayıcıyı yeniler (veya HMR ile sadece değişen modülü günceller).

Webpack Yapılandırma Dosyası: webpack.config.js

Webpack’in nasıl çalışacağını belirlemek için projenizin kök dizininde webpack.config.js adında bir dosya oluşturmanız gerekir. Bu dosya, Webpack’in tüm ayarlarını içeren bir JavaScript nesnesini dışa aktarır.

webpack.config.js dosyasını oluşturun ve aşağıdaki temel yapılandırmayı ekleyin:

// webpack.config.js
const path = require('path');

module.exports = {
  // 1. Geliştirme veya üretim modunu belirtir.
  // 'development' veya 'production' olabilir.
  mode: 'development',

  // 2. Uygulamanızın başlangıç noktası.
  // Webpack, bağımlılık grafiğini buradan oluşturmaya başlar.
  entry: './src/index.js',

  // 3. Derlenmiş çıktı dosyalarının nereye kaydedileceğini belirtir.
  output: {
    // Çıktı dosyasının adı. [name] entry'deki anahtarı kullanır, [contenthash] ise dosya içeriğine göre bir hash ekler.
    filename: 'bundle.js',
    // Çıktı klasörünün mutlak yolu.
    path: path.resolve(__dirname, 'dist'),
    // Her yeni derlemede 'dist' klasörünü temizler. (Webpack 5 ile birlikte geldi, Webpack 4 için clean-webpack-plugin kullanmalıyız)
    // clean: true,
  },

  // 4. Modül işleme kuralları (loader'lar).
  // Farklı dosya türlerini (JS, CSS, resimler vb.) Webpack'in anlayabileceği modüllere dönüştürür.
  module: {
    rules: [
      // Loader'lar buraya eklenecek (Babel, CSS loader'lar vb.)
    ],
  },

  // 5. Plugin'ler.
  // Webpack'in derleme süreci üzerinde daha geniş kapsamlı görevler yapmasını sağlar (optimizasyon, varlık yönetimi vb.).
  plugins: [],

  // 6. Geliştirme sunucusu ayarları.
  // webpack-dev-server için yapılandırma.
  devServer: {
    port: 3000, // Uygulamanın çalışacağı port
    open: true, // Sunucu başlatıldığında tarayıcıyı otomatik aç
    hot: true, // Hot Module Replacement (HMR) etkinleştirir
  },
};

Bu temel yapıyı adım adım inceleyelim:

* path modülü: Node.js’in yerleşik bir modülüdür ve dosya yollarıyla çalışmak için kullanılır. path.resolve(__dirname, 'dist') ifadesi, geçerli dizinin (__dirname) altındaki dist klasörünün mutlak yolunu verir. Bu, farklı işletim sistemlerinde yol sorunları yaşamamak için önemlidir.
* mode: Webpack’in çalışma modunu belirtir. development (geliştirme) modu daha hızlı derleme ve hata ayıklama için optimize edilmiştir, production (üretim) modu ise çıktıyı optimize eder (minify, tree shaking vb.).
* entry: Webpack’in uygulamanızın bağımlılık grafiğini oluşturmaya başlayacağı ana giriş noktasını belirtir. React uygulamamız için genellikle src/index.js olacaktır.
* output: Webpack’in derlenmiş çıktı dosyalarını nereye kaydedeceğini ve adlarını nasıl vereceğini belirtir. filename derlenmiş JavaScript dosyasının adını, path ise çıktı klasörünün mutlak yolunu tanımlar.

HTML Şablonu Oluşturma: html-webpack-plugin

Webpack, JavaScript dosyalarımızı derler, ancak tarayıcının bunları yükleyebilmesi için bir HTML dosyasına ihtiyacımız var. html-webpack-plugin, Webpack’in derlenmiş JavaScript paketini otomatik olarak bir HTML dosyasına enjekte etmesini sağlar.

1. Plugin Kurulumu:

npm install --save-dev html-webpack-plugin

2. public/index.html Dosyası Oluşturma:
public klasöründe index.html adında basit bir HTML dosyası oluşturun. Bu dosya, React uygulamasının bağlanacağı kök DOM öğesini içerecektir.

3. webpack.config.js Entegrasyonu:
Şimdi html-webpack-plugin‘i webpack.config.js dosyanıza dahil edin:

// webpack.config.js
    const path = require('path');
    const HtmlWebpackPlugin = require('html-webpack-plugin'); // Plugin'i içeri aktar

    module.exports = {
      mode: 'development',
      entry: './src/index.js',
      output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist'),
      },
      module: {
        rules: [],
      },
      plugins: [
        new HtmlWebpackPlugin({
          template: './public/index.html', // Kullanılacak HTML şablonu
          filename: 'index.html',          // Çıktı dosyasının adı (dist klasöründe)
        }),
      ],
      devServer: {
        port: 3000,
        open: true,
        hot: true,
      },
    };

plugins dizisine new HtmlWebpackPlugin() örneğini ekleyerek, Webpack’e public/index.html dosyasını şablon olarak kullanmasını ve derlenmiş bundle.js dosyasını otomatik olarak bu şablona enjekte etmesini söylüyoruz.

Geliştirme Sunucusu: webpack-dev-server

webpack-dev-server paketi, geliştirme sürecinizi büyük ölçüde kolaylaştıran bir HTTP sunucusu sağlar. Kodunuzda yaptığınız değişiklikleri algılar ve uygulamanızı otomatik olarak yeniden derleyip tarayıcıyı yeniler.

webpack.config.js dosyasında devServer objesi zaten tanımlanmıştı:

devServer: {
  port: 3000, // Uygulamanın çalışacağı port
  open: true, // Sunucu başlatıldığında tarayıcıyı otomatik aç
  hot: true,  // Hot Module Replacement (HMR) etkinleştirir
},

* port: Uygulamanızın erişilebilir olacağı port numarasını belirler.
* open: true olarak ayarlandığında, sunucu başlatıldığında tarayıcınızı otomatik olarak açar.
* hot: Hot Module Replacement (HMR) özelliğini etkinleştirir. HMR, uygulamanın tamamını yenilemeden, sadece değişen modülleri güncelleyerek geliştirme deneyimini iyileştirir.

package.json Scriptleri

Webpack komutlarını daha kolay çalıştırmak için package.json dosyanıza bazı betikler ekleyelim.

package.json dosyanızı açın ve scripts bölümünü aşağıdaki gibi güncelleyin:

{
  "name": "my-react-webpack-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server --config webpack.config.js --mode development",
    "build": "webpack --config webpack.config.js --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^5.6.0",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.3"
  }
}

* npm start: webpack-dev-server‘ı development modunda başlatır. Bu, geliştirme sırasında kullanacağınız komuttur.
* npm run build: Webpack’i production modunda çalıştırır. Bu, uygulamanızın dağıtıma hazır, optimize edilmiş bir sürümünü dist klasörüne derler.

Babel 7 ile Modern JavaScript Desteği

Babel Nedir ve Neden İhtiyaç Duyarız?

Babel, bir JavaScript derleyicisidir veya transpiler’ıdır. Temel görevi, modern JavaScript (ES6+, JSX, TypeScript vb.) kodunu alıp, eski tarayıcıların ve ortamların anlayabileceği eski JavaScript (ES5) koduna dönüştürmektir.

Neden Babel’e ihtiyacımız var?

* Tarayıcı Uyumluluğu: Yeni JavaScript özellikleri sürekli olarak eklenir, ancak tüm tarayıcılar bu özellikleri aynı anda desteklemez. Babel, kodunuzu geriye dönük uyumlu hale getirerek geniş bir tarayıcı desteği sağlar.
* JSX Desteği: React’in en belirgin özelliklerinden biri JSX’tir. JSX, JavaScript içinde HTML benzeri söz dizimi kullanmanızı sağlar. Tarayıcılar JSX’i doğrudan anlayamaz. Babel, JSX kodunu tarayıcıların anlayabileceği standart JavaScript (yani React.createElement() çağrılarına) dönüştürür.
* Geliştirici Verimliliği: Geliştiricilerin en yeni JavaScript özelliklerini ve söz dizimini (örneğin arrow functions, async/await, spread operatörü) kullanmasına olanak tanır, bu da daha temiz, daha okunabilir ve daha verimli kod yazmayı sağlar.

Babel Kurulumu

Babel’i ve React ile çalışmak için gerekli olan ön ayarları (presets) ve loader’ı kuralım:

npm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

* @babel/core: Babel’in çekirdek motoru.
* babel-loader: Webpack’in Babel’i kullanarak JavaScript dosyalarını işlemesini sağlayan loader.
* @babel/preset-env: JavaScript’in en son özelliklerini hedef tarayıcılara göre otomatik olarak dönüştüren bir Babel ön ayarı. Hangi tarayıcıları hedeflediğinizi belirterek sadece gerekli dönüşümleri yapar.
* @babel/preset-react: JSX söz dizimini ve React’e özgü diğer özellikleri standart JavaScript’e dönüştüren bir Babel ön ayarı.

Babel Yapılandırması: .babelrc veya babel.config.js

Babel’in hangi ön ayarları ve eklentileri kullanacağını belirtmek için projenizin kök dizininde .babelrc adında bir dosya oluşturmanız veya babel.config.js kullanmanız gerekir. .babelrc daha basittir ve küçük projeler için yeterlidir.

.babelrc dosyasını oluşturun:

// .babelrc
{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

Bu yapılandırma, Babel’e @babel/preset-env (modern JavaScript özelliklerini dönüştürmek için) ve @babel/preset-react (JSX’i ve React’e özgü diğer özellikleri dönüştürmek için) kullanmasını söyler.

Webpack ile Babel Entegrasyonu

Şimdi babel-loader‘ı webpack.config.js dosyanızdaki module.rules dizisine ekleyerek Webpack’in JavaScript/JSX dosyalarını Babel ile işlemesini sağlayalım.

webpack.config.js dosyanızı açın ve module.rules bölümünü güncelleyin:

// webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/, // .js veya .jsx uzantılı dosyaları hedefle
        exclude: /node_modules/, // node_modules klasöründeki dosyaları hariç tut
        use: {
          loader: 'babel-loader', // babel-loader kullan
        },
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.html',
    }),
  ],
  devServer: {
    port: 3000,
    open: true,
    hot: true,
  },
};

* test: /\.(js|jsx)$/: Bu kuralın .js veya .jsx uzantılı dosyalara uygulanacağını belirtir.
* exclude: /node_modules/: node_modules klasöründeki dosyaları Babel’in işlemesinden hariç tutarız. Bu, derleme süresini hızlandırır ve gereksiz dönüşümleri önler, çünkü genellikle bu paketler zaten derlenmiş JavaScript içerir.
* use: { loader: 'babel-loader' }: Eşleşen dosyalar için babel-loader‘ın kullanılacağını belirtir. babel-loader, .babelrc dosyasındaki yapılandırmayı otomatik olarak kullanacaktır.

CSS ve Stil Yönetimi

React uygulamalarında stil yönetimi için çeşitli yöntemler bulunur. En temel yöntem, CSS dosyalarını doğrudan import etmek ve Webpack aracılığıyla işlemek. Bunun için style-loader ve css-loader‘a ihtiyacımız var.

CSS Loader ve Style Loader

1. Loader Kurulumu:

npm install --save-dev style-loader css-loader

* css-loader: CSS dosyalarını okur ve @import ve url() ifadelerini çözerek bunları JavaScript modüllerine dönüştürür.
* style-loader: css-loader tarafından dönüştürülen CSS’i alır ve derlenmiş JavaScript paketi aracılığıyla DOM’a (genellikle