- Read Tutorial
- Watch Guide Video
So right now as you can see on the screen here on the HTML detail page and also on the index page we have the HTML being printed out just like a string so in other words, our system is not aware that it's working with HTML.
We want to take that HTML and make it seem and look like we wrote the code directly and so that's what we're gonna start in this guide and we're gonna take a couple guides to see how we can take HTML as a string and then convert it into something that can be rendered onto the page.
So let's start and this is gonna be a very short guide. Let's start by just installing the library so I'm going to open up the terminal here and say npm i and then the library we wanna install is react-html-parser and this is gonna go out and it's gonna grab all of the HTML or the React HTML parsing libraries.
You'll see that we have about four or five of them that get brought in by this one command and it's going to allow us to do what we need to do. I'm gonna close this off now that that's been installed and let's add some test data. As you can see right here having one paragraph tag isn't really going to help us,
so let's see how we can add quite a bit of HTML in a short period of time and so this is gonna be the last thing we do in this guide, but it's a very handy little trick.
If you create a new file and save it and do not save it actually in your project. You can go and save it on the desktop and I'll call it something like lorem.html and I'm just gonna save it in my desktop outside of the project, hit return. And the way that I can generate a lot of HTML code right from scratch and we've talked about the tool Emmet before, here is a handy way to use Emmet.
I can type lorem inside of this HTML file and then the little asterisk sign and then let's say 50. Now if I hit tab you'll see that just generated us 50 lines of sample Latin text that we can use to test out. That is much faster than typing that all manually.
So copy all of that, you can close out of this file, you don't have to save it we're just using it for the demo text. And now let's create a new file, I'm gonna call this content page and blog status can be whatever you want it to be. Now inside of here paste in all of that Lorem Ipsum text and also throw in a couple highlights of say bold and italics and anything like that that you want.
The whole reason we're doing this is just so we can have a demo page that has all of our HTML generated for us so that we can see it and then when we run our parser over this, we're gonna know if it works or not. So now that you have all of that, scroll down, hit save, and then you can see inside of this page here that we have a lot of content.
We're, in a short time we're gonna be building out a way of summarizing this content so it doesn't look like this on the page, but if you click on the content page now and go to the blog detail page you'll see that it has all of that content, but it's all being treated as one giant string and we also have this empty image here. So now that we have our demo page and we have HTML parser brought in, in the next guide we are going to implement it in our blog detail page.