A Solution To The React className Controversy
Semicolons are optional. Kind of like brushing your teeth is optional.
The tech community is no stranger to controversy. Just the other week I was faced with an extremely awkward and difficult situation when someone I thought was a close friend (who I won’t name) suddenly proposed that you don’t need semicolons in your JavaScript. This is the same person who had once so eloquently stated, “Semicolons in JavaScript are optional. Kind of like brushing your teeth is optional.”
Oh the betrayal! People can be so cruel.
Another one of these very difficult and sensitive topics is the use of className instead of class in React.
Introducing Simple React Snippets: class to className
Nearly everyone has heard of the world famous Simple React Snippets for VS Code. The set of React Snippets that is so good, Ryan Florence once said…
And now, Simple React Snippets is even better because it has solved one of the most contentious, difficult and time consuming tasks in React. Changing class to className.
A Painful History
For years, people have toiled endless amounts of seconds meticulously hand-editing text, or using Find and Replace to change class to className. Like when they copy in that markup for the Bootstrap Navbar. You know you do it. The most difficult thing in computer science is remembering the Bootstrap Navbar markup.
But this is not 1776. We not worried that Pa is going to die of the Consumption. We don’t go to bed when it gets dark because we have ELECTRICITY, and we don’t have to use Find and Replace to change class to className because Simple React Snippets will now do it for you.
How It works
Simple React Snippets uses a very complicated and advanced algorithm to find any instance of class and replace it with className. I would divulge the Regex that is used, but it would likely melt the internet. Also I wrote it and I don’t understand it at all BECAUSE ITS REGEX. All I know is that it works and I’m not going to touch it.
Copy in your markup. There is a new command in the Command Palette (Cmd/Ctrl + Shift + P) and type “class”. This will bring up the “React: class to ClassName” command. No need to highlight any text; it works on the whole file.
And just like that we have rocketed light years into the future of computers. We’ll look back on the days when we actually pressed Ctrl + F and marvel at how anyone survived at all.
We Can Do Even Better
I think we can do even better than this. I’ve looked at making this work automatically on copy and save, and I can confirm that it works. Although I feel a little guilty about modifying your code without you specifically asking me to do it first. It feels kind of like I’m inviting myself into your house.
In any event, I’ll continue to work on that portion and once I’ve ironed out the edge cases, this generation might be the last to know the pains of having to change class to className.
What a time to be alive!
Grab Simple React Snippets from the VS Code marketplace or just update them if they are already installed.
Satire Disclaimer: This article is mostly sarcasm and poor attempts at wit. Changing class to className is a marginal detail at best and is not the center of any controversy. My un-named semicolon-hating friend, on the other hand, is still wrong.
