React.JS עבור בובות מתחילות, באמצעות הספרייה בעת כתיבת רובוטים למסחר

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

ספריית JavaScript – תגובה: מה זה

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

הערה! ניתן לקנן חלקים רכיבים כאלה.

מצב הוא אוסף של כל הנתונים על הפרטים של ממשק, כולל העיבוד הייצוגי שלו. בעזרת דוגמאות נגלה ביתר פירוט וברור מהו מה. התמונה למטה מציגה כמה מהמרכיבים הגדולים – פרסום לרשת חברתית מקוונת, קטע עם מידע כללי והצגת תמונות. כל חלק כולל רכיבים קטנים יותר, שהם הרכיבים. לדוגמה, פרסום מכיל טקסט, תמונות, שם המשתמש המפרסם את המידע וכו’. קטע התמונות כולל תמונות בודדות, וקטע המידע הכללי מכיל מידע קצר.
לכל אחד מהרכיבים הללו (רכיבים) יש מצב. כלומר, הקטע עם המידע הכללי יראה אחרת במכשירים שונים, אלמנט ה”לייק” משנה צבע בלחיצה והמספר האחראי על סך הלייקים; הפרסום, בתורו, עשוי לקצר את הטקסט או לשדר אותו במלואו.

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

מדוע יש צורך בספריית React?

React.JS היא אחת האפשרויות האפשריות לכתוב קוד JS או HTML בפורמט נוח, ליצור עותקים שלו ולהפוך אותו לחזותי. הרכיבים כאן כתובים בשפת מערכת מיוחדת – JSX, הכוללת אלמנטים של שפת התכנות JavaScript ושפת הסימון הסטנדרטית של HTML.
הקוד שנכתב ב-JSX הוא די ספציפי. חשוב גם שדפדפן האינטרנט לא יצטרך להבין את שפת המערכת הזו – קוד React.JS מועבר ל-JS, שכל דפדפן קולט ללא בעיות. לשם כך, מה שנוצר בספרייה מועבר דרך מהדרים מיוחדים (אחד הפופולריים כיום הוא Babel js), אשר ממירים קודים בשפות תכנות פחות מוכרות לייצוגי JavaScript.
בהתחלה אולי נראה שמערכת השימוש היא מאוד לא הגיונית, אבל אחרי כמה זמן מתרגלים לזה ומבינים למה המנגנון מתוכנן כך. לספריית JavaScript יש מספר יתרונות חזקים:

• קל יותר לזהות את שפת התכנות של המערכת מאשר ה-JavaScript הידוע, וכתוצאה מכך, ייקח כמה פעמים פחות זמן לתמוך בקוד ולבטל שגיאות בו (מהירות כתיבת קודים ותוכניות חדשים תגדל בהתאם);
• בנויה כאן מערכת נוחה ופרקטית של רכיבים מרכיבים – חלקים חוזרים בקוד המשמשים בשלבי כתיבה שונים ובתוכניות שונות, ומשתנים גם בהתאם להקשר;
• כל רכיב מרכיב כפוף רק למצבו , לכן קל יותר לתקן ליקויים בקוד אם מתגלה לפתע טעות בעבודתו בפועל; רגעים לא נכונים צפים אל פני השטח: אלמנט שמתפקד כראוי ימשיך לעבוד ביציבות במצב זה, אלא אם כן, כמובן, נעשה שימוש במצב הלא נכון ביחס אליו.

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

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

קורס בסיסי של React JS מא’ עד ת’: https://youtu.be/GNrdg3PzpJQ

היכרות למתחילים: מושגי יסוד

שלום עולם!

בעת גישה לעמוד הראשון של הספרייה, המשתמש יראה כותרת ברוכים הבאים כדוגמה קטנה – “שלום עולם!”.

יסודות שפת מערכת JSX

JSX היא שפת תכנות מערכת, הרחבה של JavaScript הידוע. הוא כולל שילוב של שתי שפות – תכנות JA ושפת הסימון הסטנדרטית של HTML. מפתחים משתמשים בו כדי להתאים את הרעיון כדי להראות בדיוק איך ממשק המשתמש צריך להיראות. JSX יוצר את ה”חלקים” של הספרייה.

מה זה JSX?

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

יצירת ביטויים בשפת המערכת

JSX מאפשר לך להשתמש בכל ביטויי JavaScript כתובים היטב בתוך סוגרים מתולתלים בתהליך.

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

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

עיבוד פרטים

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

רכיבים ואביזרים

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

מגוון רכיבים: פונקציונלי ומעמדי

הכי קל להתייחס לרכיב ספרייה כפונקציה.
רכיבים יכולים להיות מיוצגים גם בפורמט ES6 class.

מעניין! ספריית React מגדירה את שני סוגי הרכיבים האלה כדומים.

אביזרים

אביזרים הם אובייקטים בלתי ניתנים לשינוי שהם לקריאה בלבד. לכן, רכיב לא צריך לכתוב שום דבר לאביזרים שלו, לא משנה לאיזה סוג הוא שייך.

מצב ומחזור חיים

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

1. אל תשנה את המצב ישירות, השתמש בשיטת setState. זכור שהאזור היחיד שבו אתה יכול לשנות את המצב ישירות הוא הבנאי.
2. ייתכן שעדכוני מצב לא יהיו סינכרוניים.
3. לזרימת המידע יש כיוון אחד. בבניית רכיבים, אף אחד מהם לא יודע אם המדינה מוקצה לרכיב אחר. אין זה משנה כיצד נוצר אלמנט פונקציונלי עצמאי זה או אחר – באמצעות כלי פונקציונלי או סיווג. זה נקרא זרימת נתונים “בהמשך”. מצב מוגדר תמיד עבור אלמנט כלשהו, ​​ואסוציאציות מבניות של מצב זה יכולות להשפיע רק על חלקים הממוקמים “למטה” בסדר ההיררכי.

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

ניתוח אירועים

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

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

עיבוד מותנה של אלמנטים

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

שינוי רכיבים

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

רשימות ומפתחות

סעיף זה כולל מספר מרכיבים:

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

מפתחות

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

טפסים

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

פריטים מנוהלים

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

עליית המדינה

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

מדוע כל כך הכרחי לשלוט על עליית המדינה?

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

הרכב מול ירושה

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

תִזכּוֹרֶת! חלקים רכיבים יכולים לקחת אביזרים לא קשורים, כולל חלקים יסודיים המרכיבים ספריות או פונקציות.

במקרה שאתה צריך להשתמש בפונקציה נטולת מראה לעבודה עם רכיבים בפעם השנייה או השלישית, משוך אותה למודול JS נפרד. העבר אותו לרכיב והשתמש בפונקציה שנוצרה ללא הרחבה נוספת. React או Vue או Angular, מה לבחור: https://youtu.be/Nm8GpLCAgwk

עקרונות React.js

כל הפילוסופיה של ספריית JavaScript מוסתרת במדריך React. נראה שזה ארוך ולא בעל חשיבות כל כך גדולה, עם זאת, משתמשים רבים טוענים שלאחר הקריאה הכל נפל על מקומו. התיעוד ישן למדי, אך עדיין בעל ערך רב ורלוונטיות –
https://ru.reactjs.org/docs/thinking-in-react.html . הדרכה של React js https://ru.reactjs.org/tutorial/tutorial.html

פונקציונליות של ספריית React.js

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

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

שימוש מעשי

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

יישום מעשי של React בעת כתיבת רובוטים למסחר ב-JavaScript

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

GitHub ו-React.js

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

התייחסות! רק למשתמשים שקיבלו את הקישור המתאים עם הרשאה יש גישה לעריכה ולהורדה של קבצים.

תיעוד

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

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

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