Hi,
I am styling my first React app and noticed that a lot of projects on GitHub use classes that start with a capital letter - an example below. Is that a best practice? I have never seen it in any documentation. I know that components must be capitalised but why also the classes?
<button {...props} className={["Button", className].join(" ")} />
Thank you,
Yes, it’s called PascalCase, as opposed to camelCase - the difference being the first letter.
Different languages have different conventions about how to capitalize various things. In JS we use PascalCase for classes and object constructors (which have a lot in common with classes.) With certain extensions, types, interfaces, and enums are also PascalCased. I assume that when React first started out, components were classes and the general thinking was OOPish so they went with that convention.
Does React care? I don’t think so. But the coders with whom you work will care, so just stick with the convention.
Now that I think of it, I do seem to remember some confusion caused by a dev not PascalCasing a React component, but I can’t remember if it was an actual code problem or just a linter issue.
I know that components must be capitalised but why also the classes?
Just to be clear, what is the distinction you are talking about between classes and components?
In React, classes are usually used as components. True, you can have classes that aren’t components, sure. But remember that there are two kinds of components in React: class components and functional components. It used to be just class components. Then there were also functional components but you still needed class components for the difficult things. Now functional components are all growed up and can do anything a class component can so many developers don’t use class components much anymore. (But they’re still important to learn.)
Sorry, I think I wasn’t clear enough. I mean HTML classes (className in React) the ones that we use for styling purposes. The default App.css file that is being automatically created when we start a new React project also has them capitalised and I don’t understand why.
That’s the convention being used by the react team, you can read a bit more about it here: reactjs - React className naming convention - Stack Overflow
It is not a requirement, but some teams do prefer to use PascalCase classNames. Something to be aware of, they’re perfectly valid, but isn’t usually a deal-breaker. When you land a job, ask your team about a style guide, which should usually include things like naming conventions. If they don’t have one…help them make one!
It’ll be because they’re matching the name of the class to the name of the component, so if your component was called MyComponent the name of the associated class is called .MyComponent. it’s just a choice that the author of the code has made.
It’s quite common when you use a tool that lets you use import with CSS files (Create React App, for example, has a tool that lets you do this set up to use out of the box). But it’s just a convention, it doesn’t do anything special code-wise. It makes it easier to see which files are associated with which component if you’re searching for things, for example.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.