React הופכת את היצירה של ממשקי משתמש אינטראקטיביים לנוחה יותר. עצב תצוגה פשוטה לכל state באפליקציה שלך, ו-React תעדכן ותרנדר בצורה יעילה רק את הקומפוננטות הנכונות כאשר הנתונים שלך משתנים.
תצוגה הצהרתית הופכת את הקוד שלך ליותר צפוי וקל לדיבוג
בנה קומפונטות מוכמסות המנהלות את הstate .שלהן ולאחר מכן הרכב אותן יחד לבניית ממשקי משתמש מורכבים
כיוון שהלוגיקה של הקומפוננטות כתובה ב-JavaScript במקום בטמפלטים, אתה יכול להעביר מידע עשיר דרך האפליקציה ולהשאיר את הstate מחוץ לDOM.
אנו לא עושים הנחות על שאר הטכנולוגיות הנמצאות בשימוש באפליקצייה שלך, כך שאתה יכול לפתח פיצ’רים חדשים ב-React מבלי לשכתב קוד קיים.
React יכולה גם להתרנדר בצד-שרת באמצעות Node ולתפעל אפליקציות מובייל באמצעות React Native.
קומפוננטות ריאקטיות מממשות מתודת render()
הלוקחת קלט מידע ומחזירה מה להציג. הדוגמא הזאת משתמשת בתחביר הדומה לXML ונקרא JSX. קלט מידע המועבר לקומפוננטה יהיה נגיש לrender()
באמצעות this.props
.
JSX הוא אופציונלי ולא חובה כדי להשתמש ב React. נסה את Babel REPL כדי לראות את הקוד JavaScript הגולמי שמיוצר על ידי שלב הקומפילציה של JSX.
בנוסף ללקיחת מידע קלט (הנגיש באמצעות this.props
), קומפוננטה יכולה לשמור מידע על state פנימי (הנגיש באמצעות this.state
). כאשר הstate של הקומפוננטה משתנה, הmarkup המעובד יעודכן על ידי קריאה מחדש ל render()
.
עם שימוש בprops
ו-state
, אנחנו יכולים ליצור אפליקצית צ’קליסט קטנה. הדוגמא הזאת משתמשת בstate
כדי לעקוב אחרי רשימה של פריטים והטקסט שהמשתמש הכניס. למרות שהטיפול באירועים נראה מעובד באותה שורה. הם יאספו וימומשו באמצעות event delegation.
React מאפשרת לך להתממשק עם ספריות ופריימוורקים אחרים. הדוגמא הזאת משתמשת בremarkable, ספריה חיצונית של Markdown, הממירה את הערך של הtextarea
בזמן אמת.