Skip to main content

High level

src
|----- assets
|----- components
|----- consumers
|----- context
|----- environments
|----- hooks
|----- layouts
|----- localization
|----- typings
|----- pages
|----- router
|----- services
|----- styles
|----- types
|----- util
|----- App.tsx
|----- index.html
|----- index.tsx

  • assets contain images, icons, fonts and other static files...

  • components - contain reusable and shared React components

  • consumers - common pieces of separated, reusable pieces of code which are used for some cross-cutting, repeatable situations

  • context - global contexts

  • environments - configurations for different execution environments

  • hooks - reusable hooks

  • layouts - common layouts which are used throughout the app

  • localization - translation and i18n related stuff

  • typings - various TypeScript types (interfaces) used throughout the app

  • pages - a collection of different application pages

  • router - common pieces of logic and configurations used to configure routing throughout the app

  • services - common api services used throughout the app

  • styles - global styles, themes, responsiveness helpers, other utils...

  • types - TypeScript configurations which enable TypeScript to recognize different file types - prone for discussion

  • util - common utils

  • App.tsx - main App component

  • index.html - HTML file where the app is injected

  • index.tsx - application entry point, the app is rendered into the HTML here

  • another viable option for storing configurations, typings, constants and so on, for larger projects is within the lib folder, like in this project structure example

  • NOTE - regarding module bundlers such as Webpack - we'd like to avoid maintaining our own configuration if possible, especially for smaller projects, and use automatic builders such as Create React App or Next.js