Joshua Jansen
Joshua Jansenjoshuajansen

👨‍💻Complete third week of JavaScript30 (but in React)

Completed on
Discussion
@joshuajansen How's JavaScript30 in React going? Are you using create-react-app at all for this?
@tieujustin I’m well on track with doing 1 on average every day (first 16 done). 😄 It’s quite fun! Some exercises are more interesting/relevant than others, but the repetition is good. I am using create-react-app for every new exercise, yes. Is there a better way to do this? Related question: what is (if any) the recommended way to share dependencies across projects instead of every projects having their own node_modules folder. Is it a common practice to share dependencies like other package managers (like bundles) do?
@joshuajansen Great to hear! I would have done the same if I were in your position and do a create-react-app for every application. Alternatively, I would have considered using a router for different views (1 view per day). As for your question about node_modules, I don't have a recommendation for that. I have this problem today with two create-react-app projects I work on.
@tieujustin cool! Thanks for you reply. The router approach sounds reasonable indeed! I guess the shared node_modules is only an issue when you're creating 30 react apps in 30 days 😅 What kind of (React) projects are you working on?
@joshuajansen The only React projects I am working on at the moment are for work. They're a mix of dashboards/administration pages. I do plan to build other projects on my own later. I haven't quite figured that out yet.
Upvote (1)Share
21 down, 9 to go! @tieujustin I did switch to a router approach as you suggested instead of creating a new react app for every exercise (it got a bit out of hand with the project size approaching 3GB 😅). This did cause some challenges in terms of styling: every exercise has its own layout and body styles. So for now I went with simply setting a class name on the HTML tag when an exercise gets mounted and scoping the exercise's CSS under that class name. But there must be a nicer way to handle this. If anyone's interested here's my messy code. And here's the actual results.
Upvote (1)Share
@joshuajansen I thought about how you might have a nicer way to handle your CSS. I wanted to suggest for you to look into styled components, but after looking at your code it might not be the best thing for this 30 day activity. It is still something you should consider after you finish this 30 day activity because I find reusable styled components more manageable than a long list of various CSS files and needing to remember various CSS classes.
@tieujustin yeah this 30 day thing is no average web app of course. Using styled components would make a lot of sense to me! Will do that for the last 9. Thanks!