צעדים ראשונים ב-React למתכנתי jQuery

מתכנתים שעוברים מ-jQuery ל-React נתקלים בקשיי הסתגלות משמעותיים. האם React שווה את המאמץ ואת שינוי התפיסה?

מקור: Pixabay, עיבוד תמונה

מאת ינון פרק

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

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

המחשבה מאחורי ריאקט

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

הדבר איפשר למתכנתים ומעצבים לחלק ביניהם את העבודה בצורה יחסית פשוטה דרך תיאום ממשק שמורכב משמות הקלאסים של האלמנטים. במילים אחרות מעצב היה כותב את ה-HTML ו-CSS של דף אינטרנט מסוים ומסכם עם המתכנתת שלרכיב מסוים שיהיה אפשר ללחוץ עליו יהיה קלאס בשם clickable-apple. המתכנתת היתה מוסיפה קוד שמטפל באירוע הלחיצה, וכך כל אחד מהם יכול לעבוד בנפרד: אם דרוש שינוי בעיצוב למעצב יש חופש פעולה מלא, כל עוד הוא שומר על שם הקלאס. אם דרוש שינוי קוד המתכנתת יכולה לתקן, להוסיף או להוריד פונקציות ככל שתרצה שוב כל עוד שם הקלאס לא משתנה. שמות הקלאסים היו נקודת החיבור בין המעצבים למתכנתים או בין ה-HTML/CSS ל-JavaScript.

הנה דוגמא פשוטה הכוללת שלושה קבצים משלושת הטכנולוגיות. הקטע הראשון מקובץ ה-HTML:

<p>
    <input type='text ' placeholder='some text...' class='counted-text' />
    You typed <span class='text-length'>0</span> characters
</p>

לאחר מכן קטע מתאים מקובץ ה CSS:

.text-length, .counted-text { 
  font-size: 24px;
}

ולסיום הקטע המתאים מקובץ ה-JavaScript:

$('.counted-text').on('input', function(e) {
    $('.text-length').text(e.target.value.length);
});

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

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

השינוי הראשון יהיה להוסיף את הכפתור ב-HTML ולכן נקבל:

<p>
    <input type='text ' placeholder='some text...' class='counted-text' />
    You typed <span class='text-length'>0</span> characters
  <button class='btn-reset'>Reset</button>
</p>

השינוי השני הוא בקוד ה-JavaScript שם נרצה לטפל בלחיצות על הכפתור ולכן נוסיף את הבלוק הבא:

$('.btn-reset').on('click', function(e) {
  $(this).closest('p').find('.counted-text').val('');
});

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

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

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

הפקד הראשון שלי בלי JSX

ב-React ה-HTML וה-JavaScript כתובים יחד במבנה שנקרא Component אבל אנחנו כאן בעברית נקרא לו פקד. הפקד הוא יחידה סגורה בעלת אחידות פנימית ושהתוכן שלו נגזר משתי קבוצות משתנים שנקראות State ו-Props. ההבדל המרכזי בין כתיבת פקד ריאקט לבין כתיבת קוד jQuery כמו שהיה לנו בדוגמא הקודמת הוא שפקד React עומד בדרך בין הקוד שלנו לבין ה-DOM, ולא מאפשר לנו לשנות ישירות שום דבר שמופיע על העמוד*.

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

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

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

בחזרה לקוד ובואו נגיד שלום לפקד הראשון שלנו. תחילה קוד ה-HTML הפעם אני מדביק אותו במלואו:

<html>
    <head></head>
    <body>
        <main></main>
    </body>

    <script src='https://cdnjs.cloudflare.com/ajax/libs/react/16.4.2/umd/react.development.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.4.2/umd/react-dom.development.js'></script>
</html>

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

עכשיו לחלק המעניין הוא קוד ה-JavaScript:

class CountedText extends React.Component {
  render() {
    return React.createElement('p',
                               {},
                               'Hello World'
                              )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

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

היא עושה את זה באמצעות שימוש בפונקציה React.createElement. אפשר לחשוב על פונקציה זו כמו על ה-new של הפקד: היא מקבלת מחלקה או שם של פקד בפרמטר הראשון, לאחר מכן אוביקט פרמטרים (שנקרא props) ובסוף את הילדים של אותו הפקד. פקד ריאקט מייצג משהו שמופיע ב-DOM ולכן בדוגמא הקטנה שלנו תוכן העמוד יהיה אלמנט p יחיד ובתוכו הטקסט Hello World.

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

class CountedText extends React.Component {
  render() {
    return React.createElement(
      'p',
      {},
      [
        React.createElement(
          'input',
          {
            type: 'text',
            placeholder: 'some text...',
            className: 'counted-text',
          },
          null
        ),
        'You typed ',
        React.createElement(
          'span',
          {
            className: 'text-length',
          },
          '0'
        ),
        ' characters',
        React.createElement(
          'button',
          {
            className: 'btn-reset',
          },
          'reset'
        ),
      ]
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

דרוש קצת מאמץ כדי לקרוא את מה שכתוב שם ולדמיין איך יראה ה-HTML. לכן כמעט כל מי שכותב React משתמש בכלי המרה אוטומטי שנקרא Babel ובשפה ייעודית שנקראת JSX.

הפקד הראשון שלי עם JSX

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

קוד JSX הוא קוד JavaScript המאפשר להטמיע בתוכו קוד שנראה כמו HTML. תוכנה מיוחדת בשם Babel יודעת לקחת קוד JSX כזה ובאופן אוטומטי להפוך אותו לקוד JavaScript רגיל לגמרי.

הנה לדוגמא הקוד הקודם שכתבנו בגירסת ה JSX שלו:

class CountedText extends React.Component {
  render() {
    return (
      <p>
        <input type='text' placeholder='some text...' className='counted-text' />
        You typed <span className='text-length'>0</span> characters
        <button className='btn-reset'>Reset</button>
      </p>
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

הקוד הזה הרבה יותר דומה למה שהיינו כותבים ב-HTML, אבל לדפדפן שתי הגירסאות יראו בדיוק אותו הדבר. המפתח הוא שלפני שאנחנו שולחים את קובץ ה JS שלנו לדפדפן אנחנו מפעילים את התוכנית Babel שהופכת את ה JSX לכתיב המחלקות הרגיל של-JavaScript.

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

כדי להשתמש בפרויקט עליכם לכתוב קוד JSX בתוך הקובץ index.js, להתקין node.js אם עדיין לא התקנתם, להפעיל פעם אחת מתוך תיקיית הפרויקט את הפקודה:

$ npm install

ולאחר מכן להפעיל מתוך תיקיית הפרויקט את הפקודה:

$ npm start

עכשיו Babel יקשיב לכל שינוי שתעשו בקובץ index.js ובאופן אוטומטי יהפוך אותו לכתיב מחלקות רגיל. אפשר ללחוץ Ctrl+C בתוך ה cmd כדי לסגור את ההמרה האוטומטית כשאתם מסיימים ואז כשרוצים לחזור לעבוד מקלידים שוב npm start.

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

טיפול באירועים

עד עכשיו אני לא רואה הרבה סיבות להתרגש מריאקט. בסך הכל כתבנו HTML בצורה מסורבלת יותר. האמת שריאקט מתחיל להיות מוצלח כשמגיעים למנגנונים של טיפול באירועים ולכתיבת קוד ה-JavaScript שיפתור לנו את הבעיות שפגשנו בגירסת ה jQuery.

סיפרתי כבר שפקד React יכול להשתמש ב-2 קבוצות של משתנים בתוך הפונקציה render שלו כדי לקבוע איך ה-DOM המתאים לו יראה. הקבוצה הראשונה נקראת props ועליה נצטרך לדבר ביום אחר. הקבוצה השניה נקראת state והיא זו שתעזור לנו לייצג את השינוי בפקד לאורך זמן ובדרך כלל תהיה קשורה לטיפול באירועים.

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

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

class CountedText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'hello world' };
  }

  render() {
    return (
      <p>
        <input type='text' placeholder='some text...' className='counted-text' />
        You typed <span className='text-length'>0</span> characters
        <button className='btn-reset'>Reset</button>
      </p>
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

נרצה להשתמש במשתנה זה בתוך ה-JSX של הפקד כך שבמקום להציג ערך ריק בתיבת הטקסט יוצג תוכן המשתנה ובמקום להציג את המספר 0 בתור אורך הטקסט יוצג האורך האמיתי. ב-JSX סימן סוגריים מסולסלים מאפשר לשתול קוד JavaScript רגיל בתוך ה-JSX ולכן הקוד הבא מבצע בדיוק את מה שתיארתי:

class CountedText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'hello world' };
  }

  render() {
    return (
      <p>
        <input
          type='text'
          placeholder='some text...'
          className='counted-text'
          value={this.state.text}
          />

        You typed <span className='text-length'>{this.state.text.length}</span> characters
        <button className='btn-reset'>Reset</button>
      </p>
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

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

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

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

class CountedText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'hello world' };
    this.setText = this.setText.bind(this);
  }

  setText(e) {
    this.setState({ text: e.target.value });
  }

  render() {
    return (
      <p>
        <input
          type='text'
          placeholder='some text...'
          className='counted-text'
          value={this.state.text}
          onChange={this.setText}
          />

        You typed <span className='text-length'>{this.state.text.length}</span> characters
        <button className='btn-reset'>Reset</button>
      </p>
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

הקוד כולל שלושה שינויים:

  1. הגדרתי פונקציה חדשה במחלקה שנקרא setText ושתופעל בתור Event Handler בתגובה לאירוע שינוי טקסט בתיבה.
  2. הוספתי קריאה ל bind בבנאי של המחלקה כך שהפונקציה תכיר את ה this הנכון בעת הפעלתה.
    הוספתי מאפיין onChange לתיבת הטקסט כך שריאקט ידע להפעיל את הפונקציה שלי בכל פעם שמשתמש מנסה לשנות את הטקסט.
  3. התוצאה אומנם נראית שגרתית אבל היא ההיפך הגמור: בכל פעם שמשתמש לוחץ על כפתור בתיבה הטקסט החדש לא נכתב מיד. תחילה מופעלת הפונקציה setText של הפקד, פונקציה זו מעדכנת את המשתנה הפנימי this.state.text לטקסט החדש ורק אחרי עדכון המשתנה הפנימי דרך פונקציה מיוחדת של ריאקט שנקראת setState, רק אז ריאקט יקרא באופן אוטומטי לפונקציה render, ייקח את התוצאה שלה וישתמש בזה כדי לעדכן את מה שמופיע על המסך.

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

נוסיף את ההתנהגות לכפתור Reset כדי לראות את זה. גם כאן התוספת היא ב-3 מקומות: יש ליצור פונקציה חדשה שמאפסת את הטקסט, יש לוודא שהפונקציה החדשה נקראת עם ה this הנכון באמצעות קריאה ל bind בבנאי ובסיום יש להגדיר פעולת onClick לכפתור שתקרא לפונקציה החדשה. הנה הקוד המעודכן:

class CountedText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { text: 'hello world' };
    this.setText = this.setText.bind(this);
    this.reset = this.reset.bind(this);
  }

  setText(e) {
    this.setState({ text: e.target.value });
  }

  reset(e) {
    this.setState({ text: '' });
  }

  render() {
    return (
      <p>
        <input
          type='text'
          placeholder='some text...'
          className='counted-text'
          value={this.state.text}
          onChange={this.setText}
          />

        You typed <span className='text-length'>{this.state.text.length}</span> characters
        <button className='btn-reset' onClick={this.reset}>Reset</button>
      </p>
    )
  }
}

ReactDOM.render(React.createElement(CountedText), document.querySelector('main'));

בניגוד לקוד ה jQuery הפעם לא היינו צריכים כל טיפול מיוחד במנגנון ספירת התווים. באופן אוטומטי המנגנון המשיך לעבוד כמו שצריך והתעדכן ל-0 בעקבות לחיצה על כפתור Reset. מוזמנים לראות את הקוד בפעולה בקודפן הבא:

<p data-height="300" data-theme-id="20374" data-slug-hash="QVVmOK" data-default-tab="js,result" data-user="ynonp" data-pen-title="QVVmOK" class="codepen">See the Pen <a href="https://codepen.io/ynonp/pen/QVVmOK/">QVVmOK</a> by Ynon Perek (<a href="https://codepen.io/ynonp">@ynonp</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

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

לאן עכשיו

המעבר מקוד המבוסס על אירועים (משתמש עשה X בתגובה תעשה Y) לקוד דקלרטיבי (מה שמוצג על המסך נראה כך…) דורש שינוי חשיבה מאוד משמעותי אצל מתכנתים והוא הקושי האמיתי של המעבר לריאקט. רק תחשבו איך להציג או להסתיר דיאלוג מודאלי? או איך כפתור בפקד אחד יכול להשפיע על משהו שמוצג בפקד אחר? מצד שני שינוי שיטת החשיבה הזה מאפשר לנו הרבה יותר בקלות להבין מה קוד עושה ואת כל המצבים שרכיב מסוים יכול להופיע בהם רק מלהסתכל על פונקציה אחת – הפונקציה render.

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

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

הכותב הוא מתכנת ומרצה בתחום פיתוח Full Stack

פורסם במקור ב-toCode

כתב אורח

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

הגב

10 תגובות על "צעדים ראשונים ב-React למתכנתי jQuery"

avatar
Photo and Image Files
 
 
 
Audio and Video Files
 
 
 
Other File Types
 
 
 

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

סידור לפי:   חדש | ישן | הכי מדורגים
בוריס
Guest

כתוב מעולה ,מעניין !

המגיב החד פעמי
Guest
המגיב החד פעמי

תודה

אורח
Guest

כן ירבו כתבות כאלה

דור הY
Guest

React שווה את המעבר חד משמעית.

avi12
Guest

בקטע jQuery הראשון יש Syntax error

ינון
Guest

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

$('.counted-text').on('input', function(e) {
$('.text-length').text(e.target.value.length);
});

יצחק כהן
Guest

ב”ה

כתבה מעולה.
בתור אחד שעובד עם react with ts לדעתי היה אפשר להרחיב על השילוב בין ריאקט ל type Script, שזה נותן כלי עבודה ומערכת “strong types” נפלאה ומשפר את קצב הכתיבה בצורה מורגשת

Tomer
Guest

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

יצחק כהן
Guest

ב”ה

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

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

במילים פשוטות אחרי שאתה שולט ברמה טובה בריאקט כבר אין צורך לעיין ב doc בכלל

לעומתו באנגולר לכל דבר יש דרך וצריך ללמוד אותה, ובד”כ מורכבת יותר מריאקט

לדעתי עדיף ריאקט ועוד לפני הייתרונות של ריאקט נייטיב

משתמש אובונטו
Guest
מה שמציק לי בריאקט זה שבשביל פעולות פשוטות צריך המון קוד מיותר. הדבר שאני הכי אוהב באנגולר זה הbinding הפשוט והישן שאומר שאלמנט מסוים נקשר למשתנה מסויים בJS. בריאקט בגלל הקונספט של הimmutable אני לא יכול שיהיה לי שדה טקסט שכתיבה בתוכו תקלט במשתנה. וכשיש לי מאות מסכים עם מאות שדות ולא סתם איזה אתר מסכן אני צריך האזנות ופונקציות ובלאגנים שלמים. הדבר השני זה הרעיון הפשוט שקומפוננטה אחת משנה אחת אחרת. משום מה בריאקט אני צריך להכניס FW סופר מסובכים כמו redux וכל זה רק כדי שלחיצה על כפתור במקום אחד תשנה טקסט במקום אחר. זה נורא יפה שכל… Read more »
wpDiscuz

תגיות לכתבה: