JavaScript Developers Transitioning to JSX:

If you are transitioning from JavaScript to React JSX, here are some key differences and rules to keep in mind:

1. Closing Tags:

All elements in JSX must have a closing tag. Self-closing tags like <img /> or <br /> are mandatory.

     // Incorrect
      <img>

     // Correct
      <img />

2. Use className Instead of class:

Since class is a reserved keyword in JavaScript, JSX uses className for defining CSS classes.

     <div className="container"></div>

3. Inline Styles Use JavaScript Objects:

Styles in JSX must be passed as objects with camelCase property names.

    const style = { backgroundColor: "blue", color: "white" };
       <div style={style}>Styled Element</div>;

4. JavaScript Expressions in JSX:

Embed any JavaScript expression within {} in JSX.

    const value = 42;
        <p>The answer is {value}.</p>;

5. Parent Element Requirement:

JSX expressions must return a single parent element.

    // Incorrect
      return <h1>Title</h1><p>Subtitle</p>;

    // Correct
     Return (
      <>
        <h1>Title</h1>
        <p>Subtitle</p>
      </>
    );

6. Event Handlers:

Event handlers in JSX use camelCase and receive a function as the value.

    <button onClick={() => alert("Clicked!")}>Click Me</button>;

    PreviousNext