⚛️ JSX Attributes & className

⚡ Quick Overview

In JSX, attributes look similar to HTML but behave like JavaScript. JSX attributes:

Use camelCase instead of kebab-case (for example, tabIndex).
Rename some HTML attributes like class → className and for → htmlFor.
Allow dynamic values using JavaScript expressions inside { }.
Use JavaScript objects for inline styles.

✨ JSX = JavaScript + XML-like syntax

? Key Concepts

Attributes in JSX follow JavaScript naming rules and types.
className is used instead of class to avoid conflicts with the JavaScript keyword.
Dynamic attributes use curly braces { } to embed variables and expressions.
Inline styles are written as JavaScript objects with camelCased property names.
Event handlers like onclick become onClick in JSX.

⚛️ Understanding Attributes in JSX

JSX attributes work similarly to HTML, but with a few key differences. JSX attributes are written using camelCase naming conventions, and some attribute names differ from their HTML counterparts to avoid conflicts with JavaScript keywords.

For example, instead of using class or for like in HTML, JSX uses className and htmlFor.

? Basic Attribute Example

This is a simple JSX element that uses attributes like src, alt, and width.

? View Code Example

// JSX example with basic image attributes
const element = <img src="logo.png" alt="App Logo" width="200" />;

This syntax looks like HTML but is actually JavaScript under the hood. JSX converts this into:

? View Compiled Version

// How React internally represents the same element
const element = React.createElement("img", {
  src: "logo.png",
  alt: "App Logo",
  width: "200"
});

React then uses this object to efficiently render and update the DOM.

? Using className Instead of class

In HTML, we use the class attribute to apply CSS styles. However, since class is a reserved word in JavaScript, JSX uses className instead.

? View Code Example

// ✅ Correct JSX using className
<h2 className="title">Welcome to React!</h2>
// ❌ Incorrect: HTML class will cause an error in JSX
<h2 class="title">This will cause an error</h2>

The className attribute links your JSX elements to CSS classes defined in your stylesheet.

? Dynamic Attributes in JSX

You can embed JavaScript expressions inside attributes using curly braces { }. This allows you to assign dynamic values such as variables, functions, or expressions.

? View Code Example

// Dynamic attributes using variables
const imageUrl = "https://reactjs.org/logo-og.png";
const altText = "React Logo";

const element = <img src={imageUrl} alt={altText} width={150} />;

React evaluates the expression inside { } and inserts the computed value into the attribute.

? Conditional className Example

// Conditional className with a ternary operator
const isActive = true;
const buttonClass = isActive ? "btn btn-primary" : "btn";

const element = <button className={buttonClass}>Click me</button>;

? Inline Styles in JSX

In JSX, the style attribute is written as a JavaScript object, not a string. Properties use camelCase instead of hyphenated names.

? View Code Example

// Inline styles are JavaScript objects in JSX
const titleStyle = { color: "blue", fontSize: "24px", textAlign: "center" };

const element = <h1 style={titleStyle}>Styled JSX Heading</h1>;

Remember that inline styles are defined within double curly braces — one for JavaScript, one for the object: style={{ color: "red" }}.

⚠️ Common Attribute Conversions

JSX follows the same naming rules as JavaScript properties — camelCase is always used. Some common conversions are:

class → className
for → htmlFor
tabindex → tabIndex
onclick → onClick
maxlength → maxLength

? Live Output / Explanation

Consider the JSX:

const heading = <h2 className="title">Welcome to React!</h2>;

React will render this to the DOM as:

<h2 class="title">Welcome to React!</h2>

Even though you write className in JSX, the actual HTML uses class. JSX is just a convenient syntax that compiles down to plain JavaScript and standard HTML attributes in the browser.

? Tips & Best Practices

Always use className instead of class to avoid syntax errors.
For conditional classes, use template literals or ternary operators inside { }.
Keep inline styles for small, dynamic changes — prefer external CSS for large projects.
Attribute values inside { } can include variables, functions, or expressions.
Remember that JSX attributes are case-sensitive: onClick is different from onclick.

? Try It Yourself

Create a component named StyledCard that displays your name and role.
Apply a background color and border using inline styles defined as a JavaScript object.
Use className to apply external CSS for text styling.
Add a dynamic title attribute that changes based on a variable.

Goal: Understand how JSX handles HTML-like attributes, use className for styling, and apply both static and dynamic attributes in React components.

? Sample Solution Structure (Hint)

// Example structure for a StyledCard component
function StyledCard() {
  const role = "Frontend Developer";
  const cardStyle = {
    padding: "16px",
    borderRadius: "8px",
    border: "1px solid #e5e7eb",
    backgroundColor: "#f9fafb"
  };

  return (
    <div
      className="card"
      style={cardStyle}
      title={`Role: ${role}`}
    >
      <h2 className="card-title">Your Name</h2>
      <p className="card-role">{role}</p>
    </div>
  );
}