📄 כללי JSX ב־React

JSX הוא סיומת תחביר ל-JavaScript. זה נכתב לשימוש עם React.

🎯 JSX נראה כמו HTML אך לא תקף לדפדפנים – חייב הידור.

JSX נראה כמו HTML, אך מאפשר להכניס קוד JavaScript בתוך הסוגריים:{}

ניתן להכניס משתנים, map, ביטויים
אסור להשתמש ב־if, for, switch
JSX חייב להכיל אלמנט עוטף אחד

JSX Elements and Their Surroundings

אלמנטים יכולים להישמר במשתנים:

const navBar = <nav>I am a nav bar</nav>;

דוגמה מורצת בפועל:

Attributes in JSX

כמו ב־HTML:

const p1 = <p>foo</p>;
const p2 = <p id="large">bar</p>;

foo

bar

Nested JSX

חובה לעטוף כמה רכיבים בסוגריים:

const myDiv = (
  <div>
    <h1>Hello World</h1>
  </div>
);

JSX Outer Elements

חובה שיהיה רק אלמנט חיצוני אחד:

// ✅ תקין
const content = (
  <div>
    <p>paragraph</p>
    <p>second paragraph</p>
  </div>
);

// ❌ לא תקין
const fail = (
  <p>1</p>
  <p>2</p>
);

Rendering JSX

כך מרנדרים ל־DOM:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <h1>Hello world</h1>,
  document.getElementById('app')
);

Passing a Variable to ReactDOM.render

const myList = (
  <ul>
    <li>Check</li>
    <li>Check</li>
    <li>Check</li>
  </ul>
);

ReactDOM.render(
  myList,
  document.getElementById('app')
);

Check
Check
Check

📘React - מדריך