Make a simple food blog using React and Contentful

in this video I am going to show you how to make a simple blog using react and contentful before we move any further let me show you the finished product of what we will be building in this video as you can see this is a super simple single page application that is made using react and it is being populated with the data that is written inside contentful in very simple terms contentful is a platform that lets you create and update the content of your website or a mobile application or any other platform that displays your content content 'fl saves you the time and hassle to create your own back-end like setting up the servers or creating any kind of a database it also gives you the powerful api's that you can use to fetch the content and display it in a front-end application like react as a first step let's start by creating an account in content full I already have an account in content full so I will directly login to contentful to show you the interface once you log into content full the first step you need to do is to create a space as a free user you are allowed to have two different free spaces or two different environments let's start by creating a free space so I click on this button and let me name my space I'll call it my space and I will create an empty space so let's click on the button proceed to confirmation and then click on confirm and create a space once the space is created we will now click on content model here we are going to create a Content model for our content so content model basically defines what kind of content are you going to create and contentful so let's click on the button that says add content type in my example I'm going to name my content recipes and click on create now I have to add some fields for my content so I will start by adding a text field and I am going to call it name this name will represent the name of the recipe that I am going to add it'll be a short text field and I will click on the create button I will click on add field button again and this time I'm going to choose media and this time I am going to name it featured image and I will click on create button again and click on add field again and this time I am going to call it description and it will be a long text field I will click on create button again and then I am going to save my content type now that we have the content model already created and saved we are now ready to add the content for our web application so we will start by clicking on the content over here and click on add recipes so let me start by adding the very first content which is basically the recipe for an egg croissant so I am going to enter the title which is the name of the recipe I am going to enter the description you will notice that the description is in the markdown format now I will add the featured image by clicking on this link over here click on the link and I am going to name this image that I am going to upload which is for egg quaza I will click on the file selector to upload an image click on open now this media is already uploaded so I will publish this media go back and now you see that the very first content is already there so we have the name for the recipe we have the featured image and we have the description which is the the method to prepare the recipe once you are satisfied with your content you can then come and click on this button and click on publish I will pause the video over here and I will add some more recipes to populate my web application now you will notice that I have added a few more recipes you can see the content section of content full where I have some four recipes added over here at this point I am ready to start working on my react application where I am going to fetch all this data from contentful and start displaying in my web application in react I will start by creating a folder on the desktop and I am going to call it recipes blog make sure the name of the folder is all in lowercase now I will open this folder inside my terminal so I will open the terminal window I will type CD and I am going to just drag and drop this folder over here and hit enter now I am in this folder and what I am going to do now is to install create react app inside the folder to do that I will type the command npx create react app and put a dot and then hit enter so what this is going to do is to install the create react app boiler plate setup so I can start using the react application right away once the create react app is installed I am going to open the project inside the visual studio code and I am also going to start the development server to start the development server I am going to use the command NPM start now let's head over to the visual studio code and do some initial cleanup so I am going to get rid of some of the files that I don't need for this project so the only files that I need is going to be app dot J's this app dot CSS and the index dot J's all the other files inside the source directory I am going to get rid of all of these files so let me get rid of app test index CSS the logo SVG serviceworker sent ups and set up tests so I am going to just delete these files I have to do some adjustments because I removed the index CSS so let me get rid of this the service workers as well and I'm going to get rid of this let's save this and the same thing I have to do inside the app dot J so basically getting rid of the logo and I'm going to remove this complete header with an h1 tag which says hello world save it and let's go to the browser and see if everything is good so far everything is good now I can start working on the on fetching the recipes and displaying it on my react application now I am going to use contentful as a dependency and I am going to install contentful by using NPM install content for once content full is installed I'm going to create a file inside the source directory and I am going to call it client dot J's so the first line of this file is going to be an import star as contentful from contentful now I am going to create a client Here I am going to setup and create a client that is going to use the content full api's to fetch the data from contentful so that i can consume it in my react application now at this point we are ready to set up the client so I am going to create the client using this statement Const client equals content full dot create client and inside I am going to pass an object that will receive two properties one is the space ID so you will enter space and here here it will be your space ID that will go here and the access token and for the access to can also hear there is something for the access token that will go here so where are you going to get your space ID and the access token these values you are going to get it from your content full account once you have your content full account you can go to your settings section so let me go to content full here you can see I am in the content section and I have all my content listed over here I can now go inside the settings section and then you have to click on the API keys now you will see there is an example key already created by content full this key is a default key that comes with with the content full installation let's say and either if you want you can use this key but for my for my example project I am currently going to use this key but after the video tutorial I am going to delete this one and I am going to recreate a new one and I highly suggest you do you guys do the same so basically you can go inside this section copy the space ID so let's copy this go to vs code and I am going to paste it inside the space ID and I will do the same thing for the access token which is also known as content delivery API let's copy this key and let's paste it over here now I am going to put an export statement so this client can now be imported by the app dot J's file and then we will be ready to import the content from content fill now before we move any further I would like to to let you guys know that the way we are entering the API keys in our react files this is not a very good idea the API keys are meant to be private and the way we can keep the files private is by creating by saving them inside the environment variables and this is how we are going to do that so basically you have to come inside the root of your project create a file over here and call it dot the NV dot development now inside this file you have to create and the two keys that we entered inside the client dot J's so basically we created two different different keys the space ID and the access token and inside the dot E and V dot development file we are going to use the same key so I am going to copy it over here taste it for the space ID and I am going to copy the access token and put it over here I will save this and now inside the client dot J's file I am going to remove these keys and instead use the environment variables that we just created so basically we will use react app space ID and here I'm going to call it process dot e NV dot react app space ID so this is how we access the environment variables inside a reactor application we will say process dot E and V and then the name of the variable so the name of the variable where I spit I saved my space ID is this one and this is the variable where I saved my access token so I am going to copy it and I will use the same thing process dot E and V dot and then I am going to paste this variable over here this way your keys are going to be private and they are not going to be publicly available to anyone so no one can steal your keys this is the good way now we are good to proceed now we will come to the app dot J's file and the first thing I am going to do is to convert this component into a class-based component so I am going to write class extends react dot component I am going to take this return from here and put it inside the render function perfect now what I am going to do is let me remove this h1 from here and instead I am going to put a div with a class name of container inside this div I am going to add a header and I am also going to add a main tag so our app header is going to go over here and the main content is going to go inside the main tag inside the header I'm going to add a div with a class of wrapper class name equals wrapper and the same thing I am going to do for the main tag inside the main there is again a div with a class name of wrapper inside the header wrapper I am going to put a span for now and I am going to just put a simple heading called react and content for and inside this wrapper is where the main content will go so the first thing that I am going to do is let me create a state first so I am going to create a state which is going to contain a property called articles which is going to be an empty array that means where I fetch the content and all this content will be populated inside the state articles so my class-based component this component app is going to have an empty state in the beginning and then I'm going to make the API call after the API call I will fetch the results and I will populate this articles array with that content and all the API calls inside a class-based component they are usually made inside component dead mount so I am going to write this function component dead mount and then I am going to use a function I'm going to use the client that I created in the file here the client dot GS so what I'm going to do is I am going to write client dot get entries and inside client get entries this is going to return a promise so we will write dot then and here we are going to have something called as dot catch and we will write console dot error if there is any error we will write it in the console and inside the then we will put an arrow function this arrow function will take response and as a first step we will simply log the the output into the console into the browser console so we will write console dot log off what we are going to get from the response so let's save this file and let's go to the browser to see what we see inside the browser console so here we see react and contentful that is being populated and we can see it here now if I inspect and inside the browser console you will see that we are receiving an object and it is coming from the line number 13 of app.js and it is exactly the same thing we are getting a response back which is an object and this object contains four items and as you can as you can see that inside content full we have we have four entries and I think these four items represent those four entries so we will go inside the the fields we will see the description we will see the featured image we have the name so that means we are getting the response perfect at this time I am going to apply some styling now in order to add the Styles I will just go to the app dot CSS file and I am going to replace everything with the styles that I have already created I have already created some styles that I have copied and pasted over here and for the body I am going to use a background image that I have already used from somewhere and it is called BG dot PNG so let me save everything let me go back to the browser to see how everything looks so far everything is looking good now we will go back to the app dot JS file and we will start populating the data we have already seen before that we are going we are making a call to contentful and we are getting the response back so far we have been logging the response inside the browser console but what I want to do at this point is to set the state so I will use this dot set state and I am going to set the state of articles which was an empty array I'm going to put response dot items so far so good now my articles which is inside the state is going to contain the the the data that that it is receiving from contentful now I will create a new component and I am going to call it posts so in order to create a component I will go inside the SRC I am going to create a new folder called components and inside the components folder I am going to create a new file called Post's dot J's this post start J's file is going to contain all the posts that it receives from contentful so I'm going to use the shortcut are a FCP tab it is going to create this template which is basically a functional component and what I am going to do here is it is receiving the props so let's save this now I will take this articles from here let me import the posts first so import posts from components slash posts I will take this posts component and put it inside the main wrapper so I am going to put posts and I'm going to pass em I am going to pass a prop called posts that will be equal to this dot state dot articles so once all the articles are populated inside my inside my app state I am going to pass this as a prop to my posts component so that means my posts component is then going to receive these props now it is going to be an array so it is going to loop over through them and then create a different post for each and every article that it receives now my posts component is already receiving a prop called posts so I am going to D structure that prop over here I'm calling it posts this is the prop that I am receiving from the app component you can see that in the app I am going to pass this prop this prop is then received by the posts component and I am going to D structure it here and since this props this prop posts is going to be an array so what I am going to do is I am going to loop over through the array using the map method and I'm going to say posts dot map and inside the map method I am going to pass an arrow function and for each and every post so I will call it let's say article for each and every article I want to display something so let's say I want to display something called post and since I am mapping over through an array so it is always a good idea after to put a key here so for now I'm going to put key equals so let me pass index also index okay so let me save this and let's go to the browser to see what we get when we go to the browser you see that we are receiving four different posts so for now everything is good but we don't want to just see posts here so that means what we have to do is I am going to create another component and this component is going to be called post so let me create this component called post dot J s and like after mapping through the posts component instead of rendering this h1 over here I'm going to render the post component so that means for each and every post or an article that comes from contentful this post component is going to be rendered so I am going to again use the same shortcut are a FCP that is going to generate a functional component let's save this for now and inside the posts let me instead of h1 I am going to use post and let me end this here and what I'm going to do is I am going to pass the complete object that I receive so I am going to say particle equals article so my post component are okay so we have never imported the poor's so let me import post from dot slash post so I'm rendering the post component and I am passing it a prop called article now this article prop is now received by the post component so I will come here I will be structure it and I am going to call it article and let me do a console log of article let's save this go back to the browser and let's see what we get in the console so when I go to the console you see that I am receiving four different objects from four different post so it my I am getting the log from my post dot J's and it is receiving the fields which has the description which has the featured image and the name now I am going to D structure my article so I am going to create a Const and I am going to call name featured image and description and I'm going to D structure it from article dot fields so let me save this if you go to the browser you will see that the four objects that I was receiving there is a fields object and inside the fields object is the name of the recipe the featured image and the description and that is exactly what I am destructuring it over here and let me do some cleanup let me remove the prop types from here if we remove the prop types for now maybe I don't need it for now let's save this and I am going to call this dev like I'm going to give it a class name off post and inside the post I am going to give it a title so I am going to use the h2 tag give it a class name of title and inside the h2 and let me just take the name of the recipe that I am getting and let me paste it here let's save this and go back to the browser and now you will see that the name of the recipe is being populated that's a good news now come back to the to the code editor and I'm going to output the description to output the description I am going to use the section inside the section tag I am going to do put description variable save this go back to the browser and now you will see that the description is coming but there is a problem that the description that appears is in the markdown format but what you want is the HTML format so right now the description looks ugly because it has concatenated into a one single string of a markdown but we want to use the HTML so what we have to do is to install another package and the package that we are going to install it is called as marked so I'm going to come to my integrated terminal and I am going to use NPM install marked so once I install this package what this package basically does is it will take markdown as an input and it will output an HTML string that I can use in my in my JSX so I will let this package install I am going to import this package so import marked prom Mart so I will take this and let's say I am going to create another variable so I am going to call it Const post description and this post description is going to be put in the marked function that will take the description so basically take this and put it here in the description now as I mentioned earlier that the mark will output the HTML string so let's see what the output is going to look like so let's take this post description and put it in place of the description and save this let's go back to the browser and what you will notice is that it's no more a markdown but it is a string of HTML this is ok but this is still not good but because it still looks like a string that is concatenated together and put it into the into the file so what you have to do is we have to use something called as dangerously set inner HTML so now what I will do is I will go to vs code and inside the section I am going to use dangerously set inner HTML and I am going to set the HTML to the post description which is basically a HTML string so and I am going to remove this part so this part and I am going to make this section self-closing tags so let me save this file go back to the browser and now you will notice that and the description is appearing perfectly okay so we have the title and we have the description now the only thing that that is remaining to be rendered is the featured image so if I look into the browser console if you look into the fields for the featured image you will notice that featured image contains another fields and inside that field there is a there is a file object and inside the file object is the URL that we are interested in so basically we have to fetch this URL and we have to output or render the featured image into the post but let's say for some of the post if you have not put the featured image in that case we have to handle that particular case as well so we will look into how we can do that right now now I will go back to the visual studio code and I'm going to put a condition here so I am going to check if the featured image exists only then you output the image so I am going to say if featured image is there then you output the image tag and image is going to be a self closing tag I'm going to put let's say the class name of featured image I'm going to put the source of the image is going to be featured image featured image dot fields let's check in the browser so it was inside the featured image there is fields inside the fields there is file and inside the file there is the URL so inside the fields there is the file dot URL the alt attribute is going to be the same as the name of the post and I'll put the title to be the same as the name of the post let's save this file go back to the browser and now you will notice that the featured image starts appearing so the featured image is like kind of bringing the life to the blog so this is the final output so in this video you see that my main focus was not on building the react application but my main focus was how to fetch the content from contentful how to get the data from contentful and plug it in plug it into a react application so this is what we have made in this video I hope you like this video and if you liked this video please hit the like button share the video with your friends and don't forget to subscribe to my channel for more videos like this one thank you

Channel: Thought Span

Views: 17,054

Rating: 4.9006772 out of 5

Keywords:

Id: PB5RQk5gAdQ

Length: 33min 22sec (2002 seconds)

Published: Sun May 17 2020

Reddit Comments

[u/flurpandzurp]

Good stuff. My issue with contentful was the price, super prohibitive.