Naming Best Practices for React Components and Functions Including Filenames

Question

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

Answer 1

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.

Answer 2

I think is that the same as all javascript frameworks, that should be

• Presentational and Container components are kept at src/components Group components by module/feature.
• Keep generic components inside src/components/UI Keep screens simple, with minimum structure and code.
• List item Group screens accordingly to route definition. For a route /user/list we would have a screen located at /src/screens/User/List.jsx.

something like this Finally, our application would be structured like that

here is a valuable resource to take as reference

---