React

ספריית JavaScript לבניית ממשקי משתמש

הצהרתי

React הופכת את היצירה של ממשקי משתמש אינטראקטיביים לנוחה יותר. עצב תצוגה פשוטה לכל state באפליקציה שלך, ו-React תעדכן ותרנדר בצורה יעילה רק את הקומפוננטות הנכונות כאשר המתונים שלך משתנים.

תצוגה הצהרתית הופכת את הקוד שלך ליותר צפוי וקל לדיבוג

מבוסס קומפוננטות

בנה קומפונטות מוכמסות המנהלות את הstate .שלהן ולאחר מכן הרכב אותן יחד לבניית ממשקי משתמש מורכבים

כיוון שהלוגיקה של הקומפוננטות כתובה בג’אווהסקריפט במקום בטמפלטים, אתה יכול להעביר מידע עשיר דרך האפליקציה ולהשאיר את הstate מחוץ לDOM.

למד פעם אחת, כתוב בכל מקום

אנו לא עושים הנחות על שאר הטכנולוגיות הנמצאות בשימוש באפליקצייה שלך, כך שאתה יכול לפתח פיצ’רים חדשים ב-React מבלי לשכתב קוד קיים.

React יכולה גם להתרנדר בצד-שרת באמצעות Node ולתפעל אפליקציות מובייל באמצעות React Native.


קומפוננטה פשוטה

קומפוננטות ריאקטיות מממשות מתודת render() הלוקחת קלט מידע ומחזירה מה להציג. הדוגמא הזאת משתמשת בתחביר הדומה לXML ונקרא JSX. קלט מידע המועבר לקומפוננטה יהיה נגיש לrender() באמצעות this.props.

JSX הוא אופציונלי ולא חובה כדי להשתמש ב React. נסה את Babel REPL כדי לראות את הקוד ג’אווהסקריפט הגולמי שמיוצר על ידי שלב הקומפילציה של JSX.

טוען דוגמת קוד…

קומפוננטה עם state

בנוסף ללקיחת מידע קלט (הנגיש באמצעות this.props), קומפוננטה יכולה לשמור מידע על state פנימי (הנגיש באמצעות this.state). כאשר הstate של הקומפוננטה משתנה, הmarkup המעובד יעודכן על ידי קריאה מחדש ל render().

טוען דוגמת קוד…

אפליקציה

עם שימוש בpropsו-state, אנחנו יכולים ליצור אפליקצית צ’קליסט קטנה. הדוגמא הזאת משתמשת בstate כדי לעקוב אחרי רשימה של פריטים והטקסט שהמשתמש הכניס. למרות שהטיפול באירועים נראה מעובד באותה שורה. הם יאספו וימומשו באמצעות event delegation.

טוען דוגמת קוד…

קומפוננטה המשתמשת בתוספים חיצוניים

React מאפשרת לך להתממשק עם ספריות ופריימוורקים אחרים. הדוגמא הזאת משתמשת בremarkable, ספריה חיצונית של Markdown, הממירה את הערך של הtextarea בזמן אמת.

טוען דוגמת קוד…