ריאקט – עיצוב קומפוננטה

למאמר הקודם בסדרה על ריאקט
למאמר הבא בסדרה על ריאקט

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

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>My first react app and component</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
  <style>
      .hello {
          color: red;
      }
  </style>
</head>
 
<body>
    <div id="content"></div>
    <script type="text/babel">
        class Hello extends React.Component {
            render() {
                return <p class=&apos;hello&apos;>Hello {this.props.target}!!</p>
            }
        }
        const target = document.getElementById(&apos;content&apos;);
        ReactDOM.render(
        <Hello target=&apos;world&apos;/>,
        target
        );
    </script>
</body>
</html>

טוב, זה קצת מביש אבל אפקטיבי אם אתם עובדים באמת על אפליקצית hello world. בפועל אם תנקטו בגישה הזו יהיה לכם קובץ CSS מנופח מאוד שיכיל את כל הקומפוננטות. לא לעניין. בדרך כלל שוברים את זה באמצעות שימוש ב webpack ועושים import לקובץ המתאים. אבל אני לא נכנס לזה עכשיו. יש דרך נוספת שכדאי להכיר והיא להשתמש בג׳אווהסקריפט ובקצת קסם ריאקטי על מנת לגרום לעיצוב הזה לעבוד.

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


    const helloStyle = {
      color: '#red',
      fontSize: '40px'
    };

למי שלא זוכר ג׳אווהסקריפט ונילה – מדובר בסינטקס ותיק למדי שבאמצעותו קובעים CSS בג׳אווהסקריפט. איך זה עובד? אם למשל יש לי תכונת css עם שם אחד כמו color, היא נותרת ללא שינוי. אם יש לי תכונת css עם יותר משם אחד, היא עוברת מטאמורפוזה באמצעות אותיות גדולות. למשל font-size תהפוך ל fontSize. זה די פשוט ברגע שמתרגלים אבל בכל מקרה יש לנו יופי של טבלת תרגום ב-MDN. אחרי שיצרנו את האובייקט הזה, פשוט מעבירים אותו בקוד באמצעות style. הנה הדוגמה המיוחלת:

class Hello extends React.Component {
  render() {
    const helloStyle = {
      color: 'red',
      fontSize: '40px'
    };
    return <div style={helloStyle}>{this.props.children} {this.props.greetTarget}!</div>
  }
}

const target = document.getElementById('content');
ReactDOM.render(
  <hello greetTarget="World and Mars"><strong>Hello</strong></hello>,
  target
);

משפט המפתח פה הוא

style={helloStyle}

שימו לב: בלי מרכאות. ריאקט כבר יודע לקחת את האובייקט הזה ולהמיר אותו ל-css אינלייני משובח. נסו בעצמכם!

See the Pen React first component with styling by Ran Bar-Zik (@barzik) on CodePen.

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

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>My first react app and component</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>

<body>
<div id="content"></div>
<script type="text/babel">
    class Hello extends React.Component {
        render() {
            const helloStyle = {
            color: this.props.greetColor,
            fontSize: &apos;40px&apos;
            };
            return <div style={helloStyle}>Hello {this.props.greetTarget}!</div>
        }
    }

    const target = document.getElementById(&apos;content&apos;);
    ReactDOM.render(
    <div>
        <Hello greetColor="green" greetTarget="World and Mars" />
        <Hello greetColor="purple" greetTarget="World and Mars" />
        <Hello greetColor="gold" greetTarget="World and Mars" />
    </div>,
    target
    );
</script>
</body>

</html>

והתוצאה תהיה די מגניבה – אותו משפט בשלושה צבעים שונים:

Hello World and Mars! בשלושה צבעים שונים: סגול, ירוק וזהב

Hello World and Mars! בשלושה צבעים שונים: סגול, ירוק וזהב

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

אהבתם? לא אהבתם? דרגו!

לא אהבתי בכלללא אהבתיבסדראהבתיאהבתי מאוד (2 הצבעות, ממוצע: 4.50 מתוך 5)

תגיות: פורסם בקטגוריה: ריאקט

יאללה, שתפו :)

אל תשארו מאחור! יש עוד מה ללמוד!

3 comments on “ריאקט – עיצוב קומפוננטה
  1. אבי לבקוביץ הגיב:

    CSS in JS זה אנטי פאטרן

    • רן בר-זיק הגיב:

      אני מסכים, ועדיין לא מעט משתמשים בזה וזה מופיע בדוקומנטציה הרשמית של ריאקט. במה אני משתמש? ב-import רגיל דרך webpack או ב CSS modules ואסביר עליהן בהמשך.

  2. גידי הגיב:

    ת’אמת שאני גיליתי בחודשים האחרונים את הstyled components וזה עובד פשוט מדהים! כל אלמנט מקבל שם משמעותי וממש ממש קל לעצב את הקומפוננטות.

כתיבת תגובה

האימייל לא יוצג באתר.

רישום