index.md

layout	title	show_title	toc	description
home	Preact	false	false	جایگزین 3kb برای React با همان API مدرن

Preact

جایگزین 3kb برای React با همان API مدرن

شروع عوض کرن به Preact

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>
    </>
  )
}

با افتخار حمایت شده توسط:

یک کتابخانه کاملا متفاوت

نزدیک تر به DOM

Preact نازک ترین انتزاع مجازی DOM ممکن را در بالای DOM ارائه می دهد. این برنامه بر روی ویژگی‌های پلتفرم پایدار ساخته می‌شود، کنترل‌کننده‌های event واقعی را ثبت می‌کند و به خوبی با کتابخانه‌های دیگر سازگار است.

Preact را می توان مستقیماً در مرورگر بدون هیچ مرحله کامپایل کردن استفاده کرد.

حجم کم

اکثر فریم ورک‌های رابط کاربری به اندازه‌ای حجیم هستند که شامل اکثریت اندازه جاوا اسکریپت یک برنامه می شوند. Preact متفاوت است: به اندازه ای کوچک است که کد شما بزرگترین بخش برنامه هست.

این یعنی جاوا اسکریپت کمتری برای دانلود، parse و execute - زمان بیشتری برای کد شما باقی می‌ماند، بنابراین می‌توانید تجربه‌ای بسازید که بدون دردسر فریم ورک را تحت کنترل داشته باشید.

عملکرد بیشتر

Preact سریع است و نه فقط به دلیل اندازه آن. این یکی از سریع‌ترین کتابخانه‌های DOM مجازی است که به لطف اجرای تفاوت ساده و قابل پیش‌بینی بودن..

ما به‌طور خودکار به‌روزرسانی‌های Preact را منتشر و در مورد عملکرد را تا حد زیادی تنظیم می‌کنیم. ما از نزدیک با مهندسان مرورگر کار می کنیم تا حداکثر عملکرد ممکن را از Preact بدست آوریم.

قابل حمل و نشاندن

ردپای کوچک Preact به این معنی است که می‌توانید پارادایم قدرتمند کامپوننت های DOM مجازی را به مکان‌های جدیدی ببرید که در غیر این صورت نمی‌توانست بروید.

از Preact برای ساخت بخش هایی از یک برنامه بدون یکپارچگی پیچیده استفاده کنید. Preact را در یک ویجت جاسازی کنید و از همان ابزارها و تکنیک هایی استفاده کنید که برای ساختن یک برنامه کامل استفاده می کنید.

پروداکتیو بیشتر

کم حجم بودن بسیار سرگرم کننده تر است وقتی که لازم نیست پروداکتیویتی را برای رسیدن به آن فدا کنید. Preact فوراً شما را ‍پروداکتیو می کند. حتی دارای چند ویژگی عالی هم است:

• props, state و context به ()render منتقل می شوند
• از تگ های استاندارد HTML استفاده کنید مانند: class و for

اکوسیستم سازگار

کامپوننت های DOM مجازی اشتراک گذاری چیزهای قابل استفاده مجدد را آسان می کند - همه چیز از دکمه ها گرفته تا ارائه دهندگان داده(providers). طراحی Preact به این معنی است که شما می توانید به طور یکپارچه از هزاران کامپوننت موجود در اکوسیستم React استفاده کنید.

افزودن یک alias ساده preact/compat به bundler یک لایه سازگاری را فراهم می‌کند که حتی اکثر کامپوننت های پیچیده React را برای استفاده در برنامه شما فعال می‌کند.

امتحان کنید و ببینید!

Todo List

export default class TodoList extends Component {
    state = { todos: [], text: '' };
    setText = e => {
        this.setState({ text: e.target.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>
        );
    }
}
        

نمونه زنده

import TodoList from './todo-list';
render(<TodoList />, document.body);

Fetch GitHub Stars

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} Stars
            </a>
        );
    }
}
        

نمونه زنده

import Stars from './stars';
render(
<Stars repo="preactjs/preact" />,
document.body
);

آماده اید که شروع کنید؟

ما برای افرادی که تجربه ای با React دارند یا نه راهنما های متفاوتی داریم.
راهنمایی که مناسب خودت هست رو انتخاب کن!

شروع عوض کردن به Preact