במאמר הקודם למדנו על קומפוננטות ריאקט מעט יותר מורכבות – עם פרמטרים ואפילו קומפוננטה בתוך קומפוננטה. במאמר הזה אנו נלמד על איך מעצבים קומפוננטה. ישנן כמה דרכים ואלמד שתיים מהן כאן. הדרך הראשונה היא די מטופשת – פשוט להקיף את ה-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} } 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>
והתוצאה תהיה די מגניבה – אותו משפט בשלושה צבעים שונים:
לא מאמינים לי? נסו בעצמכם! בכוונה לא סיפקתי דוגמה חיה. העתיקו את מה שיש לעיל והדביקו את זה ב-codepen שלכם או בעורך הטקסט שלכם (ב-codepen לא צריך מן הסתם את ה-src ואת ה-head). אי אפשר ללמוד רק מקריאה וחייבים ללכלך את הידיים.
במאמר הבא נדון בסטייטים.
⚠️אם אהבת את המדריכים על ריאקט – יש ספר מקיף ושלם על ריאקט שכתבתי בשם ללמוד ריאקט בעברית, במסגרת פרויקט עם חברות מובילות ומפתחים אחרים. בספר יש פירוט מקיף יותר על ריאקט ותרגילים רבים ללימוד עצמי.
3 תגובות
CSS in JS זה אנטי פאטרן
אני מסכים, ועדיין לא מעט משתמשים בזה וזה מופיע בדוקומנטציה הרשמית של ריאקט. במה אני משתמש? ב-import רגיל דרך webpack או ב CSS modules ואסביר עליהן בהמשך.
ת'אמת שאני גיליתי בחודשים האחרונים את הstyled components וזה עובד פשוט מדהים! כל אלמנט מקבל שם משמעותי וממש ממש קל לעצב את הקומפוננטות.