Interactive Card Component with React

What are you most proud of, and what would you do differently next time?

This was my first solution using React. I learnt a lot and I am happy that my component is de-coupled from the webpage as a whole - meaning it should be easy to re-use the component elsewhere with very little work.

Next time, I might look into something such as CSS Modules or perhaps Styled Components to help organise my styling and prepare me for larger projects.

What challenges did you encounter, and how did you overcome them?

I was very confused with how CSS is imported into JS when using React. I was not sure what was a native JS feature and what was not. I did some reading and found that importing CSS is a feature of the bundler which React invokes. It makes sense doing this because it associates a component with its dependencies, making it easy to figure out exactly where the styling for the component is coming from. I still feel that it is a little bit confusing overloading the import keyword in this way though - as it isn't really an import in the sense that we usually use it.

What specific areas of your project would you like help with?

Up until now, I have always used a link element in my page head to include fonts. The problem is, I want my React components to be encapsulate all of their related dependencies so they are properly modular. Reading around online, people seem to warn against using a CSS @import as it is slower than a element. I have gone ahead and used the @import because it keeps my font dependency for the component together with the component itself. Is this the recommended way with React? Does the bundler do some magic with the CSS @import when using React? I'd greatly appreciate if anyone could explain this a bit better or generally give me some advice.

Cheers