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

כך מעצבים קומפוננטה בריאקט - דרך ה-API של הקומפוננטה

במאמר הקודם למדנו על קומפוננטות ריאקט מעט יותר מורכבות – עם פרמטרים ואפילו קומפוננטה בתוך קומפוננטה. במאמר הזה אנו נלמד על איך מעצבים קומפוננטה. ישנן כמה דרכים ואלמד שתיים מהן כאן. הדרך הראשונה היא די מטופשת – פשוט להקיף את ה-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/[email protected]/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='hello'>Hello {this.props.target}!!</p>
            }
        }
        const target = document.getElementById('content');
        ReactDOM.render(
        <Hello target='world'/>,
        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
{this.props.children} {this.props.greetTarget}!

} } const target = document.getElementById('content'); ReactDOM.render( 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/[email protected]/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: '40px'
            };
            return <div style={helloStyle}>Hello {this.props.greetTarget}!</div>
        }
    }

    const target = document.getElementById('content');
    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). אי אפשר ללמוד רק מקריאה וחייבים ללכלך את הידיים.

במאמר הבא נדון בסטייטים.

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

פוסטים נוספים שכדאי לקרוא

פתרונות ומאמרים על פיתוח אינטרנט

המנעו מהעלאת source control לשרת פומבי

לא תאמינו כמה אתרים מעלים את ה-source control שלהם לשרת. ככה תמצאו אותם וגם הסבר למה זה רעיון רע.

גלילה לראש העמוד