Beginning of Something great
I like javascript, but you can only write so much javascript that you start to forget where things are and this is where most bugs in your projects come from. The structuring of your project can make or break your project! But thanks to the smart Devs over at Facebook, they created a framework that was designed to be easily maintained and easy to find what you are looking for. This framework is called ReactJs. React uses components that can be reused anywhere in your project, which means not having to rewrite a lot of the same code again and again, and you can keep each component in their separate files so they are easier to maintain.
React’s ability to easily customize each component made it the perfect framework for a project I had in mind. If you have been to any restaurant, you’ve most likely have seen that they now offer a “virtual menu”, this mind sound greate at first but once you see their “virtual menu” you realize that it’s just a regular pdf of the physical menu and nothing special at all. What if restaurants had a more interactive “virtual menu” where the customer will be able to see more information on the food that they are about to order? My project is just that! It is an easily customizable virtual menu that would be perfect for small restaurants or even big chains.
At first, when starting the project everything seemed like it was going well. All the components were rendering correctly but it all went downhill once I started to refresh the page. When I’d refresh the page some of my component’s text would appear as undefined, and the errors in the console would not make any sense at all. This is because of how javascript works, with its asynchronous behavior that some functions are going to run before others. At first, I couldn’t figure out how I can tell my functions to wait till another has finished running without rewriting all my code. That’s when I remembered that a lot of websites use a loading feature to wait for the data to be available to show. So I created a function that will check if the data returns “undefined” and if it does I would have it return a gif of a loading circle. At first, I didn’t think it wouldnt work, that I would need to figure out a way to show the correct information back once it’s done loading, this wasn’t the case at all, thanks to ReactJs and how it renders any changes made to anything in the component, I didn’t need to do anything else.
Overall working with ReactJs is fun and extremely easy, there is almost no learning curve to it. I highly recommend using ReactJs for both small or big projects. It’s so well documented and constantly being worked on, so any issues found will be fixed instantly. And if you ever wanted to convert your project into a mobile app, you can easily do it with react native, which is something that I will be doing for my next project.
