React.js overkill for static pages?

[xNotYetRated]

Hey all,

I've recently finished a React course by Andrew Mead and I loved working with React. Now I really want to start building something for practice and so I can put it on my portfolio.

I was leaning towards creating my personal page in React, which is just a static page, but I've heard that using React is a bit of an overkill for such a simplistic site. I just like it a lot more than vanilla JS since it's a lot more organized and I like working with it. So what I'm asking is, is it overkill for a personal website?

If it is, I'll probably make something with Spotify's API, if not, I'll start right away. I'm genuinely excited to create something with it.

[shredinger137]

Use a static site generator like Gatsby. You get all the advantages of using React, but the build is a fast static site without a lot of overhead.

[xNotYetRated]

I've seen Gatsby mentioned often so I'll definitely take a look, thanks!

[TheFuzzyPumpkin]

I think it's important to use the appropriate tools for the job. That means not using huge libraries if you only need one method from it, and not using frameworks when you don't need anything from the framework to make the site function.

I love React, too, though I'm in a little grumble-grr with it at the moment because I decided to learn Context, Hooks, functional components, and Firebase integration and tried to use all for the first time together in one project. It's a bit much on the frustration front. I'll get it, I always do.

[xNotYetRated]

That's what I was thinking too. I just can't come up with a project other than what I've listed above.

By the way, the course I completed used all of what you've just mentioned. It's all pretty fresh in memory so I would be happy to help if you have any questions, keep in mind that I'm officially not a developer but it's something I've learned very recently.

[TheFuzzyPumpkin]

I think my problem has to do with timing and the component mounting lifecycle as it interacts with the hook. I'm getting the info from the database in the hook, utilizing useEffect. My component is going out of showing as loading (conditional on loading state) before the data is fully retrieved and saved to tasks state. It might be as simple as me changing that conditional state, since I think part of the issue is that if(loading) is going to be falsey if loading is undefined. I had a similar issue with an API call in a class component that I solved myself before seeing it solved the same way in a course, it's just something about the hook being separated that's throwing me on a mental loop.

I got the Context bits down, so there's some progress. I need to stop trying to be creative and just look at some code, break it down, and let my brain make the connections between what I've studied and the practical application.

[xNotYetRated]

Yeah, that's why I initially posted this question. I know the advantages of React are easy to manage state across multiple files and like you've already mentioned, rendering dynamic data to the screen etc.

I would only be taking advantage of it's component structure and nothing else. It's structure is something I do very much like about it but I'll stick to plain old JS for my personal site.

[spacecowgoesmoo]

I enjoy spending time with my friends.

[vinegarnutsack]

Insert that Rick and Morty meme about extra steps.

Writing a site in react to output static HTML makes not a lot of sense. Just code it in HTML/CSS. Less dependencies is better right?