JSX

const Question = ({ question }: QuestionProps) => {
  const [upVotes, setUpVotes] = useState(0);
  const upVote = () => setUpVotes((v) => v + 1);

  return (
    <div>
      <h4>{question.title}</h4>
      <p>{question.text}</p>
      <p>{question.hours} hours ago</p>

      <UpvoteBtn onClick={upVote} />
      <Answers
        numAnswers={question.num}
      />
    </div>
  );
}

export default Question;

​

Umwandlung

<header>
  <h1 style="color: red">
    Hello React!
  </h1>
</header>

React.createElement(
  'header',
  null,
  React.createElement(
    'h1',
    { style: { color: 'red' } },
    'Hello React!'
  )
)

​

Regeln

​

Generelle Regeln

• JSX funktioniert eigentlich wie HTML, aber wir können in den “JavaScript-Mode” mit {} gehen (für Text oder Attribute)
• Wir können ganze JavaScript-Expressions in den {} schreiben, z.B. um Variablen zu referenzieren, Arrays oder Objekte zu erstellen und die .map()-Methode, den Ternary-Operator, etc. nutzen
• Statements sind nicht erlaubt, z.B. if/else, for und switch
• Ein Stück JSX darf nur ein Root-Element beinhalten. Wenn man mehr braucht, sollte man <> benutzen

​

Unterschiede: JSX vs. HTML

• className anstatt HTML’s class
• htmlFor anstatt HTML’s for
• Jeder Tag muss geschlossen werden, z.B. <img /> oder <br />
• Alle Event-Handler und andere Properties müssen in camelCase sein, z.B. onClick oder onMouseOver
  • Ausnahme: aria-* und data-* werden mit - wie in HTML geschrieben
• CSS Inline Styles werden wie folgt geschrieben: {{<style>}}
• CSS-Attributnamen werden ebenfalls im camelCase geschrieben
• Kommentare müssen in {} sein