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.

Echo JS稿源:Echo JS (源链) | 关于 | 阅读提示

本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 移动开发 » A Solution To The React className Controversy

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录