Skip to content

Latest commit

 

History

History
62 lines (41 loc) · 1.96 KB

embedding-expressions.md

File metadata and controls

62 lines (41 loc) · 1.96 KB
Raw

Embedding Expressions: Dynamic Content 🔄

Welcome back to JSX! 🌟 Now that you understand the basics of JSX, let’s dive into one of its coolest features: embedding expressions! This is where the magic happens, allowing you to make your components dynamic and interactive.

What Does It Mean to Embed Expressions? 🤔 In JSX, you can embed any JavaScript expression inside curly braces {}. This means you can easily display variables, perform calculations, or even call functions right within your markup!

Mia: "So, I can mix JavaScript with HTML?"

Leo: "Absolutely! It’s like having your cake and eating it too!" 🍰

Examples of Embedding Expressions

  1. Displaying Variables Let’s say you have a variable holding a user’s name:

    const userName = "Mia";
const WelcomeUser = () => <h1>Welcome, {userName}!</h1>;

  2. Calculations You can also perform calculations directly in your JSX:

    const a = 5;
const b = 10;
const Sum = () => <h2>The sum is: {a + b}</h2>;

  3. Function Calls You can even call functions that return values:

    const getGreeting = () => "Hello, Leo!";
const Greeting = () => <h2>{getGreeting()}</h2>;

Mia: "This makes it so easy to show different information!"

Leo: "Right? It adds a whole new level of interactivity!" 🎉

Important Things to Remember 🔑

  • Use Curly Braces: Always wrap your JavaScript expressions in curly braces {}.
  • Single Expressions Only: You can only embed single expressions, not statements (like loops or conditionals).

Fun Fact! 🎈

Did you know? You can embed any valid JavaScript expression, including arrays and objects! This means you can create complex UIs with minimal effort! 🌍

Navigation

Previous: Understanding JSX: HTML in JavaScript | Next: Conditional Rendering: Displaying Based on Conditions