
# מה זה פיתוח פולסטאק?

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

## למה אנחנו צריכים פיתוח פולסטאק?

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

## מה עושה מפתח פולסטאק?

מפתח פולסטאק עובד על שני החלקים החשובים ביותר של אתר אינטרנט:

1. **הצד של המשתמש (Frontend)**: זה מה שאנחנו רואים על המסך. כל מה שקשור לעיצוב, כפתורים, טקסטים, תמונות, ווידאו, וההנאה שלנו בשימוש באתר – כל זה נמצא בצד הזה.
2. **החלק מאחורי הקלעים (Backend)**: כאן נמצא כל מה שקשור לנתונים, שליחת מידע, אחסון הנתונים, ושמירה על כל הדברים שמאפשרים לאתר לפעול בצורה חלקה.

## דוגמה פשוטה

נניח שאנחנו רוצים לשלוח הודעה דרך אתר אינטרנט:

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

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

## למה זה חשוב לדעת על פיתוח פולסטאק?

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

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


מה זה פיתוח פולסטאק?


# מה זה HTML?

**HTML** (Hypertext Markup Language) היא השפה הבסיסית ביותר לפיתוח אתרים. מדובר בשפת סימון המגדירה את מבנה הדפים באינטרנט. HTML היא הבסיס של כל אתר אינטרנט, ומאפשרת לנו להציג תוכן בצורה מסודרת וברורה.

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

## למה אנחנו צריכים HTML?

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

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

## תגית - HTML

HTML הוא השלד של האתר – הוא מגדיר את המבנה של הדף. כל מה שאתם רואים באתר, כמו טקסט, תמונות וכפתורים, נמצא בתוך HTML.

## תגית - body

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

## תגית - head

ה-<head> הוא החלק של המסמך שמכיל מידע שלא תמיד רואים אותו ישירות בדף. זה כמו חלק אחורי של האתר, שבו נשמרות הגדרות כמו שם האתר, גופנים, קישורים לדפים אחרים ועוד.

## תגית - title

ה-<title> נמצא בתוך ה-<head> והוא מגדיר את שם הדף שמופיע בכרטיסיית הדפדפן (ליד שם האתר).

```html
<html>
  <head>
    <title>ברוכים הבאים לאתר שלי</title>
  </head>
  <body>
    <h1>כותרת ראשית</h1>
    <p>זה טקסט לדוגמה</p>
  </body>
</html>
```

```html
<html>
  הוא כל האתר
</html>
```

```html
<body>
  מכיל את כל התוכן שנראה בעיני המשתמשים
</body>
```

```html
<head>
  מכיל מידע טכני על הדף, לא מוצג ישירות למשתמש
</head>
```

```html
<title> מגדיר את שם הדף בכרטיסיית הדפדפן
```

## תגיות - HTML

ב-HTML, כל דף אינטרנט בנוי מתוך תגיות. כל תגית מתחילה עם <> ומסתיימת עם </>. התגיות משמשות כדי להגדיר חלקים שונים בדף — למשל, טקסט, תמונות, כותרות, קישורים ועוד.

דוגמה:

```html
<p>שלום, זה טקסט בתוך תגית <strong>פסקה</strong>.</p>
```

במקרה הזה, אנחנו השתמשנו בתגית <p> כדי ליצור פסקה, ובתוך הפסקה שמנו טקסט וגם את התגית <strong> כדי להדגיש את המילה "פסקה".

## תגיות נפוצות ב - HTML

כותרות (Headings)
כל דף HTML יכול להכיל כותרות ברמות שונות. יש 6 רמות של כותרות, מהכותרת הגדולה ביותר (<h1>) ועד הקטנה ביותר (<h6>). למשל:

```html
<h1>כותרת ראשית</h1>
<h2>כותרת משנית</h2>
<h3>כותרת ברמה שלישית</h3>
```

פסקאות (Paragraphs)
פסקה יוצרת בלוק טקסט. היא מבוצעת באמצעות התגית <p>:

```html
<p>זאת פסקה. טקסט יכול להימצא בתוכה.</p>
```

קישורים (Links)
קישורים עוזרים לנו לקשר בין דפים שונים באינטרנט. הם נעשים עם התגית <a>:

```html
<a href="https://www.google.com">לחץ כאן כדי להגיע לגוגל</a>
```

כאן, הקישור יביא את המשתמש לדף של גוגל.

אם אנחנו רוצים להוסיף תמונה לדף, אנחנו משתמשים בתגית <img>:

```html
<img src="image.jpg" alt="תיאור התמונה" />
```

רשימות (Lists)

HTML מאפשר לנו ליצור רשימות, גם רשימות עם נקודות וגם רשימות ממוספרות.

רשימה לא מסודרת (unordered-list) – כשאנחנו רוצים להציג סדר לא חשוב של פריטים, כמו רשימת תכנים או דברים שעליהם מדברים באופן כללי לדוגמה:

רשימה מנוקדת:

```html
<ul>
  <li>פריט ראשון</li>
  <li>פריט שני</li>
</ul>
```

רשימה מסודרת (ordered-list) – כשאנחנו רוצים להציג סדר מסוים של פריטים, כמו שלבים בתהליך או מדריך של צעד אחר צעד לדוגמה:

רשימה ממוספרת:

```html
<ol>
  <li>שלב ראשון</li>
  <li>שלב שני</li>
</ol>
```

## למה זה חשוב לדעת על תגיות?

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

### דוגמה לאתר HTML בסיסי

בואו נשלב עכשיו הכל ביחד:

```html
<html lang="he">
  <head>
    <title>ברוכים הבאים לאתר שלי</title>
  </head>
  <body>
    <h1>בואו נשלב עכשיו הכל ביחד!</h1>

    <h2>ברוכה הבאה לאתר של נעמי שדה - מעצבת שיער</h2>

    <h2>אודות</h2>
    <p>
      <strong>שנים 10</strong> --- נעמי שדה היא מעצבת שיער עם ניסיון של מעל
      .מציעה שירותים שונים בתחום עיצוב השיער לכל סוגי האירועים
    </p>

    <h3>השירותים שלנו:</h3>
    <ul>
      <li>תסרוקות חתונה</li>
      <li>תסרוקות ערב</li>
      <li>עיצוב שיער למכללות</li>
      <li>החלקת שיער</li>
    </ul>

    <h2>גלריה</h2>
    <p>תוכלו למצוא תמונות מהעבודות האחרונות שלי כאן:</p>
    <img src="image1.jpg" alt="תסרוקת חתונה" />
    <img src="image2.jpg" alt="תסרוקת ערב" />

    <h2>צור קשר</h2>
    <p>ליצירת קשר עם נעמי שדה, לחצו על הקישור הבא:</p>
    <a href="naomihair-style@gmail.com">שלחו מייל עכשיו</a>
  </body>
</html>
```


שליטה ב-HTML הבסיס לפיתוח אתרים


# מה זה CSS?

**CSS** (Cascading Style Sheets) היא שפת עיצוב אתרי אינטרנט, שבניגוד ל-HTML, אחראית להוספת סגנונות ועיצוב לאתרים. בעוד ש-HTML משתמשים כדי לבנות את המבנה של האתר (כמו כותרות, פסקאות, תמונות וכדומה), CSS היא השפה שמביאה את האתר לחיים ומפיחה בו את העיצוב הרצוי.

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

## למה אנחנו צריכים CSS?

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

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

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

## איך CSS פועלת?

**CSS** כוללת חוקים שמקשרים בין רכיבי ה-HTML לבין עיצובים מסוימים. כל חוק ב-CSS כולל "סלקטור" (Selector) שמצביע על אלמנט ב-HTML ו"קובעת" את העיצוב עבור אותו אלמנט.

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

מתחילים עיצוב ב-CSS באמצעות סוגריים מסולסלים {}. הסוגריים משמשים לאגד את כל ההגדרות והסטיילים של אלמנט מסוים.

לדוגמה:

```css
h1 {
  color: blue;
  font-size: 36px;
}
```

בקטע זה, כל הגדרת העיצוב עבור הכותרת <h1> (כמו הצבע והגודל) נמצאת בתוך סוגריים מסולסלים. כל הגדרה בתוך הסוגריים נפרדת עם נקודה-פסיק (;).

## עיצוב כותרות

כמו שלמדנו קודם, יש לנו כותרות ב-HTML שמתחילות ב-<h1> ועד h6>. עכשיו נעצב את הכותרות כך שהן יהיו בולטות ונראות יותר טוב בעיניים.

```css
h1 {
  font-size: 36px;
  color: #2c3e50;
  text-align: center;
}

h2 {
  font-size: 28px;
  color: #34495e;
  margin-top: 15px;
}

h3 {
  font-size: 22px;
  color: #16a085;
}
```

במקרה הזה, אנחנו עיצבנו את הכותרות כך:

הכותרת הראשית (h1) תהיה בגודל גדול ובצבע כהה.
כותרות משניות (h2) יהיו בגודל בינוני, ובצבע כהה יותר.
כותרת שלישית (h3) בצבע ירוק למראה רענן.

## עיצוב פסקאות

פסקאות ב-HTML מתבצעות עם התגית <p>. כאן אנחנו רוצים שיהיה טקסט ברור וקריא.

```css
p {
  font-size: 18px;
  line-height: 1.6;
  color: #555;
  width: 80%;
  margin: 20px auto;
  text-align: justify;
}
```

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

## עיצוב קישורים

הקישורים, שמבוססים על תגית <a>, צריכים להיות ברורים ועם תגובת צבע כשעוברים עליהם עם העכבר.

```css
a {
  color: #3498db;
  text-decoration: none;
  font-weight: bold;
}

a:hover {
  color: #2980b9;
  text-decoration: underline;
}
```

עיצבנו את הקישורים כך:

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

## עיצוב תמונות

אם אנחנו רוצים להוסיף תמונות לאתר, נשתמש בתגית <img>. נוודא שהתמונות יהיו בגודל מתאים ומסודרות.

```css
img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 20px auto;
}
```

כך עשינו:

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

## עיצוב רשימות

רשימות הן כלי מצוין להציג דברים בצורה מסודרת. נשתמש ברשימה עם נקודות (<ul>) ורשימה ממוספרת (<ol>).

```css
ul,
ol {
  margin: 20px auto;
  width: 80%;
  padding-left: 20px;
}

li {
  font-size: 18px;
  margin-bottom: 10px;
}
```

הכנסנו עיצוב לרשימות:

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

## למה חשוב לדעת על CSS?

ב-CSS אנחנו יכולים לשלוט על איך כל חלק בדף ייראה. למשל:

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


שליטה ב-CSS הבסיס לעיצוב אתרי אינטרנט


## מה זה JavaScript?

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

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

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

## למה אנחנו צריכים JavaScript?

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

JavaScript מאפשרת לנו לבצע פעולות דינמיות על האתר:

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

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

## יאלה בואו נתחיל לדבר קוד😁💻

## משתנים (Variables)

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

המשתנים ב-JavaScript לא חייבים להיות קבועים — הם יכולים להשתנות במהלך העבודה עם האתר. לדוגמה, אם נרצה להציג את שם המשתמש, נשמור אותו בתוך משתנה כך:

```js
let name = "אלמיהו";
console.log(name); // 'זה יציג את 'אלמיהו
```

מה שחשוב להבין הוא ש-let הוא משתנה שניתן לשנות את ערכו במהלך הזמן לדוגמה:

```js
let age = 25;
age = 26; //'age' שינינו את הערך של
console.log(age); // יציג '26'
```

בנוסף, משתנה שהוגדר עם let יהיה זמין רק באותו בלוק קוד שבו הוא הוגדר (פונקציה, לולאה, תנאי if וכו').

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

```js
const message = "!JavaScript-שלום!, ברוך הבא ל";

function displayMessage() {
  console.log(message);
}

displayMessage();
```

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

למה זה חשוב?

המשתנה: בשורה הראשונה יצרנו משתנה בשם message שמכיל את הטקסט "שלום!, ברוך הבא ל-JavaScript! " המילה const אומרת שהמשתנה הזה לא משתנה אחרי שהוא נקבע (זאת אומרת, לא ניתן לשנות את ערכו בהמשך).

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

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

## פונקציות יותר לעומק

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

```js
function greet() {
  console.log("שלום עולם!");
}

greet(); // זה יציג 'שלום עולם!' במסך
```

הסבר:
המילה function מציינת שאנחנו יוצרים פונקציה.

אחרי המילה function, אנחנו נותנים לפונקציה שם — במקרה הזה greet.

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

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

## אובייקטים (Objects)

אובייקטים ב-JavaScript הם כמו תיבות שמאחסנות הרבה דברים ביחד, אבל בצורה מסודרת. כל תיבה יכולה להכיל פרטי מידע שונים, שנקראים מאפיינים (Properties).

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

```js
const person = {
  name: "אלמיהו",
  age: 26,
  profession: "מתכנת",
};

console.log(person.name); // 'אלמיהו'
console.log(person.age); // 30
```

הסבר:
יצרנו אובייקט בשם person.
בתוך האובייקט יש לנו מאפיינים (name, age, profession) שמכילים ערכים שונים.
כדי לגשת למאפיין בתוך האובייקט, אנחנו משתמשים בנקודה (Dot Notation), כמו person.name.

## תחזיקו חזק! עכשיו מתחילים עם מערכים – לא כל כך מפחיד כמו זה נשמע! 😜

## מערכים (Arrays)

מערכים ב-JavaScript הם רשימות. הם מאפשרים לנו לאחסן כמה דברים שונים בתוך מקום אחד. כל פריט במערך נקרא אלמנט (Element), ויש לו אינדקס (Index) שמציין את המיקום שלו בתוך המערך.

למשל, אם נרצה לאחסן רשימת שמות, נעשה זאת במערך:

```js
const names = ["יוסף", "מרים", "אלמיהו"];
console.log(names[0]); // 'אלמיהו'
```

הסבר:
יצרנו מערך בשם names שמכיל שלושה שמות. מערך הוא בעצם אוסף של פריטים (כמו שמות, מספרים או כל דבר אחר), שכולם נמצאים בתוך מבנה אחד. כל פריט במערך נקרא אלמנט.

מה שחשוב לדעת הוא שמערך ב-JavaScript תמיד מתחיל מ-0, כלומר, האלמנט הראשון במערך הוא names[0], שהוא 'אלמיהו'. האלמנט השני הוא names[1], שהוא 'מרים', וכן הלאה.

אז אם נשאל מהו האלמנט הראשון, התשובה היא names[0] ולא names[1], כי המערך מתחיל מ-0!

## סיכום:

משתנים מאחסנים ערך אחד.

פונקציות מאפשרות לבצע סדרת פעולות.

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

מערכים הם רשימות של פריטים מסודרים.


מה זה JavaScript ולמה אנחנו צריכים אותה?


## מה זה React?

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

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

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

## למה אנחנו צריכים React?

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

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

- **רכיבים (Components)**: כל רכיב ב-React הוא עצם עצמאי עם ממשק משתמש משלו, שניתן לשנות ולעדכן בקלות.
- **סטייט (State)**: React מאפשרת למעקב אחר שינויים במידע בתוך הרכיבים וגורמת לדף להתעדכן אוטומטית כשיש שינוי.
- **יישומים חד-עמודיים (SPA)**: בעזרת React, ניתן ליצור אפליקציות שלמות שמגיבות לפעולות המשתמש ללא צורך בטעינה מחדש של הדף כולו.

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

&nbsp;

## בואו נצלול לעומק 🧠 🌊 🤿

&nbsp;

## מה זה רכיבים (Components)?

ב-React, רכיבים (Components) הם החלקים שמרכיבים את הממשק שלנו. כל רכיב אחראי להציג מידע מסוים או לבצע פעולה מסוימת — בדיוק כמו לגו: כל חלק הוא עצמאי, אבל אפשר להרכיב אותם יחד כדי ליצור משהו גדול ושלם.

### למה רכיבים כל כך מיוחדים?

שימוש חוזר (Reusable): רכיב יכול לשמש במקומות שונים באתר, כך שלא צריך להמציא את הגלגל כל פעם מחדש.
עצמאיים (Independent): רכיב פועל באופן עצמאי, מה שמקל על תחזוקה ושדרוג של הקוד.
HTML בתוך JavaScript! רכיבים ב-React מאפשרים לנו לשלב קוד HTML בתוך JavaScript בעזרת תחביר מיוחד שנקרא JSX.

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

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

דוגמה לרכיב פשוט:

```js
function Greeting() {
  return <h1>שלום ברוך הבא ל-ריאקט</h1>;
}
```

#### מה קרה כאן?

HTML בתוך JavaScript: שימו לב ל-<h1>, זה לא קובץ HTML רגיל — זה קוד JSX שמשולב בתוך JavaScript!

עצמאות: רכיב זה אחראי אך ורק על הצגת הכותרת "שלום, ברוך הבא ל-React!".

שימוש חוזר: אפשר להשתמש ברכיב זה כמה פעמים שרוצים.

## מה זה Props?

Props הם דרך להעביר מידע לרכיבים ב-React.
בעזרת props, אפשר לשלוט על מה שהרכיב מציג, כך שאותו רכיב יכול לשמש במצבים שונים עם נתונים משתנים.

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

```js
function Title(props) {
  return <h1>{props.text}</h1>;
}
```

כאן, props.text הוא המידע שהרכיב יקבל.

### איך משתמשים ב-Props?

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

```js
function App() {
  return (
    <div>
      <Title text="ברוכים הבאים!" />
      <Title text="React זה כיף!" />
    </div>
  );
}
```

בפעם הראשונה, הכותרת תהיה "ברוכים הבאים!".

בפעם השנייה, הכותרת תהיה "React זה כיף!".

#### למה Props שימושיים?

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

#### לסיכום:

Props = "נתונים שהרכיב מקבל".

Props - הופכים את הרכיבים ב-React לגמישים, כך שאפשר להשתמש באותו רכיב עם תוכן או התנהגות שונה בכל פעם.

Props - הם דרך פשוטה להפוך את הקוד שלכם לנקי וקל לתחזוקה.

## מה זה State ב-React?

State (מצב) הוא כלי ב-React שמאפשר לרכיבים לזכור מידע ולהגיב לשינויים.

בניגוד ל-Props שמגיעים "מבחוץ", ה-State הוא פנימי לרכיב עצמו ומשתנה במהלך הזמן בהתאם לפעולות המשתמש או אירועים בדף.

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

## למה State חשוב?

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

דוגמה פשוטה לשימוש ב-State

```js
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // שמתחיל ב-0 'count' בשם State הגדרת

  const handleClick = () => {
    setCount(count + 1); // עדכון ה-State בכל לחיצה על הכפתור
  };

  return (
    <div>
      <h1>המספר הנוכחי: {count}</h1> {/* הצגת ה-State */}
      <button onClick={handleClick}>הוסף 1</button> {/* שינוי ה-State בלחיצה */}
    </div>
  );
}

export default Counter;
```

## מה הדוגמה הזאת עושה?

הגדרנו State בשם count שמתחיל מהערך 0.

בכל פעם שלוחצים על הכפתור, אנחנו משתמשים בפונקציה setCount כדי להגדיל את count ב-1.
התוצאה? המספר שמוצג על המסך מתעדכן מיד.

## איך State עובד?

useState: הוא הכלי שמאפשר לנו להגדיר State בתוך רכיב.

הוא מחזיר מערך עם שני ערכים:
הערך הנוכחי של ה-State (בדוגמה: count).

פונקציה שמשנה את ה-State (בדוגמה: setCount).

שינוי ה-State: כשמשתמשים ב-setCount, React מעדכנת את הערך של count ומרעננת את מה שרואים על המסך.

## לסיכום:

State הוא "הזיכרון" של הרכיב.
הוא משמש כדי לשמור ולעקוב אחרי מידע שמשתנה.

כל שינוי ב-State גורם ל-React לרענן את הרכיב ולהציג את המידע החדש.

State הופך רכיבים ב-React לדינמיים ומאפשר להם "להגיב" לשינויים בצורה חכמה! כמו בכל אפליקציה 😊


מה זה React ולמה אנחנו צריכים אותה?


# חוקי Syntax כשכותבים קוד ⚙️

היי! 🌟  
העמוד הזה נמצא כרגע בהכנה 🛠️  
אני עובד עליו כדי להביא לכם את כל מה שצריך לדעת על סינטקס בתכנות, בקרוב מאוד יהיה כאן תוכן מדהים! 😎

תודה על הסבלנות! 💻


חוקי syntax כשכותבים קוד


NextJS הוא **פריימוורק** שנבנה על גבי **ReactJS**.

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

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

## אז למה NextJS חשוב?

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

בנוסף, NextJS מספק מגוון כלים ושיפורים שמקליקים על הפיתוח:

- **ניווט מבוסס קבצים** – לא צריך להגדיר כל מסלול ידנית, פשוט יוצרים קבצים בתיקיות המתאימות.
- **רינדור דפים מראש (Pre-rendering)** – הדפים נטענים בצורה אופטימלית ומותאמים יותר לשיפור זמן טעינה.
- **שליפת נתונים בצורה גמישה** – קל לשלב נתונים חיצוניים (API, בסיסי נתונים ועוד).
- **אופטימיזציה של תמונות** – NextJS מבצע אופטימיזציה אוטומטית של התמונות שנטענות.
- **ומעבר לזה** – יש הרבה תכונות נוספות כמו תמיכה ב-API Routes, תמיכה בריבוי דפים ועוד.

## ניווט מבוסס קבצים

באמצעות NextJS, יצירת ניווט בתוך האתר היא פשוטה מאוד. כל תיקייה תחת התיקייה `pages` מייצגת נתיב (route) באתר. בתוך כל תיקייה, יש קובץ שנקרא `index.js` שמייצג את הדף שיתפקד כעמוד של אותו נתיב.

לדוגמה, אם תיצור תיקייה בשם `contact` בתיקיית `pages` ותגיד לה להכיל קובץ `index.js` הוא יהיה הדף שיתפקד כעמוד "צור קשר" באתר.

כמו שאתם רואים בתמונה למטה, כל תיקייה תחת התיקייה `pages` מייצגת נתיב נפרד, וכל קובץ `index.js` בתוכה ייצור את הדף המתאים.

![צור מסלולים באמצעות מבנה הקבצים + התיקיות שלך](/images/posts/getting-started-with-next-js/nextjs-file-based-routing.png)


התחלה עם NextJS


היי! 🌟  
העמוד הזה נמצא כרגע בהכנה 🛠️  
אני עובד עליו כדי להביא לכם את כל מה שצריך לדעת על פרונטאנד ובקאנד, בקרוב מאוד יהיה כאן תוכן מדהים! 😎

תודה על הסבלנות! 💻


מה זה פרונטאנד? (Front-End) ומה זה בקאנד? (Back-End)


## מה זה Node.js?

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

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

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

## למה אנחנו צריכים Node.js?

אם נחשוב על פיתוח אפליקציות אתרים, אנו רואים שמרבית הפיתוח מתרחש בצד הלקוח — מה שמשמעותו הוא שלפעמים נצטרך לעבוד עם JavaScript גם בצד השרת. ב-Node.js, אנחנו יכולים להשתמש בדיוק באותו קוד JavaScript, ולא נצטרך להחליף בין שפות במהלך הפיתוח.

Node.js מציעה לנו מספר יתרונות משמעותיים:

- **מהירות**: Node.js מבוסס על מנוע V8 של גוגל, שהוא מאוד מהיר.
- **אסינכרוניות**: Node.js עושה שימוש בטכניקות אסינכרוניות ומאפשר הרצת קוד בצורה לא חסימנית (non-blocking), מה שמייעל את הביצועים של האפליקציות.
- **קוד אחיד**: כי אנחנו משתמשים באותה שפה (JavaScript) בצד הלקוח ובצד השרת, אנחנו לא צריכים ללמוד שפות שונות.
- **קהילת פיתוח גדולה**: Node.js נהנה מקהילת פיתוח פעילה מאוד שמספקת מודולים רבים ואפשרויות רבות לשדרוגים.

## דוגמה פשוטה של קוד ב-Node.js

כדי להבין איך Node.js עובד, נסתכל על דוגמה פשוטה מאוד של קוד שמפעיל שרת ב-Node.js.

```js
// דרישה למודול http של Node.js
const http = require('http');

// יצירת שרת פשוט
const server = http.createServer((req, res) => {
  res.statusCode = 200; // קוד הצלחה
  res.setHeader('Content-Type', 'text/plain'); // סוג התוכן
  res.end('Node.js-שלום!, ברוך הבא ל' ); // מה שיחזור למבקש
});

// מאזין על פורט 3000
server.listen(3000, '127.0.0.1', () => {
  console.log('השרת פועל בכתובת http://127.0.0.1:3000/');
});
```

## הסבר על קוד Node.js שמפעיל שרת פשוט:

1. ייבוא המודול http:

ב-Node.js, מודול http הוא חלק מובנה בפלטפורמה, והוא מאפשר לנו ליצור שרתים שמטפלים בבקשות HTTP (בקשות של דפדפנים למשל).
כאן אנחנו "דורשים" (import) את המודול כדי להשתמש בו בקוד שלנו.

2. יצירת השרת:

```js
const server = http.createServer((req, res) => {
  res.statusCode = 200; // קוד הצלחה
  res.setHeader('Content-Type', 'text/plain'); // סוג התוכן
 res.end('Node.js!-שלום!, ברוך הבא ל'); // מה שיחזור למבקש
});
```

כאן אנחנו יוצרים שרת באמצעות הפונקציה http.createServer.

הפונקציה מקבלת Callback Function (פונקציה שתופעל לכל בקשת HTTP).

הפונקציה מקבלת שני פרמטרים:

req: אובייקט שמייצג את הבקשה של המשתמש (Request).

res: אובייקט שמייצג את התשובה שאנחנו שולחים למשתמש (Response).

בפונקציה:

res.statusCode = 200;
אנחנו מציינים את קוד התשובה.

200: פירושו "הכל תקין".

res.setHeader('Content-Type', 'text/plain');
אנחנו מגדירים את סוג התשובה שאנחנו שולחים.

כאן זה טקסט פשוט (Plain Text).

res.end('שלום, ברוך הבא ל-Node.js!');

הפונקציה end מסיימת את התשובה ושולחת את הטקסט שלום, ברוך הבא ל-Node.js! לדפדפן או ללקוח שביקש.

3. הפעלת השרת:

```js
server.listen(3000, '127.0.0.1', () => {
  console.log('השרת פועל בכתובת http://127.0.0.1:3000/');
});
```

כאן אנחנו מורים לשרת להאזין לבקשות שמגיעות לכתובת 127.0.0.1 (המחשב המקומי, Localhost) ולפורט 3000.

הפונקציה listen מקבלת שלושה פרמטרים:
מספר הפורט: הכתובת שאליה פונים כדי לגשת לשרת (במקרה הזה, 3000).

כתובת ה-IP: כתובת המחשב המקומי שלנו (במקרה הזה, 127.0.0.1).
Callback Function: פונקציה שתופעל כשהשרת יתחיל לפעול.

כאן אנחנו מדפיסים הודעה לקונסול: השרת פועל בכתובת http://127.0.0.1:3000/.

## מה התוצאה?

הרצת הקוד:
אם נריץ את הקוד בטרמינל עם הפקודה node <שם_הקובץ>.js, נקבל הודעה בקונסול:

```js
השרת פועל בכתובת http://127.0.0.1:3000/
```

גישה לשרת:

אם ניכנס לדפדפן ונקליד את הכתובת http://127.0.0.1:3000/, נראה את ההודעה:

```js
Node.js!-שלום!, ברוך הבא ל
```

## לסיכום:

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







המאמרים שיפתחו לך את עולם התכנות! ✨