What does the className attribute mean in JSX?

Question

I'm trying to figure out some sample JavaScript/React/Enzyme code and getting totally confused on what className attribute means in the JSX part of ReactTestObj below.

I know className in JSX is used because class is a reserved keyword in JavaScript, but I thought the className/class attribute in JSX/HTML was a reserved keyword for referencing a CSS class? If there is no CSS as in my example, what is the legal use of class/className other than referencing CSS classes?

import React from 'react';

export class ReactTestObj extends React.Component<Props, State> {

  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className={'outer'}>
        <div className={'inner'}>
          <span className={'prop'}>prop</span>
          <span className={'state'}>state</span>
          <button
            className="activate"
            onClick={function() {

            }}>
            {this.props.value}
          </button>
        </div>
      </div>
    );
  }
}

and the sample test code for context:

import { mount, React, expect } from '../specHelper';
import { ReactTestObj } from '../../src/components/ReactTest';

describe('ReactTest', () => {
  it('should have an outer div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.outer')).to.exist;
  });
  it('should have an inner div', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.inner')).to.exist;
  });
  it('should have a prop', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.prop')).to.exist;
  });

  it('should have a state and it should be set to 10', function() {
    const wrapper = mount(<ReactTestObj />);
    expect(wrapper.find('.state')).to.exist;
    expect(wrapper.find('.state')).value('state');
  });

Answer 1

className is used instead of class in JSX because class is a JavaScript keyword. All JSX gets turned into vanilla JavaScript. If you wrote class it would try to make a JavaScript class and not make an element that has a class.

So, when you write react it looks like this.

const name = 'Maddie';
const element = <h1 className="myName">Hello, {name}</h1>;

Then something like babel will take that code and turn it into vanilla JavaScript:

var name = 'Maddie';
var element = React.createElement("h1", {
  className: "myName"
}, "Hello, ", name);

In vanilla JavaScript className is used to assign classes because the class keyword makes a different type of class.