create-react-app ile oluşturulan projeye hot-reload özelliği eklemek

create-react-app ile oluşturulan bir projede default olarak bir hot-reload özelliği bulunuyor. Ancak tüm sayfa yenilendiği için, başlarda çok problem olmasa da, proje büyüdükçe faydalı olmaktan çıkıyor.

"index.js" dosyasında, webpack'in "module.hot" özelliğine ekleme yapılarak hot-reload özelliği işlevsel hale getirilebiliyor.


Bunun için "index.js" dosyasında aşağıdaki gibi değişiklik yapmak gerekiyor:

import React from 'react';

import ReactDOM from 'react-dom';

import './assets/index.css';

import App from './App';

import registerServiceWorker from './registerServiceWorker';

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

if (module.hot) {

module.hot.accept('./App', () => {

const NextApp = require('./App').default;

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

});

}

registerServiceWorker();

Vagrant vb. uygulamalar aracılığı ile geliştirme yaparken bu yeterli olmayabiliyor. Örneğin, geliştirme ortamı windows, kod derleme ortamı linux ise, windows tarafındaki dosya değişiklikleri, linux tarafından algılanamayabiliyor.

Bunun için ise root dizinde ".env" dosyasına aşağıdaki kodun eklenerek polling'in enable edilmesi gerekiyor. 

CHOKIDAR_USEPOLLING=true

Root dizinde bir ".env" dosyası yoksa, önce bunu oluşturmak gerekiyor.

Bu işlemler sonrasında hot-reload neredeyse sorunsuz çalışıyor. 

Kaynaklar:

• https://medium.com/superhighfives/hot-reloading-create-react-app-73297a00dcad
• https://stackoverflow.com/questions/42025225/react-auto-reload-with-vagrant
• https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-development-environment-variables-in-env

Redux store fonksiyonları

The store binds together the three principles of redux. It holds the current applications state object. It lets you dispatch actions. When you create it, you need to specify the reducer that tells how state is updated with actions.

The store has three important methods.

The first method of store is "getState". It retrieves the current state of the redux store.

The second and the most commonly used store method is called "dispatch". And it lets you dispatch actions that changes the state of your application.

Third redux store method is called "subscribe". It lets you register a callback that the redux store will call anytime an action has been dispatched.

Store, redux’ın üç prensibini birleştirir. Uygulamanın state objesini tutar. Action’ları dispatch eder (dağıtır). Store’u oluştururken state’lerin action’larla nasıl güncelleneceği belirtilmelidir. (createStore function’ına parametre olarak reducer verilmelidir.)

Store’un 3 önemli yöntemi/metodu/fonksiyonu vardır.

İlki “getState”tir. Redux store’unun mevcuttaki state’ini getirir.

İkincisi ve en çok kullanılanı “dispatch”tir. Uygulamadaki state’leri değiştirecek action’ları dağıtır.

Üçüncüsü “subscribe”dır. Store’a bir callback ekler. Bir action çalıştığında redux store tarafında çağrılır.

Kaynak: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

ve devamındaki videolar.

Redux prensipleri

First principle of redux; everything that changes in your application including the data and the ui state is contained in a single object. we call that state or state tree. (store)

Second principle of redux is that the state tree is read only. You cannot modify or write through it.

The pure functions are the functions whose return value depends only on the values of arguments. They do not have any observable side affects. They do not modify the values passed to them.

Impure functions may call the database or the network. They may have side affects. They may operate on the DOM. They may override the values passed to them.

The third principle of redux is some functions that makes the changes on states have to be pure in redux. (Reducer must be pure.)

Redux’ın ilk prensibi, uygulama içindeki herhangi bir data olsun veya ui olsun, olan herhangi bir değişikliğinin tek bir obje içerisinde tutulmasıdır. Buna “state” veya “state tree” denir.

Redux’ın ikinci prensibi, “state”in sadece okunur olması, üzerinde herhangi bir değişiklik yapılamaması veya üzerine yazılamamasıdır.

“Pure functions (Katışıksız fonksiyonlar)” sadece aldığı parametreleri kullanarak değer dönen metotlardır. Bu fonksiyonların herhangi bir yan etkisi yoktur. Fonksiyon, kendisine geçirilen parametreleri değiştirmez.

“Impure functions (karışık fonlsiyonlar)” database’den veya network’ten bilgi çekiyor olabilir. Yan etkileri olabilir, DOM’u yönetebilir. Kendilerine geçirilen parametreleri değiştirebilirler.

Redux’ın üçüncü prensibi state’lerde değişiklik yapan fonksiyonlar “pure function” olmalı. (Reducer pure function olmalı.)

Kaynak: https://egghead.io/lessons/javascript-redux-the-single-immutable-state-tree

ve devamındaki videolar.

Ubuntu'da node.js yükleme

• node.js indirme:

curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash -

• node.js yükleme:

sudo apt-get install -y nodejs

• versiyon kontrolü:

node -v 

Kaynak:

https://nodejs.org/en/download/package-manager/#debian-and-ubuntu-based-linux-distributions

jQuery Plugin'i yazma

jQuery, hemen hemen bütün browserlar (tarayıcı) üzerinde çalışan bir JavaScript kütüphanesidir. Bu kütüphane; kod yazma sürecini azaltma, hemen hemen tüm tarayıcılarla uyumlu olma gibi faydalarının yanı sıra kullanıcılara kendi plugin’lerini (eklenti) geliştirme olanağı da sağlar.

Yazılan pluginlerin dosya ismi de genellikle “jquery.plugin_ismi.js” şeklinde olur. Bu plugini kullanabilmek için web sayfasına (html, asp, aspx, jsp vb.) ilk önce jQuery kütüphanesi eklenmeli daha sonra da yazılmış olan ve yukarıdaki gibi isimlendirilerek kaydedilmiş olan plugin’in JavaScript dosyası eklenmelidir.

jQuery’de plugin yazılabilmesi için “jQuery.fn” nesnesine bir property eklenmesi gerekmektedir. Eklenen bu property’nin ismi aynı zamanda pluginin ismi de olacaktır.

Bir jQuery plugin şablonu aşağıdaki gibidir:

(function ($) {

    $.fn.plugin_ismi = function () {

        //Plugin kodları

    }

})(jQuery);

Bu jQuery plugini birden fazla HTML elementine de uygulanabilir. Bunun şablonu da aşağıdaki gibidir:

(function ($) {

    $.fn.highlight = function () {

        this.each(function () {

                //Plugin kodları

        });

    }

})(jQuery);

Bunu bir örnek ile anlatmak istersek: Örneğin; üzerine gelince yazının arka plan rengini ve yazının rengini değiştiren bir plugin tasarlayalım.

Bu plugin yazılara uygulanacağından, bazı parçalarına uygulanıp bazı parçalarına uygulanmamak istenebilir. Birden fazla elemente uygulanma ihtimali olduğundan yukarıdaki ikinci şablona göre pluginimizi yazacağız.

(function ($) {

    $.fn.highlight = function () {

        this.each(function () {

            $(this).hover(function () {

                $(this).attr("style", "background-color: Yellow; color: Red;");

            }, function () {

                $(this).removeAttr("style");

            });

        });

    }

})(jQuery);

Bu kod “jquery.highlight.js” ismiyle kaydedilir. Daha sonra web sayfasında “head” tagları içine jQuery kütüphanesi ve yazılan plugin eklenir:

    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="Scripts/jquery.highlight.js" type="text/javascript"></script>

Bu plugin, “lblTest” class’ına sahip bütün elementlere aşağıdaki gibi uygulanır:

$(document).ready(function () {

    $(".lblTest").highlight();

});

Sonuç olarak tüm html kodu aşağıdaki gibidir:

<html>

<head>

    <title>test2</title>

    <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>

    <script src="Scripts/jquery.highlight.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(document).ready(function () {

            $(".lblTest").highlight();

        });

    </script>

</head>

<body>

        <label class="lblTest">

            Eyüp</label>

        <label class="lblTest">

            DALAN</label>

</body>

</html>

Mouse hover'dan önce

 

Mouse hover'dan sonra