Route Byline Order with airSlate SignNow

Route byline order

so today we're gonna continue on with our react our long longer-term react app called new site and last week we did new site 1 today we're going to do news site 2 tomorrow we're going to do new site 3 Thursday or anything new site 4 or so on and so forth up until new site 5 on Friday and then next week we'll be covering something called Redux which is basically a centralized state management system rather than each component handling its own state that doesn't make too much sense to you while yet that will it will soon enough so last week we did new site 1 and it more or less looks something like this it's not especially pretty but we just wanted to have very we wanted to make sure that everything was rendering out to the screen screen exactly like we expected we have an navigation component that's gonna go up top obviously we're gonna get rid of these giant ugly words get an article teaser and then we from that article teaser I gave us the actual article here on the bottom new site 2 is going to look a little something different by the end of today so let me go back to the news sign to do NPM start here by the end of the day you're gonna go from what it looks like right now to this I thought that was gonna work really well like this okay and it's gonna look a little something it's gonna look a little bit nicer so instead of having that disgusting like navbar component up top you're gonna have a nice-looking that bar this is gonna be styled by react bootstrap that's a library that's built in and then on the home page itself you're going to have like all these article teasers with the with the article name and then the the created at date underneath maybe you want to make it look a little nicer than this it's up to you it's the bare minimum is just getting this out to the screen when I click on it it will take me immediately to an articles page well this should read articles slash one article slash is 0 but it goes to it's in each in jewelle article and i'm not sure why this is not working oh I hard coded it I'll fix this a little bit later oh it worked just a second ago am I crazy Oh we'll figure it out so that's where we want to get too bad the end of the day we want to get a large nice-looking knife bar up at the top we want all of our articles here on this page so an article list and then we're going to be able to click on each individual one and it will load up the actual article I think one well we'll fix it a little bit later I'm not crazy I'm not sure what's going on okay so it'll take us immediately there and what you'll notice about react is that when I click on it it's it's much much faster than going through an entire request a response cycle like if I go to a group on comm which I know is written in Ruby on Rails if I had to make an entire request and then wait for the entire response to come back now granted it's only a second or two long but it feels like an eternity when you when you can do things like this what I can just click and it's immediately there less than a second less than a fraction of a second to be honest this automatically looks because it's loaded in your browser so when you make that first request and get that response back all of this stuff is already jumped back for you and based on your browser's doing all the heavy lifting your chrome your Firefox is your safaris are doing all the heavy lifting so this is where we want to end up by the end of the day and we want to fix this so it becomes articles slash one so again I will walk through how to like how to code this out and then in the afternoon after noon or whenever we're finished with this you can go off and do it on your own as I mentioned we're going to be building up like a larger news site to get to in the end more or less like a New York Times kind of clone and each day is going to build on the previous day's worth of code so you want to make sure that you're keeping up to date otherwise like today won't make too much sense if you haven't finished news site one you're gonna have to go back and do that first today what we're going to do is we're gonna create one new that's going to be called article if I'm not mistaken we're gonna take care of pages and routing and things like that because there's routes on the back end there's also going to be routes on the front if your API if you have rails operating as an API talking with the database here and have a bunch of like URLs for that and then if you have react taking care if your front-end you're gonna have a much a URL for that how do we how do we do that so there's a few things we need to set up we're gonna have we're gonna copy over article article teaser the navigation everything from day one into this source components directory of this current project so I'm going to clone this down first and if I open this up real quick you'll notice that I don't really have anything inside of my components I don't have any my article list or my navigation bar if I were to npm install and npm start here I would see pretty much a lot of broken stuff so we're gonna move over some of that information so I just need to find my new site one which I'm not really able to find right now there it is react new site I made the mistake over this past weekend of uh listening to everyone talk about building their own computer and just got sucked into a black hole for like 24 hours of like learning all that I could about that look so what are we moving over all right so we're gonna be moving over article article teaser and the nav bar all of that into this right here so I'm just going to copy these three folders just dump it into my new site too so once I've gotten that in the next thing that's gonna happen is that we're going to be using something from bootstrap called nav and because nav is protected keyword inside of react food strap we're not going to be able to name our component nav anymore so we're going to need to rename it to act nav or navigation bar or application navigation or something the word nav inside of react bootstrap is going to be protected so you're not be able to use that so we'll just jump in right here see if this works cool everything is broken that is fine all right first things first let me rename everything from this to app nav so let's do new folder folder we'll rename the folder F now we will rename all of this fjs and then app NAFTA test is will change all this to F now looks like we'll just look up the entire actually I'll do that so I'm going to find every instance of NAB and change it to add Neve export default app now this one is going to be okay and I think that it all goes well i refresh this page i should still see the same error message nothing else is broken okay so we've solved one issue all right and then it says copy over app j s from new site one to new site tube so we're just again we're just going back in time we're gonna grab everything that's old and then move into the new stuff so i'm going to go back into code platoon reacts new site I will grab the app that J s right here and then throw it in music I'm gonna replace it everything compiles correctly let's see what happens all right we got a bunch of issues it says NAFTA NAFTA je s does not exist so we'll just jump into this place right here we'll fix this up half down from components all right and we have that same issue as before first things first it says that module will not found bootstrap CSS so there's no like this bootstrap thing doesn't exist quite yet we're gonna need to add react bootstrap into our code base and that we're going to style it accordingly so there's a bunch of inside of create react app that what the generator from Facebook there's a easy way to add react bootstrap into your site so all I got to do is just grab this kill the server and run it here so I'm gonna we call out to NPM have them install a react bootstrap the third edition into my react app right here this should be fairly quick and then while we're doing that I'm going to do is I'm going to grab all this line right here and put it inside of our source index j s file so there's our index that J s I already have it in there and if I do npm start now this this thing should go away we should actually see something on the screen [Music] peasant right now everything looks the same because we're we're we're just getting we're just setting it up right now not too much is going on and basically at now we're at point number five right here at this moment when we click on the a links and our article teasers components so let's go back and just to remind everybody of what's going on our entry point is at a pas now app that Jas has constructor all the things that you need is going to be inside the initialize and then it has a render these are two functions that are going to be on every single react component there's going to be a constructor implicit or like explicit you're going to write something and there's gonna be a render of what comes out to the screen this is what's showing up on the screen I'll use do you see an h1 for nav component and then I'm rendering an app nav right underneath it then I have a article teaser component and an article component so on and so forth now if you take a look at this article teaser when I click on this link all it's doing is appending like a like a like a hash tag at the end which is not exactly what we want right now but we just wanted to get something out on the screen I appreciate your enthusiastic shaking of your head basically we don't want that to happen so we're gonna modify this on click event event handler so when we do this handle title click right now all we're doing is just console logging the article ID we're gonna change that a little bit we're gonna grab this piece of code jump down into the article teaser itself and get rid of this oops so basically what's gonna happen is right now it's it's just taking us to hashtag which is okay before it was just like it was just passing the props back upwards but instead what we're gonna do now instead what we're gonna do now is we're going to prevent the default from happening because the default when I click it it it's a get request it makes a makes a get request and then we're gonna pass some stuff right back upwards we're just adding this tiny little line of event.preventdefault so first things first to get our app looking from this gross ugly thing to what we wanted to get at the end we have a new component called the article list component and it's the article list component takes two things one is going to be articles like just an array of all the articles that that we've stubbed out for you and then a handle title click so we're gonna this article list is going to receive a list of articles so we're gonna jump into article list this is our brand new one it doesn't do anything at all there's literally nothing going on here but what we're going to do is we're going to map over the array of articles that we get to create a list of article teasers so that you have like an entire list kind of like if you go to New York Times if New York was New York Times sold to the cook brothers this weekend or is it just time time time [Music] and what I get to just I just want the list of articles so these are all like a list of article teasers that you see on the on the front of the New York Times page and we want similarly want a list of article teasers to show up for us so so for us we know that we're gonna receive will receive a list of articles and prompts map over it and create article teasers so if I know that I have a list of articles in my props how do I map over them and like specifically how do i how do i execute JSX inside of inside of this file right here how do i interpolate and like execute javascript code okay so I know I know I have bad at the very least I have that okay so how do i how do i map how do I get to my articles first of all what's the first thing I take okay the props have something called articles on top of it so if I go inside of my app yes I do but I have a list of articles that's being passed down here so article list will get to that point but essentially basically the art of the coolest components going to receive an array of articles so you're asking where it comes from we're gonna eventually get to this but it's under pages under homepage so if you take a look over here it's passing in articles as news which is just all the stuff from that JSON file so this stuff props to articles and then how do I map dot map okay it's gonna take in two things it's gonna be first things going to be the article itself and the second one is going to be the index of the article we're using curly braces for everything now and then I'm going to create an article teaser of some sort so it says the article teaser component requires a handle title click prop the value that we provide should be that handle to handle title click prompt that's passed into our article list component okay so if we take a look inside of article teaser there's a few things that article teaser needs it looks like I need to have handle title click so I'll throw that here it looks like I need an ID of some sort a title and a creative date so to that title and created where do I put these props that I'm passing from one component into another word is that where does that go does it go up here just go down here not sure where to put it yeah so I have an article list right that's the it's an entire component and that component consists of smaller components underneath that's the specific ones are going to be like an article teaser so article list has many article teasers so I need to be passing stuff down from the article list into the article teaser itself so I'm mapping over each one of these articles I need to pass down handle title click ID title and create a date into this article teaser creating I'm creating so from the list of articles that I've gotten past this is already an array so I'm gonna be passing all these four things down into this article teaser so I'm just going to do ID equals something I'm gonna have handle title click equals something title equals something it's okay it's the first day back from break created day because something that we can get rid of this all right now the UH the ID is going to be equal to whatever the indexes of the article that's being passed down so I'll just do that handle title click will basically be this stop drop stuff handled title click because that was passed down to us from this home page is so homepage DJ has created a handle title click which passed it down into the article lists the article lists is going to pass it down one more time into article teaser good catch I was waiting for I was waiting for someone to I was waiting to get that get there later alright and we have title and created date that's gonna be part of this article here so I just do the article dot and this first one I will do title and then the second one I will do article dot created date all right let's take a look over here does anything change absolutely nothing changes and that's very irritating but it says don't worry about doing anything we're gonna wire it up in our next section so we've set up our article list this is everything back that we need to get article list to show up on the page and then we're gonna start using something called a react router now react can take care of creating your own routes and stuff like that you can write it yourself but it's very difficult so what they ended up doing is they created a something called react router so you can kind of take a look at the code that we had here and you can kind of get an idea basically what's going on so when we were doing things inside of rails rails we had something like get slash home to home index or something like that so it was basically saying every single time that I make anybody makes a get request to slash home it would take the action that would take care of it is the home controller and then the index method this is how we wrote things inside of rails it's kind of similar inside of react router basically it's like anyone anytime anybody makes a get request to slash the the component is that's going to take care of it's going to be the handle index and basically anytime anyone makes a get request to slash invoices the thing is going to the thing that's going to handle it is slash is going to be handled invoices that react component essentially what it's going to look like is I'm gonna import whatever component from source components whatever component it is and then just kind of throw everything inside of browser router browser router is comes in from react router so I want to get react router inside of my react tab so I'm gonna kill the server copy this and then basically call out to NPM to install react router down the inside of my package JSON let's take a look at what it looks like right now we see that we have a bunch of dependencies right here with bootstrap react bootstrap we need react router which we somehow already have but just to be just to be absolutely certain we will download this while we're waiting just like just like for everything else we're going to basically grab a bunch of imports of what we need now what we were doing things inside of rails you may have noticed that all like everything was require relative up top like everything was required for you so you never had to require it ever again right and unfortunately react does not have that same kind of functionality where it's like implicitly going to require everything and that both has like positive implications and negative implications the negative is that you have to require everything yourself the positive thing is you're not going to reveal anything to anybody else that you're not supposed to have so I'm going to move this line seven up to line two for no other reason than just because I want all these first two lines are just libraries brought in from other places and lines three through seven are just code is just code that I've written myself let's see if this is finished fantastic to NPM start everything should look more or less the same cool everything looks the same instead of our app we're gonna have two routes in our return so I'm going to grab this here and just throw it in this piece of code so I'm gonna move the nav of tongue I want it rendered on every single page so I will get rid of this and then all this stuff can go away so let's kind of reread what we've done let's actually just go back to what what it was before so this is the code that was gonna take care of all of our routing for us that's right now everything is wrapped around browser router to make sure that like react is using react routing and as of right now we had that ugly like article component teaser component article like that component we don't need any of that anymore what we have now is a nap-nap that's going to show up at the top of every single page we're going to have and we can now have two things we have this route exact path which will basically says anytime there's that we make a request to slash or just homepage or nothing the component that's going to take care of it is going to be this home page component that we talked about a little bit earlier when when Alex asked this home page component has a whole bunch of things for itself but basically it's just going to list out this list of articles again when I make a request to slash the home page components gonna take care of it you find that under source pages home page right here that's gonna list create a just a list of articles so if all goes well we can see a bunch of stuff broken all right so we'll fix this one by one and we'll we'll get there so app that is this first one says article teaser is defined but never use Sun same thing with article and you go back to fjs you can see that I'm importing article teaser and article but I'm never using it again like this is all the times that it shows up so this can go away same thing with this article you can see I'm not actually rendering a list of article like an actual article compiled on this page anymore even though the word article is showing up number of times I get rid of that and then those two warnings go away and then when you go into app that J s it says home pages not define an article page is also not defined home page and article page are right here so I'm going to need to import let's see so it says that I'm using home page and article page and it doesn't know where to come from so I'm going to import home page from whatever and then import article page I'm gonna leave it up to you all to basically tell me how do I get from app that J s into these two files right here relative to where I am right now so here I am I'm here at a bjs I need to get to these two files it is it is slightly indented yes so it's underneath pages and it looks like pages is at the same level as a PJs okay so I go tot forward slash go ahead grab this right here and same thing with the page let's go back over here does it work alright we got something it's not pretty but we got something right now we just have the navigation bar up at the top and then no article list underneath I don't like that so we're gonna go inside with the inspect jump into the console and see what we have okay what's not did we ever define article list not in this page in this one we do have article list well this actually let's just kind of read through this what do we have here so they're all warnings we need to return who returned nothing that's interesting doesn't need to be inside of JavaScript currently are you eternal there's already a richer dude this is returning that the board maybe I move this here and move that down I'm not sure we will a couple shoot this together so the word return is now gone so you said to put it in the curly braces John why did you say that yeah it could be you're actually correct yeah actually actually correct so right now this is nothing like this this is yeah this is not being evaluated it was just being evaluated as HTML you're correct that's good please show up do something give me something on the screen article is to find never use news is to find but never used stupid oh no that's right wait a second article list returns article teaser it's actually just console.log that we have a bunch of stuff so the home page this goes to article list going down to article list let's just see what we have so we'll console.log this prompts to articles just to see what shows up on the screen so we refresh the page we do see that I have 40 different articles that looks good to me I like that and then I'm going to iterate over each one of these articles do not see the issue here I don't know what the difference was between what I just typed in these two I have an article an article plus one I'm guessing this article plus one it's they're not happy with this article plus one this index plus one yep there's the curly braces around here so remember we have we have a dude this is not supposed to be wrapped in curly braces it is what it was yeah it's a it's a narrow function which doesn't require curly braces unless you're interpolating out something so this works we hand we now have all of this stuff right here so now we have a gross like an AB bar up at the top and we have a list an article list component which consists of small article article teasers no it's because I rocked this I can't I can't have a return within a return like I can't have a return here and a return here I mean just like this all right so now I got to this point again giant nav bar at the top and then an article list component full of article teasers that's let's take a look at the actual articles themselves so if I click on all this right now it doesn't do anything because I'm preventing default from happening as of right now if I click on each individual one I'm just saying to you to do use use react router is history now push we're going to get to that a little bit so we have if you go back to app that Jas you look down here we have two paths one of them is gonna take us to slash and the other one is gonna be slash articles slash whatever article ID so I go to slash articles slash one I should get to some sort of article page as of right now you haven't wired up yes we've got articles to so on and so forth so forth we'll get there we haven't done there quite yet if we take a look it says article page is going to be handled like when I go to slash article slash one two three four five the component that's going to handle it is going to be this article page right here as it right now all it says is just article page nothing nothing fancy shows up on the screen your choice do you want to do the homepage component or the article page component first do you want to do you want this to show up or do you want to do you want to do the homepage so two two options one is I can actually go visit slash article slash one and it show the actual article itself or when I click any one of these links something will actually happen your palm they can be operated they can work independently of each other's home page all right yeah all right so basically we're mostly complete with this right now right now it's just a giant navbar an article list component which is consists of article tees or components underneath that basically what's happening at this point is that when I click this I want to actually take me to some sort of page but instead all it's showing me is to do use react routers history now push method to change the page basically what's happening is that when you click on something you react router has a lot of stuff built in basically one of them is called this table prompts that history so let me jump over here inside the page that Jas so epigenesis the first thing that's loaded when I make a request to slash it takes me to homepage which takes me to this point right here and you can kind of see I'm passing in a handle title click down into the article list and as of right now all it's doing is console logging this to do thing out to the screen instead of doing this I want to push like the articles ID into this stop prop stat history just do this stuff prompts history and the reason I have these curly braces because I'm interpolating code here now push slash articles slash so when i refresh the page and I click something it's taking me to the actual article itself now if we take if we console.log like what does this stop props that history so we'll do that right here console.log this stuff props alright so this is what this stuff props looks like right now under base because we have react router we have something called history that's built in for free for us when we click on history and we do stop prop stuff history to push you can have you can basically just push in like you can push in where you want to go next is essentially what's gonna happen so when I click on this link basically was gonna happen is this react router is going to push like be it like the slash ID into the list of things that they wanted business that kind of makes sense so as right now we can push like this / articles / article ID and when I when I go there it'll actually just take me to slash article / 1 / article / 3 and you can see that each one of these articles does have their own individual ID and it takes me to that specific page and finally we get to the point or doing the article page component as of right now each article page should render an article component so if we go to article page all it says is a div with article page on it it's not really that useful for me instead what I need to do is actually render an actual like article out so I know I'm going to be an article each article is going to have a title created date byline and abstract okay so I need I know I need to take care of all this type of stuff so I'm just going to do title equals nothing for now created date equals nothing long equals nothing the image he pulls nothing but they says that this one will be challenged and then finally an abstract I know I'm going to need to fill that in all right so I'm at this point I need to get an individual article so I know I'm going to need to do probably article dot whatever and I'm gonna push all right so now the issue remains I don't have article being passed down from anything I start with a pas whenever anybody visits article slash whatever article ID the article page component is loaded which brings me here and they need to I need to list off I need to create an article component from there I know I'm going to need the title to created that day in the byline all that kind of stuff but it's not being passed down and props how do i how do I get the ID and then get it from news so there's a couple things first things first I'm gonna have a cause called article ID this stuff prompts let's just do this that props for now actually let's just console this not props and let us take this out for now so we're going to whereas here at article slash seven we've console.log this dot props under this stop props there's a match right here and you can basically see that inside of match there's a thing called params which will give us the article ID that shows up here at on the top so when we were doing things inside of rails we had like params of like article ID or something like that you remember this is how we grabbed it from the URL react has something similar we still have the ability to grab it from the URL using this stop drop stop match that params article ID so we didn't have to get from there from up here to this 7 right here for us it's pretty easy we're going to just have a Const called article ID just gonna be this props dot match up params I think was article uh would it go I think was article ID we created maybe let's let's see let's console.log this dot prompts and then if all goes well we can do console.log article ID undefined okay that's no good so this stuff props that match stuff params dot article ID it looks like capital I indeed okay all goes well I will actually see seven let's go to ten and ten shows up so we're all we're good so we've gotten over website they're loading the whole news JSON so for a normal for like we're gonna get to this tomorrow as of right now we're only a greeting from a actual JSON like file here yeah right so we know we'll have to load all that text data is it adjacent onto your computer essentially so right like that's what I'm saying like right now we are just reading from a static file right but in reality what's going to happen is they're going to make a request in the background to an API and that's you get that response and save it and then when they need it they will read from it so not just sending every all the data no like for instance like all the front page news go to your website and then if you click through like a section in might do a request mm-hmm comes wondering where like for the speed of the react come from you're saying like all the data's loaded onto your site already onto your browser yeah yeah so the idea behind react is like when I make when I made the request to NatGeo right instagram.com / NatGeo all this stuff was loaded onto my page already in the background it's making a lot of requests who like whatever API is holding me these particular small images on here and it also keeps track of each one of those small images has a certain number of comments and things like that if I want to learn more about it I can click it and then it'll make another request in the background and then this is what shows up I'm not sure if I'm answering your question kind of okay all right we'll get to the end of this so we have our article ID and we have all this news so let's just say Const article it's going to equal news of article ID I'm not mistaken and then from here we'll just do this so we got the article ID from the URL we found the article from this list of news things and we're going to create an article compatible component everything looks like it's good let's go back to this slash home let's click on this first one if all goes well it will take me to articles slash one and give it give me everything for going on to Fallujah and instead I got today in Mosul which is the second one so what's going on here is that zero one thing again so how do I fix this like how do I get the right article that shows up to show up I could just subtract one so this will reload and if I click this it will say going on to Fallujah all right today in Mosul German comedian but if you notice none of my images are showing up anywhere and I did inform everyone that this was gonna be a little bit challenge so let's just look at console.log article oh my god each one should have poops okay here we go so inside of here I'm looking for image but image does not seem to exist in all of these key value pairs where do you think the image will live like what what should I try to expand here multimedia alright you've got an array of five things the first thing has caption copyright format hi I like this URL thing let's click let's take a look at what that looks like cool well there's our image so we need to get from so this whole thing is the article I need to get from there into this URL here so I'm going to do article dot multimedia did you say yeah and that had an array of stuff so I'm gonna take the first one and then dot URL alright so that looks good let's go back to our home page I got long as I have stuff a rare survivor or a Philippine drug trade let's just jump down here to arrest in central Germany everything looks good just fine a little bit is going to be style with bootstrap but I'm going to leave that one up to you so by the end of today we should have this page looking pretty nice this whole top thing should be styled using bootstrap so we have reactive good strap there we should have a list of all of our article teasers and then when I click on it should take me to a new page sound good any questions on anything