I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
I only have an older repo to share, and honestly I would probably refactor the code a bit today, but feel free to take a look at it at: github.com/LarsEjaas/bruce-willis-app
I am unsure that there is a best practice regarding separating code into separate files or not, but I like to do it this way. We use the same approach in the team where I work.
Let's say I am doing an "awesome button"
Then I would create a folder named AwesomeButton in the components folder.
This would contain:
AwesomeButton.tsx for the functional component,
AwesomeButton.styles.ts for the styles,
AwesomeButton.test.tsx for the tests and maybe
Awesome.stories.tsx if you use storybook.
Furthermore I would make an index.ts file where I would export the functional component like this:
export {default} from AwesomeButton.tsx
This way I can import my AwesomeButton component like this inside my project:
import AwesomeButton from 'components/AwesomeButton'
I think this pattern works well for large projects.
I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
Full stack developer & undergrad student of Mathematics; very passionate about both. Enthusiastic about learning, teaching, writing, open source, linguistics and more.
I love coding and what motivates me is problem-solving and preferably if it has an element of creativity.
I am a self-taught developer and work full-time as a front-end developer.
Location
Denmark 🇩🇰
Education
Bachelor in Nutrition and health (I know not super relevant to my current line of work!)
Hi Nitzan
I only have an older repo to share, and honestly I would probably refactor the code a bit today, but feel free to take a look at it at: github.com/LarsEjaas/bruce-willis-app
It's a small page/web app - it's live here at bruce-willis.rocks/en
I am unsure that there is a best practice regarding separating code into separate files or not, but I like to do it this way. We use the same approach in the team where I work.
Let's say I am doing an "awesome button"
Then I would create a folder named AwesomeButton in the components folder.
This would contain:
AwesomeButton.tsx for the functional component,
AwesomeButton.styles.ts for the styles,
AwesomeButton.test.tsx for the tests and maybe
Awesome.stories.tsx if you use storybook.
Furthermore I would make an index.ts file where I would export the functional component like this:
This way I can import my AwesomeButton component like this inside my project:
I think this pattern works well for large projects.
Ahh, missed the part regarding tag-specific variants:
I use both of these:
and
Thanks a lot for your detailed response!!!
This will be of great help to me.
Ahh, you are welcome! Feel free to drop me a message if something is difficult with Styled Components. It can be a bit difficult at first...