Ana içeriğe geç

Başlarken

Bu rehber, basit bir "tık tak takvimi" bileşeni oluşturmaya yöneliktir. Her konuda daha ayrıntılı bilgilere Rehber menüsündeki özel sayfalarda erişebilirsiniz.

💁‍♀️ ES2015 kullanmak zorunda değilsiniz... ama kullanmalısınız. Bu rehberin, babel ve/veya webpack/browserify/gulp/grunt/vb. ile bir tür ES2015 yapılandırmasına sahip olduğunuzu varsaydığını unutmayın. Eğer yoksa, preact-cli veya CodePen Şablonu ile başlayın.

İhtiyacınız Olanı İçe Aktarın​

preact modülü hem adlandırılmış hem de varsayılan dışa aktarımlar sağlar, bu nedenle ya istediğiniz bir ad alanı altında her şeyi içe aktarabilirsiniz ya da sadece ihtiyaç duyduğunuz öğeleri yerel olarak alabilirsiniz:

Adlandırılmış:

import { h, render, Component } from 'preact';

// Babel'e JSX'i h() çağrılarına dönüştürmesini bildirin:
/** @jsx h */

Varsayılan:

import preact from 'preact';

// Babel'e JSX'i preact.h() çağrılarına dönüştürmesini bildirin:
/** @jsx preact.h */

Adlandırılmış dışa aktarımlar, yüksek yapılandırılmış uygulamalar için iyi çalışırken, varsayılan dışa aktarım hızlıdır ve kütüphanenin farklı bölümlerini kullanırken herhangi bir güncelleme gerektirmez.

CDN üzerinden kullanımı:

<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.min.js"></script>

<!-- Preact'i bir JS Modülü olarak yüklemek için: -->
<script src="https://cdn.jsdelivr.net/npm/preact/dist/preact.mjs" type="module"></script>

Küresel pragma​

Kodunuzda @jsx pragma'sını belirtmek yerine, bunu bir .babelrc dosyasında küresel olarak yapılandırmak en iyisidir.

Adlandırılmış:

Babel 5 ve öncesi için:

{ "jsxPragma": "h" }

Babel 6 için:

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"h" }]
  ]
}

Babel 7 için:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma":"h" }]
  ]
}

Varsayılan:

Babel 5 ve öncesi için:

{ "jsxPragma": "preact.h" }

Babel 6 için:

{
  "plugins": [
    ["transform-react-jsx", { "pragma":"preact.h" }]
  ]
}

Babel 7 için:

{
  "plugins": [
    ["@babel/plugin-transform-react-jsx", { "pragma":"preact.h" }]
  ]
}

JSX'i Render Etme​

Öncelikle, Preact h() fonksiyonunu sağlar, bu da JSX'inizi Sanal DOM öğelerine dönüştürür (işte böyle). Ayrıca, bu Sanal DOM'dan bir DOM ağacı oluşturan bir render() fonksiyonu da sağlar.

Bir JSX render etmek için, bu iki fonksiyonu içe aktarın ve şu şekilde kullanın:

import { h, render } from 'preact';

render((
    <div id="foo">
        <span>Merhaba, dünya!</span>
        <button onClick={ e => alert("merhaba!") }>Bana Tıkla</button>
    </div>
), document.body);

Eğer hyperscript veya onun birçok dostu ile çalıştıysanız bu oldukça mantıklı görünmelidir.

ipucu

Ancak, bir Sanal DOM ile hyperscript render etmek anlamsızdır. Biz bileşenleri render etmek ve veri değiştiğinde güncellenmelerini istiyoruz - işte burada sanal DOM farklılıklarının gücü parlıyor. 🌟

Bileşenler​

Preact, kullanıcı arayüzünün kapsüllenmiş, kendini güncelleyen parçalarını oluşturmak için genişletilebilen genel bir Component sınıfı sunar. Bileşenler, shouldComponentUpdate() ve componentWillReceiveProps() gibi standart React yaşam döngüsü yöntemlerini destekler. Bu yöntemlerin belirli uygulamalarını sağlamak, bileşenlerin ne zaman ve nasıl güncelleneceğini kontrol etmek için tercih edilen mekanizmadır.

Bileşenlerin ayrıca bir render() metodu vardır, ancak React'tan farklı olarak bu metod (props, state) argümanları alır. Bu, props ve state'i JSX'den referans almak için yerel değişkenlere ayırmanın ergonomik bir yolunu sağlar.

Şimdi, mevcut zamanı gösteren çok basit bir Clock bileşenine bakalım.

import { h, render, Component } from 'preact';

class Clock extends Component {
    render() {
        let time = new Date().toLocaleTimeString();
        return <span>{ time }</span>;
    }
}

// Clock örneğini <body> içine render et:
render(<Clock />, document.body);

Bu harika. Bunu çalıştırmak aşağıdaki HTML DOM yapısını üretir:

<span>22:28:57</span>

Bileşenin Yaşam Döngüsü​

Saatin zamanının her saniye güncellenmesi için, `’ın DOM'a hangi zamanla monte edildiğini bilmemiz gerekir. _HTML5 Özel Elemanlarını kullandıysanız, bu attachedCallbackvedetachedCallback` yaşam döngüsü yöntemlerine benzer._ Preact, bir Bileşen için tanımlıysa aşağıdaki yaşam döngüsü yöntemlerini çağırır:

Yaşam döngüsü yöntemiNe zaman çağrılır
componentWillMountbileşen DOM'a monte edilmeden önce
componentDidMountbileşen DOM'a monte edildikten sonra
componentWillUnmountDOM'dan kaldırılmadan önce
componentWillReceivePropsyeni özellikler kabul edilmeden önce
shouldComponentUpdaterender() öncesinde. Render'ı atlamak için false döndürün
componentWillUpdaterender() öncesinde
componentDidUpdaterender() sonrası

Bu nedenle, bileşen DOM'a eklendiğinde 1 saniyelik bir zamanlayıcı başlatmak ve kaldırıldığında durdurmak istiyoruz. Zamanlayıcıyı oluşturacağız ve componentDidMount'ta ona bir referans saklayacağız, zamanlayıcıyı componentWillUnmount'da durduracağız. Her zamanlayıcı tiklemesi sırasında, bileşenin state nesnesini yeni bir zaman değeriyle güncellemeye çalışacağız. Bunu yapmak bileşeni otomatik olarak yeniden render eder.

import { h, render, Component } from 'preact';

class Clock extends Component {
    constructor() {
        super();
        // başlangıç zamanını ayarla:
        this.state = { time: Date.now() };
    }

    componentDidMount() {
        // zamanı her saniyede bir güncelle
        this.timer = setInterval(() => {
            this.setState({ time: Date.now() });
        }, 1000);
    }

    componentWillUnmount() {
        // render edilemezken durdur
        clearInterval(this.timer);
    }

    render(props, state) {
        let time = new Date(state.time).toLocaleTimeString();
        return <span>{ time }</span>;
    }
}

// Clock örneğini <body> içine render et:
render(<Clock />, document.body);

Artık bir tıklayan saat var!