CODEWITHSUNDEEP
reactjsreact-native
Rajendra Khabiya
Rajendra Khabiya

Reputation: 2020

Reactjs code/naming conventions

Does anyone know if exists any official or most accepted reference for React naming conventions to use when we build our applications?

React has a lot of different type of components such as React.Component, directives, services and so on. Wouldn't you agree that having a reference naming convention when we implement them in our applications will make sense?

For example:

If we need to create new component how should we name them like [Something]Component or component[Something] or something else? And same applies for other classes.

Other things I wonder about is if variables/functions that belongs to the scope should have an special prefix or suffix. In some situations it may be useful to have a way to differentiate them from functions and other (none react code).

Upvotes: 8

Views: 19480

Answers (2)

Daniel
Daniel

Reputation: 15393

My understanding is that the React team is un-opinionated when it comes to naming conventions.

With that said, it is also my understanding that components that return objects or classes traditionally start with capital letters and its how we differentiate from a component or other file that is not a class.

So if you see src/components/Header.js, you immediately know its a class-based component and if you see src/utils/validateEmails.js you know its going to be a function and not a class in there.

I would also warn about the airbnb style guide because I just took a look at it and they encourage the use of .jsx extensions, yet if you look at the Reactjs documentation: https://reactjs.org/docs/react-without-jsx.html they say that jsx is not a requirement when building with React, you can just use javascript all day long, so really one can infer that creating components with just a .js extension is satisfactory. What also backs up that inference is that the engineers at Facebook, the creators of React, do not recommend the utilization of .jsx and Dan Abramov says that using .jsx made a difference in the pre-Babel days, but now its not necessary, we can stick with .js extensions. source: https://github.com/facebook/create-react-app/issues/87

Upvotes: 0

patngo
patngo

Reputation: 687

I'm a big fan of the airbnb React style guide. https://github.com/airbnb/javascript/tree/master/react They also have an overall JS style guide. https://github.com/airbnb/javascript

Upvotes: 8

Related Questions