Skip to main content

architecture-folder-setup

Architecture and Folders:#

  • Atomic Design: Atomic design is a methodology that breaks down user interfaces into smaller, reusable components. These components are categorized as atoms (basic UI elements e.g buttons, icons, inputs), molecules (combinations of atoms e.g card item), organisms (larger UI components e.g card list), templates (arrangements of organisms e.g layout with header, footer and card list), and pages (final layouts).
  • Architecture : Component hierarchy (deciding on parent and child components)
  • modular archecture (using features folders in react or Pages folder)
  • publishing shared components as npm library
  • keeping components as small as possible; diff between presentational(just for view) and container components(to keep business logic)
  • Scalability (MFE, publish npm library, modularise)
  • webpack bundling and minifying
  • Use facade design pattern to create a wrapper on third party libs so that they can be easily replaced with a new library if its required in future without much hussle in the core code. (e.g ets say using axios to make api calls but want to replace with sth else in future)
  • component api design
    • render props
    • passing style object
    • passing className so that internal section of components can be styled