JSX Attributes — Complete Guide

JSX Attributes — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of React.js Tutorial on Toolliyo Academy.

8 min read Updated 8/7/2026

On this page

React.js Tutorial · Lesson 8 of 100

JSX Attributes

Beginner → Intermediate → Advanced → Professional

Beginner · 1 — Learn by example · ~6 min · Module 1: React Basics & Setup

What is this?

JSX attributes set HTML properties on elements — but with React names. class becomes className, for becomes htmlFor, and style takes a JavaScript object.

Why should you care?

class is a reserved word in JavaScript, so React uses className. Getting attributes right is required for CSS and forms.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

function Banner() {
  return (
    <div className="banner" style={{ background: '#e3f2fd', padding: '12px' }}>
      <label htmlFor="email">Email</label>
      <input id="email" type="email" placeholder="you@example.com" />
    </div>
  );
}

Run Example »

Edit the code and click Run to see the result update live.

Code

Result

What happened?

className applies CSS classes.
style={{ }} uses double braces — outer for JSX, inner object for CSS.
htmlFor links label to input id.

Try it yourself

Add className to a div and style it in index.css.
Set style={{ color: "red" }} on a heading.
Add placeholder and disabled attributes on a button.
Change text or labels in the example and save — watch the browser update.
Break the code on purpose (remove a bracket), read the error message, then fix it.