'Is there a way to standardize React files structure?

I wonder if there is a way to standardize how our React components look. I know it might be a dumb question and the straight-up answer would be no. I want that the default exported component be at the top (below the imports). Like this:

import styled from 'styled-components';

const MyComponent = () => <StyledDiv>Hello World</StyledDiv>;

export default MyComponent;

const StyledDiv = styled.div`
  color: red;
`

I wonder if there is a way to achieve this? In my team, there are a lots of inconsistencies where people put styled components at the top and sometimes at the bottom, etc. If there isn't a way to do this, how would you achieve consistency?



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source