index.md

layout	home
title	Preact

Preact

Aynı modern API ile React'e hızlı ve 3kB'lık alternatif

Başlangıç Preact'e Geçiş

function Counter() {
  const [value, setValue] = useState(0);

  return (
    <>
      <div>Counter: {value}</div>
      <button onClick={() => setValue(value + 1)}>Increment</button>
      <button onClick={() => setValue(value - 1)}>Decrement</button>
    </>
  )
}

Sponsorluğunda:

Başka bir tür kütüphane

Metal'e yakın

Preact, DOM'un üzerinde mümkün olabilecek en ince Sanal DOM soyutlamasını sağlar. Web stabil bir platform, emniyet adına sürekli yeniden icat etmeyi bırakmamızın zamanı geldi.

Preact ayrıca web platformunun birinci sınıf bir vatandaşıdır. Sanal DOM'u, DOM'un kendisine karşı ayrıştırır, gerçek olay işleyicilerini kaydeder ve diğer kütüphanelerle düzgün çalışır.

Küçük Boyutlu

Çoğu UI framework'ü, uygulamanın Javascript boyutunun çoğunluğunu oluşturacak kadar büyüktür. Preact ise farklı: sizin kodunuz uygulamanın çoğunluğunu oluşturacak kadar büyük kalır.

Bu, indirilecek, ayrıştırılacak ve çalıştırılacak daha az Javascript manasına geliyor - sizin kodunuza daha fazla zaman bırakıyor, böylece framework'ü kontrol altında tutmak için dövüşmeden bir deneyim inşa edebilirsiniz.

Büyük Performans

Preact hızlıdır, fakat sadece boyutu yüzünden değil. Basit ve öngörülebilir fark algoritması sayesinde en hızlı Sanal DOM kütüphanelerine sahipdir.

Özelleştirilebilir toplu güncelleme, isteğe bağlı asenkron render, DOM geri dönüşümü ve optimize edilmiş olay işleyicisi gibi ekstra performans özellikleri bile içeriyor.

Taşınabilir & Gömülebilir

Preact'in küçük boyutlu kod tabanı, güçlü bir Sanal DOM Bileşeni paradigmasını alıp erişilmez denizlere yelken açabileceğiniz manasına gelir.

Karmaşık entegrasyon adımları olmadan bir uygulamanın parçalarını geliştirmek için Preact kullanın. Preact'i bir widget'ın içine yerleştirin ve tam bir uygulama geliştirmek için kullandığınız araçları ve teknikleri uygulayın.

Anlık Üretkenlik

Hafiflik, üretkenlikten feda ederek oraya ulaşmak zorunda kalmadığınızda daha çok eğlencelidir. Preact sizi anlık üretken yapar. Hatta birkaç bonus özellik de var:

• `props`, `state` ve `context` zaten `render()`'a paslanmış durumda.
• `class` ve `for` gibi standart HTML attribute'larını kullanabilirsiniz.

Ekosistem Uyumluluğu

Sanal DOM Component'leri, butonlardan data sağlayıcılarına kadar yeniden kullanılabilir şeyleri paylaşmayı kolaylaştırır. Preact'ın tasarımı, halihazırda React'ın ekosisteminde bulunan yüzlerce Component'i sorunsuz bir şekilde kullanabileceğiniz manasına gelir.

Paketleyicinizde preact-compat'ı eklemek, bir uyumluluk katmanı sunarak karmaşık React bileşenlerini dahi uygulamanızda kullanmanıza izin veriyor.

Örneğe gözatın!

TodoList (yapılacaklar listesi) Component'i

// --repl
export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.currentTarget.value });
    };
    addTodo = () => {
        let { todos, text } = this.state;
        todos = todos.concat({ text });
        this.setState({ todos, text: '' });
    };
    render({ }, { todos, text }) {
        return (
            <form onSubmit={this.addTodo} action="javascript:">
                <label>
                  <span>Add Todo</span>
                  <input value={text} onInput={this.setText} />
                </label>
                <button type="submit">Add</button>
                <ul>
                    { todos.map( todo => (
                        <li>{todo.text}</li>
                    )) }
                </ul>
            </form>
        );
    }
}
// --repl-after
render(<TodoList />, document.getElementById("app"));
        

Çalışan Örnek

import TodoList from './todo-list';

render(<TodoList />, document.body);
        

Github Yıldız Sayısını Çekmek

// --repl
export default class Stars extends Component {
    async componentDidMount() {
        let stars = await githubStars(this.props.repo);
        this.setState({ stars });
    }
    render({ repo }, { stars=0 }) {
        let url = `https://github.com/${repo}`;
        return (
            <a href={url} class="stars">
                ⭐️ {stars} Yıldız
            </a>
        );
    }
}
// --repl-after
render(<Stars />, document.getElementById("app"));
        

Çalışan Örnek

import Stars from './stars';

render(
    <Stars repo="developit/preact" />,
    document.body
);
        

Kolları sıvamaya hazır mısın?

React ile ilgili deneyime sahip olup olmadığınıza dayalı olarak farklı kılavuzlarımız var.
Size uygun olan kılavuzu seçin!

Başlangıç Preact'e Geçiş