Build a food listing app with ReactJS
It all begins with a curiosity to learn ReactJS. Curiosity helps you achieve all the good things and it does the same with me. In this blog, we’ll create a simple react web app that will display a list of recipe/meal.
Requirements:
1. Basic understanding of HTML, CSS, Javascript, and ReactJS.
2. NodeJS, NPM and create-react-app.
3. Code Editor(I’m using Sublime Editor).
Note: Above list is quite easy to install and use, so don’t sweat if you are listening to these words for the first time.
Topics which we’ll cover in this tutorial:
Plan of attack:
- Create a React Environment using
create-react-app. - Developing components.
- Fetch data of API using Axios library.
- Using response of API populate our ReactJS components.
- Show off 😎.
Create a React Environment using create-react-app.
We’ll use create-react-app as our boilerplate for this project. If you don’t know how to get create-react-app follow the code below.
$ npm install --save create-react-app
Once create-react-app is installed, create a new app with create-react-app followed by project name.
$ create-react-app whats-in-meal.
Now to run this set up, get inside your app directory with cd whats-in-meal and run npm start in command line. Then open http://localhost:3000/ to see your app.
Catching up with API.
To display a list of recipes, we are gonna require an API which will fetch all the data from a database which is hosted on another planet(not actually). After running a marathon, I reached out to a site name TheMealDB. Its API section contains a list of various API requests from which I pulled out the one which will help me in displaying a list of meals.
https://www.themealdb.com/api/json/v1/1/latest.php Let’s Start Coding.
We’ll start with opening App.js in our code editor and remove unwanted code which at the moment is not required in our app. After removing unnecessary code from your App.js, it would look like this
First, let’s fetch the data from the API using Axios Library. You can make HTTP request using this library which runs on both client and server. Let’s install this library using
npm i --save axios . After successful installation, let’s import and configure this API fetching library in our App.js file.
As you can see on line 17, I am setting a state of our application with an API response.
Now we can start with building components in React. Wait? What is Component? What can I use it for?
Components in React are the reusable piece of code that is used to help in building web apps. In simple language, they are more like Lego parts with which we can create different shape toys. But first, let’s plan on how and what part of our application will be our components.
So, first create components folder inside your app under src folder. Then create three files with the name serving their purpose. Title.js, Image.js, and RecipeCard.js.
In RecipeCard.js, copy paste the below codes
In Title.js, copy paste the below code
In Image.js, copy paste the below code
And finally, call your RecipeCard component in your App.js file with following code.
What is happening above? In App.js, we have used RecipeCard‘s component which will have meals as its properties(Props) and the value data is nothing but the response from our API. Components other than App.js are for representational purpose i.e you give them some value they will give a proper structured UI. In RecipeCard, there are two components Image and Title which will provide us the recipe’s image and its name so that an overall card is rendered which was planned earlier.
Note: Components in ReactJS are used to create smart UI which are reusable piece of code and can be utilize anywhere in the application.
In your browser, you will see a list of a recipe with its image and name. Right now, your application needs to be properly styled. For styling your application, there are many ways to do in ReactJS. One of the way, which I personally like, is using the styled-components library. It lets you put your style in your component file itself. More details will be seen here.
So, after using styled-components, our code will change into something like this.
These are the final style change that we have to make and voila, our app is ready.
So after a lot of hassle, we are here at the end and our app looks very beautiful. You can pull the repository here.
Thank you for reading
Don’t forget to hit that clap button and share it with your friends and colleagues. In case of any doubts in this tutorial, please feel free to leave a comment.
