what's The next step for a static React js app ?

With no background in React and the so little information I have, I managed to push a static one page website.
It's a slightly "Hello World" look alike, yet I just wanted to put it up to force myself to commit. I have a terrible case of overengineering and shiny new stuff syndroms, so please be nice in judging the code 😊😊 .
This is the repo: https://github.com/Haamida/Sneaky-React

Coming from a Symfony and php background where the front and back are tightly close, I figured that the next step for this front is to link it to a backend where we receive the reservation and newsletter inscriptions. I still have no idea how to it and still doing the research, any insights are appreciated.

Comments

[Sung M. Kim]

You could write a static site by hand but as far as I know the effort to emulate static site generators such as Gatsby or Next.js (Vuepress for Vue) are pretty tough and requires a different code structure (and data structure for Gatsby as Gatsby requires you to use GraphQL).

To move onto the next step to migrate your "Sneaky-React" (🙂) you might want to check out aforementioned static site generators or other Static Site Generators site.

And I've noticed the code base that most of events are handled using Unobtrusive JavaScript way using jQuery. With React, you probably would rarely need jQuery in your React SPA and try to use built-in DOM methods such as document.querySelector/querySelectorAll and then completely remove those selectors later on (you would rarely ever need to them in React).

Yes, it's tough to wrap your head around 😅 but I believe understanding how React works and write in more React way (declarative as opposed to imperative) might help before moving toward a static site generation.

And also you might want to totally separate the frontend from the backend code to get started (Please let me know if this would not be a good idea as I am not too familiar with Next or other SSR React frameworks)

[Hamida]

Oh I see, by static I didn't want to refer to Gatsby or alike solutions (that's what comes out when I think in french and write in english 😅) , I meant that as far, my webapp do nothing but display some data with no iteractions with the user or the server.
That being said, as am still on baby steps with react, I think its still early for me to venture into SSR frameworks.(trying realy hard not to jump into the next shiny thing with no proper knowledge in the current thing)

[Sung M. Kim]

I'd have hard time with Symphony before learning PHP (, which I've never used before) 😉

[Hamida]

I feel you with that.I see you already have an up and running app in React
( bunpkg.com/ ) it's pretty interesting, what did you use for it's backend side ?

[Sung M. Kim]

Thanks~

I used Node Express.js for the backend - github.com/dance2die/bunpkg-server

And it's published on Heroku free tier (so the first request takes awhile 😅)

[Ayja Weems]

Hi Hamida,

I'm pretty new to React too(4 months deep)! After I built my first static React app, I wanted to learn how to integrate some backend stuff with my app too. I wanted to use MongoDB, and this article is pretty great: medium.com/@dinyangetoh/how-to-bui...

Let me know if you try it out!

[Hamida]

Thank you Ayja, I will get back to you as soon as I try it

[DeChamp]

Keep learning. I saw what you did so far and your on a good track! Aim to make an api for your front end. I’m php based too but now heavy nodejs and react.