📚 Quick Study Guide

• ✨ JSX Basics: JSX (JavaScript XML) is a syntax extension to JavaScript that allows you to write HTML-like structures in your JavaScript code.
• ✍️ JSX Transformation: JSX code needs to be transformed into regular JavaScript for browsers to understand it. This is typically done using tools like Babel.
• ⚛️ React Elements: JSX expressions are translated into React elements, which describe what you want to see on the screen.
• 🏷️ HTML Attributes in JSX: HTML attributes are used similarly in JSX, but some names are different (e.g., `className` instead of `class`).
• 🧮 Embedding Expressions: You can embed JavaScript expressions within JSX using curly braces `{}`. For example, `

  {2 + 2}

  ` will render `

  4

  `.
• 🧱 JSX Restrictions: A JSX expression must have one top-level element. If you need to render multiple elements, wrap them in a parent element like a `
  ` or use a React Fragment `<>...`.
• 🖋️ Comments in JSX: Use curly braces `{}` to include comments within JSX. For example, `{/* This is a comment */}`.

🧪 Practice Quiz

1. What is JSX?
   1. A new programming language.
   2. A syntax extension to JavaScript.
   3. A type of CSS.
   4. A database query language.
2. Which tool is commonly used to transform JSX into regular JavaScript?
   1. Webpack
   2. Babel
   3. Sass
   4. Node.js
3. In JSX, how do you embed a JavaScript expression?
   1. Using parentheses `()`
   2. Using curly braces `{}`
   3. Using square brackets `[]`
   4. Using angle brackets `<>`
4. What is the equivalent of the HTML `class` attribute in JSX?
   1. `class`
   2. `className`
   3. `style`
   4. `cssClass`
5. Which of the following is a valid way to render multiple elements in JSX?
   1. ``
   2. `{element1, element2}`
   3. `
      `
   4. ``
6. How do you write a comment within JSX?
   1. `// This is a comment`
   2. ``
   3. `{/* This is a comment */}`
   4. `/* This is a comment */`
7. What does JSX code get transformed into?
   1. HTML elements
   2. React elements
   3. CSS styles
   4. DOM nodes