I notice that a lot of projects name their react components with uppercase class names and lowercase filenames. Why would that be different?
And React components must be uppercased In JSX, so an uppercase filename keeps the component name and filename in sync.
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.
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:
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 atsite.com/about
.
Therefore in case of Nextjs, they wanted to separate component and page files as page files are used for routing.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With