CODEWITHSUNDEEP
javascriptreactjsreact-native
Jegan Raj
Jegan Raj

Reputation: 125

When did React start supporting 'class' attribute in jsx

I heard that class attribute was not supported in Jsx. But now it is working fine. when did React start supporting class attribute in jsx

Upvotes: 5

Views: 988

Answers (3)

T.J. Crowder
T.J. Crowder

Reputation: 1074495

Empirically, it started with v16.0.0, but note that the development libraries issue this warning when you use it (the warning is still there as of this update on 2024-03-24, v18.2):

Invalid DOM property class. Did you mean className?

Officially, I don't think React supports using class: the docs still say to use className, and I don't see a change for this in the changelog. Actually, the docs may be out of date, Dinesh points out this is part of React Fire (and that ticket says class is supported from v16 [className still works]). But also note this comment from Dan Abramov on 2020-08-11:

This was the most controversial part of the proposal. Since then, we released Hooks, which encourage writing function components. In function components, we generally suggest using destructuring for props, but you can't write { class, ... } because it would be a syntax error. So overall it's not clear that this is ergonomic enough to actually follow through with. I think it's plausible we'll revisit this in the future, or at least make class not warn and let people do what they want. But for now, we'll shelving this idea.

Here in 2024 the warning remains, so indeed, they seem to have shelved the idea of first-class support for class. (Side note: You can destructure class just fine: const Example = ({"class": cls }) => { /*...use cls here...*/ }. But the DOM property is called className, not class; props aren't attributes. So there really are arguments both for and against...)

Example with React v15, which doesn't work:

ReactDOM.render(
    <div class="foo">Testing</div>,
    document.getElementById("root")
);
.foo {
    color: green;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.7.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.7.0/react-dom.min.js"></script>

Example wth React v16.0.0 (the current version is much later than that, this is just for illustration), which does work, with a warning:

ReactDOM.render(
    <div class="foo">Testing</div>,
    document.getElementById("root")
);
.foo {
    color: green;
}
<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.development.js"></script>

To be completely clear, this was never a JSX thing (JSX is fine with class instead of className), it was/is a React thing. React used className instead of class to support obsolete browsers like IE8 that didn't allow class in property initializers in object initializers ("object literals") because they hadn't been updated for ES5's change allowing keywords as property names in property initializers.

That mattered, because this JSX:

<div class="foo">howdy</div>

...transpiles to this with React's default configuration:

React.createElement("div", {class: 'foo'}, 'howdy')

...which is invalid in ES3 and earlier (because class was a future reserved word [and is now a keyword]), but valid in ES5+.

Upvotes: 10

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85545

Extending, it was from React 16.

On April 18, 2017, Facebook announced React Fiber as per this wiki. See the below note from the docs:

Fiber is the new reconciliation engine in React 16. Its main goal is to enable incremental rendering of the virtual DOM.

Read more about this in the doc itself. Also watch this video. And if you have some more time, watch this video

Also, take a look at a note from Dan Abramov:

Fiber is not a new React API. The internals have changed, but the API stays the same. There are virtually no breaking changes in React 16 associated with Fiber itself.

We do have some breaking changes in React 16 (such as moving createClass to another package). They are completely unrelated to Fiber, and are part of our regular deprecation cycle. As described in the 15.5.0 blog post, we provide automatic scripts (“codemods”) to update your code from deprecating APIs, and give you time to migrate. If you don’t see any warnings when using 15.x, it means your code is ready for React 16 when it comes out.

And read more on New Versioning Scheme and a blog more about React 16.

Upvotes: 0

Dinesh Pandiyan
Dinesh Pandiyan

Reputation: 6299

From React 16.

There is a new set of changes code named React Fire in proposal. class might work now with React 16, but will still show a warning message in the console. But in the future (hopefully in React 17), class will become the de-facto way to write class names.

This is an extract from the proposal

className → class This has been proposed countless times. We're already allowing passing class down to the DOM node in React 16. The confusion this is creating is not worth the syntax limitations it's trying to protect against. We wouldn't do this change by itself, but combined with everything else above it makes sense. Note we can’t just allow both without warnings because this makes it very difficult for a component ecosystem to handle. Each component would need to learn to handle both correctly, and there is a risk of them conflicting. Since many components process className (for example by appending to it), it’s too error-prone.

More here,

https://github.com/facebook/react/issues/13525

Upvotes: 4

Related Questions