Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Naming Best Practices for React Components and Functions Including Filenames

Tags:

reactjs

I notice that a lot of projects name their react components with uppercase class names and lowercase filenames. Why would that be different?

like image 900
Pete Avatar asked Nov 03 '18 14:11

Pete


People also ask

Should React component filenames be capitalized?

And React components must be uppercased In JSX, so an uppercase filename keeps the component name and filename in sync.

How do I organize React component files?

Open the component's file and start editing away. Then you need to edit your styles, so you also navigate to your styles folder, find the button and open that. Now the component is updated, the tests are broken and some stories need to be updated. You navigate to those respective folders and open tests/button.


1 Answers

I believe that would not be the best practice. The filename should be the same as the React component's, and should be written in PascalCase.

For instance: Navigation.jsx exports Navigation

Further reading about naming conventions:

  • Stackoverflow question

Bonus: Structuring files and folders in a React project:

  • Yay, Hackernoon again!

  • Alexis Mangin's post

  • You probably don't need to read this if you don't use redux, but it has a good comparison between function-first and feature-first grouping techniques. Alex Moldovan's post

Edit: From nextjs official website

Next.js will serve each file in /pages under a pathname matching the filename.

For example, /pages/about.js is served at site.com/about.

Therefore in case of Nextjs, they wanted to separate component and page files as page files are used for routing.

like image 92
Brian Le Avatar answered Nov 15 '22 14:11

Brian Le