Setting up New Project - TwoGears/hakomo-guides GitHub Wiki

React File Structure & Rules

“MOVE FILES AROUND UNTIL IT FEELS RIGHT”

-Dan Abramov

Advantages:

  • We don’t have to discuss and argue on project structure every time, instead we can focus on building the product;
  • Having a convention for project structure is one less decision to make;
  • People with less experience can also build scalable projects;
  • Code sharing + reuse is increased as a more modular structure is created;

Goals for a good project structure:

  • Searching files in VS must be easier;
  • Moving files should be effortless;
  • Structure should encourage scalability, but also reusability;
  • Structure should be simple enough for new team members to quickly get onboard and dive into the project;

Types of grouping

1. By File (small projects):

2. By Features

3. By Views/Routes (Hakomo way)

Once your project begins to grow, you might want to introduce new concepts to it. It could be natural to introduce a concept, such as "feature", between the views and the components.

What to have in mind when create our project structure:

  • Avoid too much nesting;
    • harder to write imports;
    • limiting to a maximum of three or four nested folders in a project;
  • Don’t overthink it;
    • don’t spend more than 10 minutes on choosing a file structure. It may lead to Analysis paralysis* :)

Analysis paralysis (or paralysis by analysis) describes an individual or group process when overanalyzing or overthinking a situation can cause forward motion or decision-making to become "paralyzed", meaning that no solution or course of action is decided upon. A situation may be deemed as too complicated and a decision is never made, due to the fear that a potentially larger problem may arise.

A good rule of thumb is:

Colocation - it is a good idea to keep files that often change together close to each other

Rules

  1. Use linters (esLint Airbnb standards); √
  2. Use PropTypes and defaultProps; √
  3. Do not put functions (especially data fetching) in Constructor (the right place is in ComponentDidMount); √
  4. Define variables that will be in the state in the initial state; √
  5. Name your file the same as the thing you're exporting from that file
  1. Bad practice: √
  2. Discuss using Airbnb design/styling pattern; topic
  • example: button with props. 1kb and then grows to 33kb over time.
  • Solution: extend components. mini styling for components.
  1. Styling - CSS in JS: topic
  1. Use one-of-ten scale for how important is something. Package, or strategy...
  2. Imports ordering
  • react;
  • libraries;
  • components;
  • services;
  • constants;
  1. Functions order: Linter
  • lifecycles;
  • logic;
  • events;
  1. .js vs .jsx extensions - facebook recommends to use .js instead of .jsx √ (.js)
  1. Index file for utils:
  1. Only Component’s file name should be in Pascal Case.
  2. If a component is placed in a separate folder, then the name of the folder and the name of component file should preferably be identical (folder not capitalized). This way when we search for files, we don’t get a list of index.js but the actual component files.
  3. The routing logic should be kept inside pages directory, the reason is that route logic is mostly non reusable, means page components are not reusable.
  4. Filename for page components should be camelCase - The page name corresponds to the route name. Route names in url are camelCase, it makes sense to have the file name camelCase also. ???
  5. Use Presentational and Container component pattern - Presentational components are those who don’t have internal state. Their role is to show certain pieces of UI. Container components are those which deals with business logic. √
  6. Discuss sharing cross project components (Bit); dobri: Skip
  7. Move code in separate component if:
  • your code’s functionality becoming complicated/convoluted/unweildy
  • it represent its own thing
  • going to reuse your code √
  • don’t make 500kM small files.
  1. Use Why-did-you-update package notifies you in the console when potentially unnecessary re-renders occur. (before/after). When this happens we should use PureComponent rather than a Component to prevent things from having an unnecessary re-render.
  2. Use Snippets

improve from previous projects

  • context
  • hooks?
  • testable code - tedi tell us
  • write tests (petar is not sure about it)
  • pull request
  • css in js