What should one consider before starting a ReactJS project?

After doing a few projects, I realized how important it is to plan a project before even starting to code. Here I will share a few tips with you and also remind future me to follow this SOP before starting to code.

First and foremost, plan your hosting platform

It doesn’t matter if you decide to go with free hostings like Infinity Free, 000webhost, and the like, or if you decide to go with paid hosting like Hostgator and so forth. Paid hosting is, in my opinion, easier to deal with. Since it is “paid”, you don’t really have to worry too much about things like SSL certificate, availability of certain back-end languages, bandwidth, and the list goes on. Therefore in this post, I will focus more on free web hosting.

I assume everyone already knows about static web hosting like Netlify and Heroku. If you are planning on creating a web application that doesn’t require databases and all those back-end stuff, static web hosting is good for you. But if you need your web app to connect to the database to retrieve stuff, static web hosting is not for you. The first time I was doing a web app project that requires using PHP to connect to the MYSQL database, I thought I can host my web app on Netlify and have all my back-end stuff on Infinity free but it turns out you can’t. This is because Netlify uses HTTPS protocol whereas Infinity free uses HTTP protocol. If you request data from Infinity free’s server, you will get The page was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint error.

This means that I have to find free web hosting that provides me with a free SSL certificate. Of course, there isn’t (or at least I couldn’t find it at the time). If so, the only solution is to npm run build my react project and then host it onto Infinity free’s server alongside my PHP files.

This is a very tedious process as you will have to re-npm run build your project and then reupload to the server. But beggars can’t be choosers, right? I mean, you want free hosting so these are the stuff you have to live with.

Next, file structure

When you create-react-app it will automatically create several files and folders for you. All react developers will know to put all the components in a component folder, all the pages in a page folder, and the like.

Furthermore, if you are planning on creating a big web app with a lot of pages and a lot of components, and a lot of components linked to a page, I believe it is best to put all required components for, for example, a page, into a folder next to the page file.

For instance, if you create a page named homepage.jsx, it will have components like navbar.jsx, sidebar.jsx, cards.jsx, and the list goes on. I will recommend one to have a folder inside pages folder named homepage_components and have all components for homepage.jsx inside the folder like so:

/src
  /pages
  /homepage_components
    navbar.jsx
    sidebar.jsx
    …
  homepage.jsx

This way it will be easier for you to find a file while coding.

I recommend one to put all back-end code in a folder called API. The way I link my front-end and back-end are with Axios, which is like .fetch but better. I recommend running npm run build once and put it inside the build folder. This is if you are going for free hosting. If you are going for paid web hosting, separate the API folder from the project directory like this:

/api
  /includes
  login.php
  signup.php
  …
/your-project-name
  /node-modules
  /public
  /src
    /components
    /pages
    app.js
    …

This is because in my opinion, requiring to npm run build the reupload is too tedious. If you host on Netlify or Heroku or any static hosting platform, all you need is to push it to Github to the platform’s branch and it will update the site for you. And if you want to change the back-end code, it will be easier for you to change. Trust me.

Conclusion

The whole process is like this:

Fyi, if you disagree with me, feel free to leave a comment and tell me what you think!