Nella maggior parte dei casi, un tag HTML comprende uno o più attributi. Quando utilizziamo la sintassi JSX possiamo utilizzare questi attributi come faremmo in qualunque pagina HTML.

return (
  <div data-my-attr="myvalue"></div>
);

In questo esempio il valore dell'attributo viene impostato con un dato fisso, ma possiamo anche usare la sintassi di binding per decidere che il valore viene impostato da una variabile.

return (
  <div data-my-attr={props.fullname}></div>
);

Esistono tuttavia alcuni attributi che seppura validi in HTML, non sono validi in JSX. Quello principale è class che in HTML specifica le classi CSS applicate al tag, mentre in JSX rappresentano un'altra funzionalità . Per specificare le classi CSS di un tag HTML in JSX dobbiamo usare l'attributo className.

return (
  <div className="mycssclass" data-my-attr={props.fullname}></div>
);