Route Byline with airSlate SignNow

Route byline

all right so today we're going to be going over new site part 2. over the long weekend you had new site part 1 to do i'm not going to be going over that this time because it's really just the tutorial of news site part 1 is exactly the same as what you'll what we'd be seeing there so again news site is going to be a multi-day project we're going to be building on it with every every subsequent day so always make sure you have your code ready to copy over so it says right here today we're going to create one new component two pages and a routing system to build that new site too it says right here a large majority of this code has already been written for you here or the previous day's code so we'll be moving in quite a bit of code from one place to another so first we need to copy over some components from new site one you can see here i've got new site one right here and new site two so inside new site two i've got a components folder with an article list folder but nothing else so there's other things i need to add to it so i'm gonna copy my app nav folder paste it here i'm going to copy my article folder i think i hit the wrong thing and my article teaser folder make sure this all that's article list article teaser article appdav looks like i don't have an article list thing here so that must be new and we also need to copy over our app.js from new site 1 into new site 2. so here's my new siteones app.js i'm going to copy it all the new site2 find the app.js all right so i'm going to try do an npm start to make sure it works oh right i need to actually go into new site too all right what did i do wrong here i just think i still need to do one sec do i have to do npm install again that might take a while well while that's installing we can always take a look at kind of a quick review of the components that we already have so we've got this app here that extends component that re so we in in state we've got our nav items which is an array of objects with labels and values then an article object which is uh essentially getting a random article we can see here our app renders a div with an appnav component an article teaser component that gets an id a title a created date to handle title click and an article component appnav.js we've got a function called create links which takes in props.nav items go and maps over them so with item and index and returns a link that doesn't go anywhere where the key is index with an on click which is props that handle nav click and shows the item value and we just run that function in our nav in our nav tags here take a look at article article just simply deconstructs props and displays them here for image and byline since neither of those are deter decided whether or not they will be there we've used a why do i always forget the word for it the single line if else whose name escapes me at the moment so either i'm sorry ternary ternary thank you yes the ternary operator that either just displays the byline in the image or null and article teaser is just a link tag that has a handle title click and also displays the created date so you won't have any questions about the components from news site one okay in that case you just have to wait for the npm install to go through and get rid of this function here we don't need it no did you have to do npx create react app uh because in the the setup for new site part 2 it says that we're supposed to do that but i didn't see that you did that uh where does it say that here um under initial setup for new site 2. let's see here for some reason yours looks different yeah that's different than the one that uh oh okay this is probably forked over from an earlier version perhaps let me sorry i'm just going to take a look at mike platoon's version oh yeah okay i was going off an earlier version of it that's why okay oops all right let me think should we i think it says you can use your own code or you can use this yep you're right well might as well wait for this to finish and if it finishes and works then we're then we're fine if not i'll do it this way and yeah sorry for the delay it's one of those things where when you've already forked something on github it'll say you've already forked this and it won't tell you that it's not uh it'll i forgot to check that it's like oh yeah this is for my version was forked over from kilo platoon not mike platoon okay let's try an npm start and if that doesn't work we'll go back but i think it should work all right starting the development server that's a good sign okay so i've got some components here it doesn't look pretty at all but they are loading all right with that working i'm going to turn off the server for now because we have some more installations to do so we're going to be adding some styling later so we're going to be using a library called react strap along with bootstrap i'm going to npm install bootstrap anyway this is being so slow that's being real slow i'm not sure what's going on there all right so i'm going to take a look at stuff after that just to be sure so once we have that installed we're going to be adding an import statement to our src index.js and then we'll do styling after we do everything else i just want to get the installation out of the way and then we'll talk about how at the moment the links in your article teaser component appends to a hashtag to the url when clicked this can cause a problem when handling route slash url changes later today so you're going to modify the on click event handler to alleviate this changing on click to this so we have an on click event prevent default this stop props then handle title click this stop props that id so we need that event dot prevent default there so going to the article teaser component so we're going to have on click equal event and instead of just viewing handle title click we're going to [Music] event.prevent default and then handle title click id all right so npm install react strap on here hopefully that won't take as long in the meantime i'm going to go to index.js which is kind of very much the core of the entire project here and i'm going to import bootstrap css bootstrapmin.css all right now we have a new component called article list so article list it's instead of showing a random article we want our homepage to show a list of article teasers our mission is to handle the props that are being passed in appropriately and create the content that the component should render so props the article list is going to get is a list of articles an array of article objects and a handle title click function so we can see what's already written here we have a class article list extending component render return so we know that we're going to be getting articles and a handle title click function it says it'll receive an array of articles and we want to make sure we understand what the data looks like so we need to take a look at src data news news.json so this is what our data is going to look like it's got a lot of information that we're not actually going to be using and we've got an abstract a byline created date but we don't need the des facet we don't need the geo facet the item type the kicker all of that that's all stuff we don't need to look at but we are still going to be getting all of this we're going to assume it says right here we're going to map over the array and create an array of our array of article teasers when you map over the articles array it should it's good to use arrow functions okay so article list all right and we've already it's already imported article teaser for us for me i could write a function we could call this i don't know create teasers and we'll say this.props.articles.map and when we map we want to use both the value and the index here because we might want the index number so i could say article and index and then we need our callback function sorry i'm just there we go and so then we need to return an article teaser object so we know we're going to be returning an article teaser and what an article teaser takes an id a title a created date and handle title click as prompts okay so we know we are going to get the id title create a date and handle click from our data.js news.json excuse me so the id is probably going to be the index number so we'll say id equals article let's just say index we don't need to say that and then the title so we get that by say it'll be the i think that'll uh would that be called the abstract or where is the headline there should be a headline right nope so i guess that would be the abstract so article.abstract create a date let me go into an article it'll be just called created date and handle title click all right we don't really have what that is yet so for now we can just do an anonymous function of some kind or we can see handle title click right here yeah so it doesn't really say what to do about that that's fine so right now it's just an anonymous function and now that we've created this uh create teasers we should call it we should just be able to run that function here so this dot create teasers all right what questions do you have about this article list component you know i went back and looked and there is a title at the title property uh i'm sure there is i just haven't been able to see it in this information it's below the multimedia stuff ah so it is all right thank you there we go okay this all making sense so far okay so now we're going to be adding a new library to this called react router react router is a popular open source library and it's used to control paging in a single page application so what that means is right now a react app is just localhost 3000 and doesn't have any other urls we're going to make it so that even though there's only one html document in this entire project you're still going to be adding multiple urls so we're going to be doing another npm install of react router dom and this is going to require us to change how our app.js is organized quite a bit so i can just start doing that while i can just start working on that while it's still installing so we're going to be importing browser router as router and route from react router dom so import browser browser router as router and route from react router dom and then we're going to rewrite our render so we're going to have so we'll have our app nav as normal and then we're going to have something in here called router and inside of that we'll have two routes so i'm gonna get rid of all of the the article teaser and the article and all of that we don't need that now so i'm going to make a router component and inside that we'll put a div and then we'll put two routes and let's kind of uh dissect these a bit so we have this word exact something called path and then something called component which points to home page and another one here that points to article page which we haven't really looked at yet but those are already defined for us in our file structure so the path here is talking about okay where in the url would we go so this path right here takes us to the home page so if we just go to locals 3000 slash that'll be that route and the other route will be to slash articles slash with an article id at the end of it and that'll take us to something called an article page all right so now that's installed so i can set up my routes so it says so route exact path equals slash component equals home page and then route exact path equals slash articles slash colon article id component equals article page all right so these are two components that we haven't really looked at yet but if you look at pages here we've got two of them article page.js and homepage.js these both have exports already so i just need to import them here and we can look up here we're not using article teaser or article anymore so i can get rid of these import statements instead i can say import homepage from dot slash pages slash homepage.js and i can import article page from dot slash pages slash article page.js let's try this out see if it works right now article page and homepage don't really have much functionality but they should exist and we should be able to check these different routes so the router and the routes these aren't visible components we won't see them these essentially serve as ways of creating this thing that says okay article page and home page are now going to be new components here these are new components that are going to render like app.js kind of rendered everything all right so right now right here we should be looking at homepage.js app.js has article teaser component i don't want that anymore sorry getting rid of that all right so if i take if i inspect this and take a look i don't think it's working the way it's supposed to be but we can see right here we have a browser router router route home page and article list component the article list component isn't rendering anything yet so that's a problem but it is render it is showing us this article page and now if i go to articles slash one it takes us to the article page so this route that we've created now takes us here if we take a look at article page let's see if it displays anything yet no it just says article page this looks like we have a problem with home page right now specifically with our article list but uh this one is working as intended uh any questions about react router i have a quick one yeah is this similar to the urls in django it follows it serves a similar purpose yeah so the react router is where we determine what our urls are going to be so again this slash here means the home page or the root page and then we're saying okay we're creating an articles page that takes in an article id as something and we'll get to pretty soon how that works exactly so yeah this essentially follows the same purpose as the urls page in django and i also think i realize what's wrong with my article list real quick i need to return this.props.articles.map here let's by refresh my refreshes of h there we go now we have a list of article teasers all right uh what other questions do you have about react router because this is going to be a big part of things from now on hey noah um like you're opening components on the chrome dev is it something i should i can like enable because i cannot see online uh did you install the extension called react dev tools um no i think yeah so that if you google react dev tools it'll install you can install this tool and that'll allow you to use this components thing and that's called a chrome extension yes that's a chrome extension because i found it really useful and i like all of this like a different language is it because news it comes from news jason right yeah all this stuff right here uh this is just placeholder text oh okay yeah you'll find there's a there's a kind of a latin nonsense paragraph called that's called lorem ipsum for short and that's kind of been used as standard placeholder text for a very long time so yeah that's just it's nonsense okay so we continue on a bit so we can see right here uh homepage components brought successfully brought in it's about 60 complete you defined your route assuming you've successfully built the article list component you should see a list of articles uh you should also be able to see the article page you'd simply have the nav bar at the top and the word article page is boilerplate so that sounds like what we're seeing so far so we can continue so right here home page is largely complete it simply renders article list component one piece of functionality we need to complete is the handle title click function being passed into the article list component ultimately this function should trigger a page change react router automatically passes a series of routing related props to home page component one of these is called this stop props dot history we can trigger a page change by calling this.propertiesprops.history.push new url so we want to push that to it's a we want to push a new thing into our history this should look something like this that the stop props that history set push slash articles slash article id so take a look at home page here so right now handle title click doesn't do anything takes in an article id and says to do use react routers history.push method to change the page to articles article id so again thanks to react router we have this new thing in our props called this stop props.history let's probably say this.props.history dot push and then we want to have it'll be slash looks something like that okay so we need to say push slash articles slash i've just completely blanked out on how to do string interpolation for a second there article id so we don't want a console.log anymore as well and so our that will take uh pass this function into article list and we can grab this and say all right we don't want this handle title click to be that anymore we want it to be it would be this dot props dot handle title click that passes it from an article list to each article teaser and the article teaser just says all right i'm going to call on handle title click from my props so now we refresh the page and try it out let's see what work what happens all right that took us to articles zero which normally you wouldn't have something with the id of xero but we don't need to worry about that right now and we can see that the url is changing to articles five articles slash etc so again we have this function here called handle title click which we know is going to take an article id some kind of number and it'll push that essentially meaning move us to another page without actually causing a screen refresh that passes it to article list an article list just han passes that even further down to the next component to each article teaser as again as handle title click and then each heart article teaser says okay now that i've got handle title click as props i'm going to prevent default when you click on the link and then i'm going to handle title click with this id number what questions do you have on how that works all right i'm going to assume then that that makes perfect sense to everybody we can take a look at the article page component so it says right here the article page component should render the article component and provide the necessary props to the child component if you remember article accepts a variety of props from a single article object in src data news.json in order to determine the array object to use you once again have to use the same react router functionality that's automatically being passed into the article page and react router also provides us access to the url params via the props object so the index you'll want to target within the articles ray will be contained within this.props.match.params.article id so if we want to take a closer look at that if we open up the uh open up components we should be able to find that vista props blah blah all right so it looks like it's not showing us it here but if i go to my article page and if i console.log this.props was it this.props.match let's just try console.logging the stop props for now seeing if we can get something with a little more detail so we can see props is not is a object with a lot of stuff it's got something called match and match shows us something like the params which includes our article id which we defined in our react router here with the colon so the colon is called params meaning information we get our get from our url so we can using this.props.match.params we can get that id number and it says right here this variable conform responds to article id in this url like it says so we're going to write the code necessary to find the new news article and pass it into the article component and render it out on the screen so we take a look at article page it's already imported an article the article component and our news from news.json so the first thing we're going to do is be able to get our actual news article from news.json and since we can get the id number we can just say all right so let id num equal this dot props dot match dot just want to make sure i'm getting right this.props.match.params.article id and we could say all right let article equal news id num and then our article page is going to instead of returning that it's going to return an article object i'm sorry an article component and our article component takes in an abstract a byline create a date id image and title so id equals idnum title equals article dot title abstract equals article dot abstract create a date equals article.createdate byline equals article.byline and image equals and i believe it's going to be a little more complicated to get the image out of our data news.json this time because we have several images within multimedia so may have to do something like all right multimedia zero dot url probably must be article dot multimedia xero dot url let's try that all right and as we can see we've got our title the date byline a tiny image and the abstract right what questions do you have about the article page and params i find this lack of questions rather suspicious oh yep no it's just a lot i think personally for me i'm going to have to sit and like fine tooth comb through this and go step by step you know until i understand everything it's just i got i got kind of lost about you know 30 minutes yeah and that is what your your assignment for today is to go over this step by step and recreate it yourself so you will get that time to try it yourself but now is also a good time to ask any questions if there's anything that's like very clearly standing out and not making sense right now but if not we can start trying to style things all right so let's try using a react strap so we've got a link here that'll take us there so they have some examples here of different things uh components you can uh get from react strap so they use a nav bar as an example here they have navbar navbar brand so okay let's try doing that something like this for our nav bar so i don't know if we need to do everything we don't need the collapse or everything like that so if i open up our app nav here i'm going to import a few things from react strap so they have nav bars navs all sorts of stuff so we can try uh try these out as much as we can so keeping in mind that our app nav right now is right now very basic it doesn't actually do anything so let's say import we'll definitely want navbar probably nav and nav item and probably nav link while we're at it from react strap and we can see from their example here they have this is a whole thing with toggles i don't care about toggling i just want it to you know just look nice so i'm going to kind of refactor this a bit make sure you put a parenthesis here i'm going to control x this for now we're going to return a div inside that div we're going to put a nav bar oh it's just lowercase b where is it yep lowercase b inside that we can put a nav just following their example here and they have something called color equals light light expand equals md so we can try color equals light light expand equals md in their nav they have a give it a class name called mr auto and we'll say navbar and then we can say all right we'll put a nav item here and each one is going to have a nav link but i think in this case we'll just put an a tag right now and see if that works since we're not actually i think navlink has more functionality than we really need right now all right so this looks a lot neater than it did before i think it is geared towards that collapse thing which is why it's up and down instead of left to right so let's find something a little maybe there's something here that'll work a little bit but say of navbar maybe they have an example that isn't just using a toggler because out of i don't want that looks like they only have the toddler part maybe if i got rid of the expand equals md maybe that's what's causing it all right well it still looks nicer than it did before so i'll leave it like that let's try something else so we can see they have a whole list of components here that we can try from let's try cards so a card looks like this so maybe we could do our article teasers to look more like this even though they won't have an image per se so for this one they have card card image card text card body card title card subtitle and a button we don't need card image so let's take a look at our article teasers here so right now it's just a div with a pta with a title and a p tag so let's try to make this look cooler i'm gonna say import card card title card text card body and let's try the button as well why not so again i'm going to oh wait we need to say from react strap all right so i'm going to get i'm again going to control x this so we'll put it all in a div and inside we'll put a card component and then a card body since we don't need the image then we can put the card title and kind of coming up here i'm just going to comment this out now we'll just be title do we have a subtitle that we need to do guess not and then card text do we have text here as well we can probably do the subtitle as the created date actually so we'll change this from card text to card subtitle card subtitle that'll be create a date and then we'll have our button and we can have that button also be our link hopefully so i'm going to copy this uh watch i'll just do it i'll do it again so a href equals hash put in an on click actually now i'm thinking about it i wonder if we don't need a link tag at all i think we just put the on click in the button component let's try that so we can just say go and then here i'll say on click equals event event dot prevent default and then handle title click with the id number so we're just doing that same functionality from this link and putting it in this button component that react strap has already developed for us let's see if it worked if i go back to my home page all right so it doesn't look that different maybe i did something wrong here we do have those buttons which looks nice and if i click on a button it does take me here let's see oh we also need this top width well that's the image never mind you can do card tag h equals h5 let's try that tag equals h5 oh okay okay that looks a little bit a bit better nope took me back to that we can give the subtitle tag equals h6 and they also have a class name we can use so i'll just copy this stuff okay there we go that looks a lot better all right and we can take a look they have a whole bunch of other examples here let's see i'm going to take a look at navs is nav's better than nav bars or is it the same ah okay here we go we didn't want a navbar we just wanted navs back going back to our navigation earlier sorry one sec i'm just going to change this around just so we can [Music] my uh app nav just make it a little bit so we don't have this nav bar stuff it's just navs and navs.nav items and that's all i guess we needed to do oh i think i also see the other thing i went that went wrong here so since i'm mapping over all of these i was putting each of them inside their own nav component when they should have all been inside one nav component so i had nav nav item and i bet if we examine that right now it'll that's what it'll look like yep we have nav nav item nav nav item when it should be nav nav item nav item nav item nav item nav item so i need to figure out a way to say all right i want one nav with a bunch of nav items inside of it i could just say all right get me out of here whoops deleted the wrong tag and put all of these inside a nav tag like so refresh the page all right it again is kind of looking a little bit weird i'm not sure why it's we should be able to have it look a little bit nicer than that i wonder if it's those div tags causing the problem sorry about this i'm a little troubleshooting by the seat of my pants here but it's always whenever we look at these things there's always some troubleshooting to do hmm all right it doesn't seem to want to give us exactly what we want here should be giving us some more spacing and stuff like that that's because i just have nav items instead of nav links so let me make these nav links so if i say instead give me a nav link and we'll say href equals equals that key equals actually let's put the key equal index in nav item and then we can copy this on click and item dot label get rid of this a tag all right let's see if using their way of doing it makes more sense ah there we go that looks a lot better all right so this is just stretching scratching the surface of what react strap can actually do for us as we can see it has a lot of different uh components that can do just about everything so they have alerts they have drop downs buttons carousels so if you have want to show slides they have jumbotrons they look like this pagination as well which is very useful if you're displaying a lot of items so i encourage you while you're all working on new site 2 after you've done all the functionality done just try you know messing around with bootstrap a bit and react strap try to make it look as pretty as possible again just using uh this part you know the nav bar and the and the cards is just one small way to do that all right and it also says at the end we want to refactor into functional components so as you can see most of these are class-based at least most of them so once you've done that try it again with functional versions uh create a new branch off of your master called functional version and refactor in that all right so what questions do you have about news site 2 now can you go over the routing again kind of where the arguments are getting passed in for the router and absolutely all of that just the basics yep so up here we imported browser router as router and route from our react router dom library we also imported these pages homepage and article page and inside our app.js we created first created the router component inside of that we have our routes each route we give it exact meaning like okay it has to be this exact route path means the actual url meaning after the you know localhost 3000 or what have you it'll have slash in this case that'll just mean with nothing there and then it says what component to render in this case will be our home page or our article page for the article page we gave it this thing right here slash articles colon article id that colon means that it's going to be passed as params to the component so if i go back here that's this thing right here zero is uh is a param that gets passed to this article component and we can access that by looking up this.props.match.params.article id and that article id comes from this thing right here that's where we define it does that come from the json object though ultimately that article id uh no it doesn't well so this article id doesn't actually come from there if we take a look at our home page we get in our article list we do that and we so we know it's going to this method is going to take an article id so if i take a look at article list that's where those index numbers are coming from so we set the id equal to the index number so that's not actually coming from news.json that's just the index number of the list that we're mapping over i see and then the pages is different how is a page different than a component or is it the same thing but just in a pages directory yeah so a page is just a component in terms of you know functionality there's nothing to it the difference is essentially what we're using it for uh in general we try to organize things by saying all right our components are you know things that are showing up on the page well the page is there to be as essentially as a container for the components and be uh kind of act as our place where we land where we use a route so the page is almost like another version of app.js but not as important you could think of it that way yeah it's kind of like saying it serves the same function as app.js in terms of okay its job is just to render other components but yeah that's a good way of putting it okay thank you no problem all right what other questions y'all have okay and also i know that the we use react strap in this one and react strap is pretty good uh there's also another library you can try out called react dash bootstrap i'll send out a link to that in the in the chat so if you find react strap not working for you you can also try out react bootstrap it works it's probably more popular even so it's just a matter of preference but they do both interface with bootstrap and react in kind of similar fashions i'm going to stop the recording