תחילת העבודה עם React.js

React.js הוא גמישה ומבוססת רכיבים ספריית בניית ממשקי משתמש אינטראקטיביים. זה היה נוצר ו-מקור פתוח על ידי פייסבוק והיא משמשת חברות טכנולוגיה מובילות רבות כגון Dropbox, AirBnB, PayPal ו- Netflix. React מאפשר למפתחים לעשות זאת ליצור נתונים כבד יישומים זה יכול להיות מעודכן ללא כאב על ידי מחדש עיבוד רק את המרכיבים הדרושים.

התגובה היא הצג שכבה מתוך MVC דפוס עיצוב תוכנה, וזה בעיקר מתמקדת מניפולציה DOM. כמו בימים אלה כולם מדברים על React, בהודעה זו אנו בוחנים איך אתה יכול להתחיל עם זה.

התקן את 'תגובה'

תוכל גם להתקין את React עם מנהל החבילה npm או על ידי הוספת הספריות הדרושות באופן ידני לדף ה- HTML שלך. מומלץ באמצעות React עם בבל זה מאפשר לך להשתמש בתחביר ECMAScript6 ו- JSX בקוד ה- React שלך.

אם אתה רוצה התקן את React באופן ידני, המסמכים הרשמיים ממליצים השתמש בקובץ HTML זה. ניתן להוריד את הדף על ידי לחיצה על קובץ> שמור דף בשם ... בתפריט הדפדפן. סקריפטים תצטרך (תגובה, React DOM, בבל) גם לקבל להוריד לתוך react-example_files / תיקייה. לאחר מכן, הוסף את תגי הסקריפט הבאים אל של מסמך ה- HTML שלך:

במקום להוריד אותם, תוכל להוסיף את הסקריפטים של React מ CDN גם כן.

אתה יכול גם להשתמש גרסאות מוקטנות של קבצי JavaScript לעיל:

אם אתה מעדיף להתקין מחדש עם npm, הדרך הטובה ביותר היא להשתמש צור אפליקציית תגובה Github ריפו שנוצרו על ידי פייסבוק חממה - זה גם הפתרון כי המלצות React ממליצים. מלבד ריאק, זה גם מכיל Webpack, Babel, Autoprefixer, ESLint וכלי פיתוח אחרים. כדי להתחיל, השתמש בפקודות CLI הבאות:

 npm להתקין -G ליצור תגובה- App- ליצור תגובה- app-my-app שלי CD-app npm להתחיל 

כאשר אתה מוכן, אתה יכול גש לאפליקציה החדשה של React על 12te כתובת אתר:

אם אתה רוצה לקרוא עוד על כיצד להתקין, לבדוק את הנחיה התקנה של המסמכים.

React ו- JSX

למרות שזה לא חובה, אתה יכול השתמש בתחביר JSX באפליקציות שלך ב- React. JSX מייצג XML, וזה transpiles לתוך JavaScript רגיל. היתרון הגדול של JSX הוא זה מאפשר לך לכלול HTML בקבצי JavaScript שלך, לכן הוא הופך את הגדרת רכיבי React לקלים יותר.

להלן הדברים החשובים ביותר לדעת על JSX:

1. תגים התחל באותיות קטנות (במקרה גמל נמוך) הם שניתנו כמו רכיבי HTML רגילים.
2. תגים התחל באותיות רישיות (במקרה גמל העליון) הם שניתנו כמו רכיבי React.
3. כל קוד כתוב בתוך הפלטה מסולסלים ... מתפרשים כמו JavaScript המילולי.

אם אתה רוצה לדעת יותר על כיצד להשתמש ב - JSX עם לבדוק את הדף הזה מן המסמכים, ועל ברירת המחדל של תיעוד JSX אתה יכול להסתכל על ויקי JSX.

צור רכיבי React

React יש ארכיטקטורה מבוססת רכיבים שבו מפתחים ליצור רכיבים הניתנים לשימוש חוזר על מנת לפתור בעיות שונות. רכיב React בנוי של כמה או רבים צור רכיבים כי הם היחידות הקטנות ביותר של אפליקציות React.

למטה, אתה יכול לראות דוגמה פשוטה של ​​אלמנט React המוסיפה כפתור 'לחץ עלי' לדף HTML. ב- HTML, אנו מוסיפים

מיכל עם "myDiv" ID זה יהיה מאוכלס עם אלמנט React. אנו יוצרים את הרכיב React שלנו בתוך a

אנו מעבירים את הרכיב React שלנו עם ReactDOM.render () שיטה איזה לוקח שני פרמטרים הנדרשים, ה אלמנט תגובה (לחץ עלי) מיכל שלה (document.getElementById ('myDiv')). תוכל לקרוא עוד על כיצד לעבוד רכיבים בתוך ה “עיבוד אלמנטים” חלק מהמסמכים.

צור רכיבים

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

אתה יכול להשתמש או תחביר פונקציונלי קלאסי או החדש ES6 תחביר בכיתה ל להגדיר רכיב React. במאמר זה, אני אשתמש האחרונה, כמו בבל מאפשר לנו להשתמש ECMAScript 6. אם אתה מעוניין כיצד ליצור רכיב ללא ES6, תסתכל על רכיבי והדפים Props של המסמכים.

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

כל רכיב React הוא מחלקה JavaScript מרחיב את React.Component מעמד בסיס. הרכיב שלנו ייקרא נתונים סטטיסטיים כפי שהוא מספק למשתמש עם נתון בסיסי. ראשית, אנחנו ליצור את נתונים סטטיסטיים מעמד עם ה סטטיסטיקת הכיתה מרחיב את React.Component ... תחביר, אז אנחנו להפוך אותו למסך על ידי קורא את ReactDOM.render () (השתמשנו כבר בחלק הקודם).

 סטטיסטיקת הכיתה מרחיב React.Component render () Return ( 
 שלום this.props.name, יש לך this.props.notifications התראות חדשות ו this.props.messages הודעות חדשות. 
 );  ReactDOM.render ( , document.getElementById ("myStats")); 

הטענה הראשונה של ReactDOM.render () השיטה מורכבת השם של רכיב React שלנו (), ו האביזרים שלה (שם, התראות, ו הודעות) עם הערכים שלהם. כאשר אנו מכריזים על הערכים של האביזרים, המיתרים צריכים להיות סגורה במרכאות (כמו "פלוני אלמוני") וערכים מספריים בתוך סוגריים מסולסלים (כמו 3).

שים לב שבגלל JavaScript, אנו בשימוש שם במקום מעמד כדי להעביר מאפיין class לתג HTML (className = "סיכום").

דף ה- HTML התואם הוא:

במסמכים של React, יש דוגמאות רבות אחרות כיצד לבנות ולנהל רכיבים React, ו מה עוד לדעת על אביזרים.

לקריאה נוספת

עם React, פייסבוק הציג סוג חדש של מסגרת לתוך הקדמי פיתוח זה אתגרים דפוס MV * העיצוב. אם אתה רוצה להבין טוב יותר איך זה עובד ומה אתה יכול ולא יכול להשיג עם זה, הנה כמה מאמרים מעניינים שיכולים לעזור:

• פוסט בבלוג של למה הם בנו את ריאק.
• אנדרו ריי של בלוג מבריק לכתוב על הטוב והרע של ריאק.
• קוד כיצד להשוות ו AngularJS להשוות.
• FreeCodeCamp של חתיכת לחשוב על אם MVC מת בחזית.
• המאמר של HackerNoon on כיצד לייעל את הביצועים הקשורים ריאק.