بديل سريع لمكتبة React بخصائص برمجية مطابقة تماماً و حجم ٣ كيلوبايت فقط
+ ++ ابدأ هنا + + التحويل إلى Preact +
+
+
+
+ + تزوّد Preact أسرع و أرق طبقة مجرّدة من Virtual DOM فوق DOM. +تقنيات الويب مستقرّة بما يكفي, و حان الوقت للتوقف عن أعادة بناء خصائص مستقرة في المتصفحات أساساً تحت مسمّى الأمان. +
+ ++ Preact هي صنف أوّل مشتق من منصّة الويب. تقارن الاختلاف بين Virtual DOM و الـ DOM التقليدي نفسه, تسجل جميع الـ events و تعمل بشكل جيد جداً في حال كنت تستخدم أية مكاتب أخرى +
+
+
+ + معظم المكاتب المستخدمة لبناء صفحات الويب حجمها كبير إلى حد يجعلها الجزء الأكبر من تطبيقك. +على عكس الآخرين, Preact صغيرة جداً حتى أنها الجزء الأصغر من تطبيقك و أكوادك الخاصة هي الجزء الكبير. +
+ ++ هذا كله يعني, وقت أقل لتحميل الجافاسكريبت الخاصة بتطبيق الويب خاصتك و وقت أقل أيضاً لتحويله و تشغيله - معطية حيزاً و وقت أكثر للأكواد البرمجية خاصتك, فعملياً بإمكانك بناء ما ترغب به من دون التفكير في كيفية محاربة الحجم الكبير للمكاتب المستخدمة. +
+
+
+ + Preact سريعة جداً, ليس فقط لأنها صغيرة الحجم. إنها واحدة من أسرع مكاتب الـ Virtual DOM, الشكر كله لخوارزمية إيجاد الفرق بين DOM و virtual DOM الدقيقة و البسيطة. +
+ ++ كما و أن هذه المكتبة تتضمن خصائص سرعة و أداء إضافية مثل تجميع التحديثات, توليد العناصر بشكل غير متزامن, إعادة تكرير DOM بالاضافة إلى تحسين أداء تحمّل الـ events أو الأحداث البرمجية عن طريق ربط حالة خصائص العنصر البرمجي الواحد و يسمى مفهوم [Linked State](/guide/linked-state). +
+
+
+ + Preact صغيرة جداً و هذا يخولك من أخذ مكونات الـ Virtual DOM التي صنعتها إلى أماكن و صفحات لن تستطيع بسهولة أخذها باستخدام مكاتب أخرى. +
+ ++ استخدم Preact لصناعة أجزاء من صفحات الويب و توصيل المكون أو الجزء خاصتك بالصفحة الأم خالي من الصعوبة والتعقيد. +اصنع قطعة من الواجهة و استخدم جميع المعدات و الإضافات التي كنت لتستخدم لو أنك بدأت صناعة موقع كامل باستخدام Preact. +
+
+
+ + صغر الحجم يعطي كثيراً من المرح عندما يخلو من التعقيد وبالتالي لن يؤثر على إنتاجيّتك. +Preact تضمن لك أن تكون منج بعملك فوراً, كما و توفر لك الخصائص التالية. +
+ +
+
+ + Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers. + Preact's design means you can seamlessly use thousands of Components available in the React ecosystem. +
+ ++ Adding a simple preact-compat alias to your bundler provides a compatibility layer + that enables even the most complex React components to be used in your application. +
+
+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:">
+ <input value={text} onInput={this.setText} />
+ <button type="submit">Add</button>
+ <ul>
+ { todos.map( todo => (
+ <li>{todo.text}</li>
+ )) }
+ </ul>
+ </form>
+ );
+ }
+}
+
+import TodoList from './todo-list';
+
+render(<TodoList />, document.body);
+
+export default class Stars extends Component {
+ async componentDidMount() {
+ let stars = await githubStars(this.props.repo);
+ this.setState({ stars });
+ }
+ render({ repo }, { stars=0 }) {
+ let url = \`//github.com/${repo}\`;
+ return (
+ <a href={url} class="stars">
+ ⭐️ {stars} Stars
+ </a>
+ );
+ }
+}
+
+import Stars from './stars';
+
+render(
+ <Stars repo="developit/preact" />,
+ document.body
+);
+
+ We've got separate guides based on whether you have experience with React.
+
+ Pick the guide that works best for you!
+
+ Get Started + + Switch to Preact +
+