React 18 Webpack ile Proje Oluşturma 🤩

React 18 ile geliştirme ortamının oluşturulmasını adım adım açıklayacağım. Create React App ile kolaylıkla bir proje oluşturabiliriz ama bu yazımda kendi Node.js projemizi oluşturup, gerekli npm paketlerini kurarak ilerleyeceğim. Create React App bize Node.js projesi oluşturup, npm paketlerini kurup Web Server üzerinde projenin çalışmasını sağlıyor. Adım asım kendimiz projemizi oluşturalım 🙂

Node projesi oluşturma:

Öncelikli olarak bilgisayarında node ve npm kurulu olması gerekmektedir.

Aşağıdaki komutlar ile kontrol edebilirsin:

node - v
npm - v

Node ve Npm kurulu değil ise linklerden indirebilirsin.

NODE install

NPM install

Node ve Npm kurulu ise aşağıda bir klasör oluşturup npm init komutu ile package.json dosyamızda yer alıcak bilgileri girelim.

mkdir react18-webpack-babel-boilerplate
cd react18-webpack-babel-boilerplate
npm init or yarn init

React ve React-dom paketlerini projemize ekleyelim.

yarn add react react-dom

Webpack ile ilgili paketleri projemize indirelim.

yarn add -D webpack webpack-cli webpack-dev-server html-webpack-plugin

webpack : Node.js tabanlı bir JavaScript module paketleyicisidir. Pek çok bağımlılığa sahip paketleri, modülleri, dosyaları çeşitli işlemlerden geçirip (transpile, concat vs) belirtilen biçimde statik bir şekilde paketleyerek sunan bir araçtır.
webpack-cli : Webpack v4 veya sonraki bir sürümlerinde kullanılabilmektedir. Webpack'i komut satırından çağırabilmek için ihtiyacımız var.
webpack-dev-server : mini bir Node.js Express sunucusudur. Web soketi gibi davranmak için SockJS kütüphanesini kullanır. Localhost geliştirme ortamı oluşturmamızı sağlayacak.

Babel ile ilgili paketleri projemize ekleyelim.

yarn add -D babel-loader @babel/preset-env  @babel/eslint-parser @babel/runtime @babel/core  @babel/plugin-transform-runtime @babel/preset-react @babel/cli

**babel-loader : ** Babel ve webpack kullanarak JavaScript dosyalarının aktarılmasına izin verir.
@babel/preset-env : JavaScript bundle sizelarını küçültür
babel-eslint : ESLint'in Babel tarafından dönüştürülen kaynak kod üzerinde çalışmasına izin veren parser.
@babel/core : temel paket
@babel/runtime : polyfill ve Babel'in başvurabileceği diğer birçok şeyi içeren paket.
@babel/cli : babel'i kullanmak için komut satırı arabirimi
@babel/plugin-transform-runtime : Kod boyutunu küçültmek için ve Babel'in enjekte edilen yardımcı kodunun yeniden kullanılmasını sağlamak için kullanılan plugin
@babel/preset-react : Html dosyalarını React tabanlı dosyaya dönüştürmeye yardımcı olur

Linterları ekleyelim.

yarn add -D eslint eslint-config-airbnb-base eslint-plugin-jest eslint-config-prettier path

Public dizini altında Index.html dosyamızı oluşturalım.

mkdir public
cd public

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

src dizininin altında App.js dosyamızı oluşturalım.

import React from 'react'

const App = () => {
  return <div>React App</div>
}

export default App

index.js dosyamızı oluşturalım.

import React from 'react'
import { createRoot } from 'react-dom/client'

import App from './App'

const rootElement = document.getElementById('root')
const root = createRoot(rootElement)

root.render(<App />)

webpack.config.js dosyamızı oluşturalım. Bu config dosyası, projedeki dosyaları tek bir dosyada bir araya getirmeye ve geliştirici sunucusunu kurmayı sağlayan yapılandırmalar içermektedir.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

/** Temel olarak webpack'e index.js'yi başlangıç olarak almasını söylüyoruz. Ardından, tüm dosya uzantılarını kontrol et ve
 *  module.rules içindeki tüm kuralları uygula ve çıktıyı üretip ortak klasördeki main.js'ye yerleştir diyoruz. */

module.exports = {
  /** "mode"
   * ortam - development, production, none.
   *  default: production
   */
  mode: 'development',
  entry: './src/index.js',
  output: {
    /** "path"
     * çıktının oluşturulcağı path
     */
    path: path.resolve(__dirname, 'build'),
    /** "filename"
     * çıktı dosya adı
     */
    filename: 'main.js',
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public', 'index.html'),
    }),
  ],
  target: 'web',
  devServer: {
    /** "port"
     * dev server port numarası
     */
    port: '8000',
    /** "static"
     * Webpack'e hangi statik dosyayı sunması gerektiğini söyler.
     */
    static: ['./public'],
    /** "open"
     * server başarılı bir şekilde çalışmaya başladığında browserda sayfanın açılmasını sağlar.
     */
    open: true,
    /** "hot"
     * sayfaya yapılan değişikliğin yansımasını sağlar.
     */
    hot: true,
    /** "liveReload"
     * Bunun çalışması için "hot" false olarak ayarlanmalıdır.
     */
    liveReload: false,
  },
  resolve: {
    /** "extensions"
     * Birden fazla dosya aynı adı sahipse ve farklı uzantılara varsa,
     * webpack dizide ilk listelenen uzantıya sahip olanı çözer ve gerisini atlar.
     */
    extensions: ['.js', '.jsx', '.json'],
  },
  module: {
    /** "rules"
     * bir require()/import deyiminin içinde '.js veya .jsx' dosyasına çözümlenen bir yolla karşılaşıldığında,
     * onu eklemeden önce dönüştürmek için babel-loader'ı kullan.
     * node_modules klasörünü arama dışında bırak.
     */
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader',
      },
    ],
  },
}

.babelrc dosyasını oluşturalım.

{
    /*
        ön ayar, belirli dil özelliklerini desteklemek için kullanılan bir dizi eklentilerdir.
        Babel'in varsayılan olarak kullandığı iki ön ayar: es2015, React
    */
    "presets": [
        "@babel/preset-env", //compiling ES2015+ syntax
        "@babel/preset-react" //for react
    ],
    /*
        Babel'in kod dönüşümleri, yapılandırma dosyasına eklentiler veya hazır ayarlar uygulanarak etkinleştirilir.
    */
    "plugins": [
        "@babel/plugin-transform-runtime"
    ]
}

Projede yarn start ve yarn build komutlarını çalıştırabilmek için package.json dosyasına aşağıdaki scriptleri ekleyelim.

"scripts": {
    "start": "webpack-dev-server .",
    "build": "webpack ."
  }

package.json dosyasının son hali:

{
  "name": "react18-webpack-babel-boilerplate",
  "version": "1.0.0",
  "description": "React 18 Webpack Babel Boilerplate",
  "main": "src/index.js",
  "scripts": {
    "start": "webpack-dev-server .",
    "build": "webpack ."
  },
  "keywords": [
    "react18",
    "webpack",
    "babel"
  ],
  "author": "elifnurkarakoc",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.20.7",
    "@babel/core": "^7.20.12",
    "@babel/eslint-parser": "^7.19.1",
    "@babel/plugin-transform-runtime": "^7.19.6",
    "@babel/preset-env": "^7.20.2",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.20.7",
    "babel-loader": "^9.1.2",
    "eslint": "^8.32.0",
    "eslint-config-airbnb-base": "^15.0.0",
    "eslint-config-prettier": "^8.6.0",
    "eslint-plugin-jest": "^27.2.1",
    "html-webpack-plugin": "^5.5.0",
    "path": "^0.12.7",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  }
}

Proje Github Link

Okuduğun için teşekkürler 💐

Elif