Create React App Kullanmadan React TypeScript Projesi Oluşturmak

Yeni bir React projesi oluşturacağımız zaman genelde Create React App CLI kullanarak projeyi oluştururuz. Hatta istediğimiz şablonu parametreyle belirterek zamandan tasarruf etmiş oluruz. Bize zaman ve kolaylık kazandırsa da Create React App kullanmak her zaman iyi bir fikir olmayabilir. Bunun nedeni çoğu gereksiz paketleri de projeye dahil ediyor olmasıdır. Ayrıca projeyi build alırken veya canlı olarak geliştirme yaparken derleyiciye yeteri kadar müdahale edemiyoruz. Böyle durumlarda React projesini elle oluşturmak daha mantıklı hale geliyor.

Bilgisayarınızda Node yüklü olduğunu varsayıyorum. Eğer kurulu değilse önceki yazılarımda bununla alakalı detaylı bilgi vermiştim.

Projemizi oluşturmaya başlayalım;

npm init

Package.json dosyamız oluştuğuna göre artık npm paketlerini yükleyebiliriz. Projeyi build almak ve live modda çalıştırmamızı sağlayacak Webpack paketlerini kuralım.

npm i -D webpack webpack-cli webpack-dev-server html-webpack-plugin

Şablon dili olarak SASS kullanacağız. SASS’ı kullanabilmemiz için gerekli Webpack bağımlılıklarını kuralım.

npm i -D css-loader sass sass-loader style-loader

Webpack’in TypeScript’i okuyabilmesi için ts-loader paketini kuruyoruz.

npm i -D ts-loader

React, Typescript ve Bootstrap paketlerini kuruyoruz.

Bootstrap kurmak zorunda değilsiniz örnek olması açısından ekledim.

npm i @types/react @types/react-dom react react-dom typescript bootstrap

Gerekli bağımlılıkları kurduğumuza göre artık Webpack config ayarlarını yapılandırabiliriz. Ana dizinde webpack.config.js adında yapılandırma dosyamızı oluşturalım.

const path = require('path');
const HTMLWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/index.tsx',
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.ts|\.tsx$/,
                exclude: /node_modules/,
                use: 'ts-loader'
            },
            {
                test: /\.s[ac]ss$/i,
                use: [
                    // Creates `style` nodes from JS strings
                    "style-loader",
                    // Translates CSS into CommonJS
                    "css-loader",
                    // Compiles Sass to CSS
                    "sass-loader",
                ],
            }
        ]
    },
    plugins: [
        new HTMLWebpackPlugin({
            template: './public/index.html'
        }),
    ],
    output: {
        filename: '[name].bundle.js',
        sourceMapFilename: '[file].map',
        path: path.resolve(__dirname, 'dist/public')
    },
    performance: {
        hints: false,
    }
}

TypeScript’in çalışabilmesi için ana dizine tsconfig.json dosyası oluşturalım.

{
    "compilerOptions": {
        "noImplicitAny": false,
        "module": "es6",
        "target": "es5",
        "jsx": "react",
        "lib": [
            "es2018",
            "dom"
        ],
        "allowSyntheticDefaultImports": true,
        "removeComments": true,
    },
    "exclude": [
        "node_modules"
    ]
}

Artık React yazmaya başlayabiliriz. Ana dizine src klasörü oluşturup için index.tsx dosyasını oluşturalım.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import './styles/global.scss';

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

Ardından src klasörü içine components klasörünü oluşturalım. Oluşturduğumuz klasörün içine App.tsx dosyasını oluşturalım.

import React from 'react';

const App: React.FC = () => {

    return (
        <div className="container">
            <p className="hello-text">Merhaba Dünya !</p>
        </div>
    );
}

export default App;

React tarafını tamamladığımıza göre şablon/SASS tarafını oluşturmaya başlayabiliriz. src klasörü içine styles adında klasör oluşturup içine global.scss ve _app.scss adlarında iki sass stil dosyası oluşturalım.

//Bootstrap kurduysanız bu şekilde import edebilirsiniz;
@import "~bootstrap/scss/bootstrap";
@import "./app";

html,
body {
  font-family: Arial,sans-serif;
  padding: 0;
  margin: 0;
}
.hello-text {
    font-size: 20px;
}

Ana dizinde public klasörü oluşturup içine index.html dosyasını oluşturalım.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="atakanuludag.com"/>
    <title>AtakanUludag.com React TS WebPack App</title>
  </head>
  <body>
    <noscript>Tarayıcınız Javascript'i desteklemiyor veya etkinleştirilmemiş.</noscript>
    <div id="root"></div>
  </body>
</html>

Klasör ve dosya diziliminin son hali;

Webpack build ve start işlemlerini yapabilmek için package.json dosyasını açıp “scripts” bölümünde yazanları değiştiriyoruz.

"scripts": {
    "start": "webpack serve --mode development --open --hot",
    "build": "webpack --mode production"
},

Projeyi canlı olarak çalıştırmak için;

npm run start

Build almak için;

npm run build

Kaynak kodları ve GitHub adresi: https://github.com/atakanuludag/react-ts-webpack-app

Bir cevap yazın

E-posta hesabınız yayımlanmayacak.

This site uses Akismet to reduce spam. Learn how your comment data is processed.