React App’s Application Development

The main components of the app

As seen in the previous articles, React is all about components that interact with each other.

This app is split in the following way:

Screenshot 2019-03-14 at 10.15.41

  • the Header at the very top
  • App, the main container, fetches the data from the API, and renders :
    • the SearchBar which allows the user to search for recipes.
    • the RecipeList (which renders RecipeItems), which is empty before the user searches for an ingredient, but displays the results from RecipeList & RecipeItems once the user presses Enter.
    • ReactModal, which is a modal box showing the list of ingredients needed for each recipe. It opens when the user clicks on each recipe image.
  • the Footer
  • The Index file, which renders Header, App and Footer

Screenshot 2019-03-18 at 09.38.32

Screenshot 2019-03-13 at 16.23.35
ReactModal shows the list of ingredients for each recipe

At first, I had some styling done in CSS and other done in JS, as I wasn’t so familiar with it and wanted to practice. However, after asking my teacher what he preferred, and his answer being “it doesn’t really matter to me, as long as it’s consistent”, I decided to move everything to CSS, as having it split half half wasn’t exactly consistent…

For the modal box, I installed a package called react-modal. The difficulty I had was to display the data (ingredients) on separate lines, as it was all stuck together on one line like this:

Screenshot 2019-03-19 at 11.08.36

I’m not very happy with the solution I came up with, but everything else I tried failed (like map and split and the for loop).

Had I had more time/knowledge, I would have liked to look more in details into adding infinite scroll to my page, but I guess that’s something I can come back to in the future to practice.

I would also add an option to show only vegetarian or vegan recipes, maybe using radio buttons like I had done on my Spotify Battle App.

Another thing I would do differently is the App.js page: there is way too much going on there so I would try to split it into more and smaller components (like try to have Modal as another file).

I would also have liked to add an indicator to let the user know the page is loading, as after searching for an ingredient, it sometimes takes time for the data to appear on the page and since nothing happens, the user might think something has gone wrong.

I have found that doing the free React course on Codeacademy on the side was very good, it’s well explained and the exercises are easy to follow.

Even though I found React less difficult than JavaScript, I still have a LOT to learn! But since I’m actually not hating enjoying it this time, it should be fun. So the plan is to start doing more projects on my own.

If you want to check out the app, click here

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s