CODEWITHSUNDEEP
reactjsjsxcreate-react-app
machineghost
machineghost

Reputation: 35790

"class" Attribute Works in JSX: How?

I have a student who submitted code which includes a number of class (not className) attributes. For instance:

import React, { Component } from "react";

class Images extends Component {
    render() {
        return (
            <div class="gallery">
                <div class="zoom"><img src="foo.jpg" alt="Foo"/></div>
                <div class="zoom"><img src="bar.jpg" alt="Bar"/></div>
            </div>
    );
}

But somehow his code works, and generates actual HTML class attributes. I even tried deleting a line, to make sure the code was actually being used, but sure enough the corresponding line was removed in the output.

I don't understand how this could be working. The student used create-react-app, which uses the react-scripts library to compile/run the site, but I couldn't find any mention of either one converting class to className:

https://facebook.github.io/create-react-app/

https://github.com/facebook/create-react-app/tree/master/packages/react-scripts

Can anyone explain this witchcraft? ;)

P.S. Relevant library versions:

"jsx": "^0.9.89",
"react": "^16.6.3",
"react-dom": "^16.6.3",
"@babel/preset-react": "^7.0.0",

Upvotes: 5

Views: 5408

Answers (1)

bamse
bamse

Reputation: 4373

This change happened with React@16. You can also use class but not in all cases: https://reactjs.org/blog/2017/09/08/dom-attributes-in-react-16.html#changes-in-detail

Upvotes: 3

Related Questions