re: An Opinionated Guide to React: Folder Structure & File Naming VIEW POST


I see you have /components for shared components and /pages for the exact page matches, but what do you do with one-off components? For example, a Contacts.jsx page has a ContactList component. It’s not a shared component, but it’s not a page, either. I suppose in this design those components either are flattened into the one page component or live as a separate component but in the same file as the page. Is that correct?


That's correct! I will split up my page into sub-components, all within the same file as the page.

import * as React from 'react'

export const ContactsPage: React.FC = () => {
  return (
      <ContactsList />

const ContactsList: React.FC = () => { ... }
Code of Conduct Report abuse