The Power of JSX: Combining HTML and JavaScript

What is JSX?

We utilize JSX to create HTML-like code in JavaScript when we’re using React. It looks and feels like HTML that is married to JavaScript (because it is actually JavaScript).

JSX is helpful since it makes the component more readable.

If you have not read my previous posts about React yet, here are a few points for you:

• You can only return one element at a time when you’re creating a component using JSX. This is why we use a parent element. For instance, <div>

Welcome.jsx

const Welcome= () => {
 return (
  
<div>

   <h1>Daily Bugle</h1>
   <p>Welcome to the best news outlet there where we keep this creep Spiderman in check!</p>
  
</div>

 );
};

• If the JSX spans multiple lines, wrap it in parentheses for clarity just like the one above
• If you’re only returning a single line, you can just add the JSX after the return statement to return to it

SpidermanPoetry.jsx

const SpidermanPoetry= () => {
 
return <p>I have no money. No parents left alive. Spidey has no home.</p>;
};

• Since JavaScript is under the hood of React, we can also perform calculation in JSX

BudgetCalculations.jsx

const BudgetCalculations = () => {
  return <h1>{5+5}</h1>;
};

• Embedded expression must go in between the curly braces just like what we have above
• Since JSX is JavaScript, it gives us the full power of JavaScript! You can also reference variables inside JSX

Welcome.jsx

const name= "Tony Stark";
const Welcome = () => {
  return <h1>Welcome Home, {name}</h1>;
};

• That means we can perform calculations, reference variable, or use any valid Javascript expression inside the curly braces

Welcome.jsx

const score= 15;
const Welcome = () => {
  return <h1>{score * 10}</h1>;
};

• Therefore, we use embedded expression to insert JavaScript and JSX in other JSX elements

Profile.jsx

const name = "Peter Parker";

const Profile = () => {
  return <h1>{name}</h1>;
};

• In JSX, you can use all the tags you already know from regular HTML, including <div>, <h1>, <p>, <footer>, etc.
• A reminder that some elements in HTML are self-closing which means that they only have a single tage that ends with a slash /

MyPage.jsx

const MyPage = () => {
  return (
    <div>
      <h1>Ducks are great</h1>
      <p>I love ducks and bubble baths</p>
      <img src="https://shorturl.at/lUn8R" alt="Batmetal Returns by Jack Blin" />
      <br />
      <input type="text" placeholder="Type here..." />
    </div>
  );
};

• You can also store JSX inside a variable. This is really useful when you want to write JSX in some part of your code and then you want to refer to it somewhere else
• You can also reference other JSX elements using a JSX expression with curly braces
• And if you want to include multiple JSX expressions within one component, you need to use the {} for each expression
• You can use embedded expressions to pass values into a JSX elements attributes

MyPage.jsx

const nameHeader = <h1>BatMetal Forever!</h1>;
const age = 37;
const url = "https://shorturl.at/lUn8R";

const MyPage = () => {
  return (
    <div>
      {nameHeader}
      <p>I love ducks and bubble baths!</p>
      <p>I am {age} years old.</p>
      <br />
      <img src={url} alt="Batmetal Returns by Jack Blin" />
    </div>
  );
};

In Summary

JSX is a unique syntax that blends JavaScript with HTML.

It as a bridge between the logic of JavaScript and the structure of HTML. With JSX, you can write HTML-like code directly in your JavaScript files, allowing you to describe the layout of your UI in a way that’s both visual and declarative. 

This makes your code more readable and it also simplifies the process of building dynamic web applications by embedding expressions and JavaScript logic right into the markup.

Reference: react.dev and my school notes 💋😝

---