How should component classes be named?

Question

How should component classes be named?

Answer

In addition to using UpperCamelCase to name component classes, there are a few other suggestions that you may consider when naming component classes.

Firstly, it can be important to name components in a meaningful and understandable way, such that the names reflect their purpose. This applies not only to React, but to any other classes and objects you name in a program.

In addition, to keep the files organized, it is good to keep only one component per file, and name files after the component they contain. So, if you named your file board.js, then the contained class is most likely named Board. This may not always be applicable, such as if a component is declared in the app.js file, however.

6 Likes

if you’re using multiple react files, do they all need to import React/ReactDOM or just the main file?

5 Likes

I understand that definitions are (were) as follows:
(1) camelCase starts with lowerCase and continues with ProperCase;
(2) PascalCase starts with UpperCase and has ProperCase throughout;
Isn’t the use of UpperCamelCase confusing things? Will it force us to use lowerCamelCase also?

2 Likes

Every new .js file needs to import React from ‘react’ first.

1 Like

Just to say now, with the new version of React, it’s not mandatory to call React from ‘react’ :slight_smile:

2 Likes

Whaaat!? :open_mouth:
Can you give a reference? Because according to the official documentation it is still required.

1 Like

Oh, my mistake sorry, after verification, it still required to use some Hooks, etc… But it’s not required anymore for every component to transform JSX into regular HTML/javascript. Sorry ^^

1 Like

Hmm… Thank you for the links. This explains certain phenomenon I have observed in my code, where, as it turns out, I have unknowingly written a piece of React code. :thinking:
I guess Bob Ross would call that a happy little accident :face_with_hand_over_mouth:

1 Like

UpperCamelCase and PascalCase are both names for the same convention.

Based on my Googling, CamelCase can refer to either the upper or lower version, though it usually refers to the lower case version. Here’s a Wikipedia article: Camel case - Wikipedia.