Setting Up an Archive Component
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
Video locked
This video is viewable to users with a Bottega Bootcamp license

[00:00:01] Hi welcome back to The Rock Shop and this guy. We are going to be showing our archive of items on the screen. So we'll be getting our items to display these items specifically just the title and the body and then we'll put in a date hardcoded date so we can see what that looks like as well. So basically we're trying to get the archive component in here. So let's start off in our app here by creating a new component in the newsletter directory. Let's call this newsletter. Underscore archive Tajai s and then putting up our scaffolding here based component. We always write our blank skeleton code here that say import React component from react and then we want as a Class Newsletter archive extends Component and just say render return and then instead of a div here let's put a list item because as you can see this is a list. While each one of these items is a list item the whole thing is a list and this is the archive. So we want to put an unopened list and then in here let's just put a couple of list items for now. All right we got that going let's export it. Now let's go back to our newsletter dodginess and let's use this component so expert before a class newsletter archive that should be good for some reason it's there is an error. All right whatever. Let's go back to our component here. And important. So important news letter archive from splosh newsletter archive. Now let's just throw it in the div here. [00:02:03][121.6]
[00:02:04] So what we wanted to actually do is create is because we want to have this content here and then this content which is one of the newsletters and then we want this box up here so we want to have a div here that contains two devs and then give you that has a bigger one. So let's have a div. And this is going to just contain our box there and are is create another day and here this will contain that that box you see here but we're not going to deal with that and then we'll have the list so put another dip here or we could just throw in the archive component. So just so you understand what's going on here I'll write this out. So 0 2 January 2018. So just saying here 0 2 Jan 18. OK. So that's where that's coming from. And then we'll put it in the archive report that sells a newsletter archive and then here is going to be are basically are being content. The latest newsletter I would say that and I'm going to go back into archive and see why it's getting this error. Not sure why it's probably because we put class here let's to that expert before newsletter archive. We should be good. Let's go back to the browser and we are just now we ever box up here that we'll put in eventually you know we have the main content. So first things first let's get this data into the list instead of these hardcoded items. So we'll go ahead and we'll do that in the next guy. So this will kind of just be a guide covering her set up of our newsletter archive component. [00:03:54][110.2]
[00:03:55] So it's commit our code to get status get and get commit. Set up a newsletter archive component Okail catching the next guide where we will insert or date prints insert our data or archived data into this archive. [00:03:55][0.0]
[231.8]