We use aliasing for our file paths so that we can easily nest components and not have to worry about traversing our files with the correct ../../../ The aliases depend on the project but you will see that for something like shared hooks in the mobile app you can just to this from anywhere in the app.
import { MyCustomHook } from 'hooks/MyCustomHook'
When creating reusable components in our React projects we use the atomic design principles to help us think about and create components in a more reusable way. Here is a good article about atomic design within React.
When creating a new Atomic component there are a few things to consider.
Component Driven User Interfaces
Make these components as dumb as possible. We want these to be reused anywhere in any situation.
Atomic components should not have any built in margins or positions. These components are always positioned differently so we have no default positioning. Either the parent positions it or you pass in styles at render to do the positioning.
Make the props specific to what it does but not too specific. For example if you were building a component that rendered a currency amount. You would not want to call the amount prop cryptoAmount because inevitably we are going to need to render fiat with the same component so we should keep it generic and call it amount.
// Bad
<Price cryptoAmount={cryptoAmount} />
<Price cryptoAmount={cryptoAmount} fiatAmount={fiatAmount} />
// Good
<Price amount={cryptoAmount} />
<Price amount={fiatAmount} />
We use Storybook for component documentation.