Exercise (Video): Single Page Applications Part 2

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

30 оценки

The Hong Kong University of Science and Technology

Front-End Web Development with React

30 оценки

Course 2 of 4 in the Specialization Full-Stack Web Development with React

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended. At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

From the lesson

React Router and Single Page Applications

In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.

Single Page Applications9:24

Exercise (Video): Single Page Applications Part 123:35

React Router: Parameters6:52

Exercise (Video): Single Page Applications Part 223:31

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

With our understanding of how route parameters can be passed in

React router to enable passing information

from one component to another through their own parameters,

let's go ahead and update our React application,

whereby, in the menu component,

when we click on any one of the menu items the dish ID

of that item that we click on will be passed to the dish detailed component.

And then can be used to select the specific dish

and then render the details of that dish.

To get started on this exercise,

let's first go to menu component.

In the menu component earlier when

the card was being rendered we had this on click method.

This is no longer available to us,

because we are not implementing this anymore.

So I'm going to remove that from the menu component.

Similarly, here when we do the render menu item,

this is no longer available to us,

so I'm going to be removing that also from the render menu item,

because that is also not available.

Now, how do we update this to pass the link

in the specific dish information as a parameter?

So this is where we will pull in

the link component

from React-route-dom,

we have already discussed how the link works and we have seen the use of

link already in the previous exercises.

So, going into the card what I'm going to do is inside the card I'm going

to link this whole thing too.

So this is where I need to pass the information to my component then this is clicked.

And then let me close off that link here.

So, now this whole thing that is in the card gets enclosed inside the sling.

So how do I specify this link here?

So this is where I say, link to,

now the specific dish itself has its dish ID.

This dish ID is the one that I want to pass.

But then this link allows me to only specify the URL to which I navigate.

Now, how do I make use of this dish ID?

This is where I can use back quotes.

So a back quote means whatever is enclosed inside here,

so if I put a JavaScript value there that

could be evaluated and then replace that value there.

So when I say back quote,

and inside the back quote I will say,

menu slash dollar dish ID.

That's it.

So, what happens here is that for each specific dish,

the corresponding dish ID value is evaluated here,

and this will be substituted by the dish ID values.

So, if the ID is one this will become menu slash one,

if the ID is two it will become menu slash two and so on.

So, that is the reason for enclosing this in back quotes here.

So remember that these are back quotes not forward quotes.

It's very important that you implement this correctly here,

otherwise your code will show errors.

Back quotes and then this is dollar dish ID.

So, when you do this, this will be evaluated and

them the corresponding value will be replaced in here,

and so, that would be the link that we are going to click on, that's it.

This is the only change that I need to do to enable us to recognize that link.

Now, while we are here,

what I'm going to do is I'm also introducing some Breadcrumbs into my menu component.

Now, Breadcrumbs we have seen in the bootstrap course.

So Breadcrumb allows me to add some information to the top of the menu page,

so that it's a bit more interesting to look at.

So to add that into this I will add in along with the current title,

I will write in Breadcrumb and then Breadcrumb item.

Both these I'll import from React strap.

And then, going into the menu bing shown here,

let me add in the Breadcrumb into this view here.

So I'll say, div class

name row.

And then inside this row,

I will

say Breadcrumb,

and we'll say, Breadcrumb item.

And then, we will use link to home.

We have already seen the use a link earlier,

so I don't need to explain this to you anymore.

And then, this would be home and close the link,

and close the Breadcrumb item.

So, this is how we add Breadcrumbs to an application.

The next one will also be a Breadcrumb item.

And for the second one,

we will also apply the active attribute to it,

and then we'll say, menu and then Breadcrumb item.

So, this is how we add a Breadcrumb to our page here.

And then down below here I'm going to say,

div class name col 12.

So I'm going to add a title to my page here,

and the title would be added in as h3 menu,

this is just to give a nice little view for my menu page.

So my menu component is now updated,

and also I've added Breadcrumb to the menu page.

So now that I have added in the Breadcrumb to the menu page,

now I need to go into the main component and then now make use of the dish that came in.

So, when the menu item is clicked,

that will come in here as a dish value here.

So, in here, let me implement a function component called dish with ID,

and this function component will again when this is input,

this will get that parameter that is required.

So, going down here,

I will menu here,

and I'm having one route there,

and then, so, we'll say,

route path slash menu

slash colon dish ID.

So, notice that this is the key that I'm giving to the parameter here,

colon dish ID, and we'll say component is dish with ID that I just implemented.

Is just more convenient to do it separately there,

so that's why I added in that new parameters here.

Now, also notice that,

this URL also matching that URL.

Now, in order to prevent,

when the switch is looking to see which of these route should

be taken in order to prevent the switch from selecting both,

I have added in the exact here,

meaning that this should be exactly slash menu nothing following that.

Right. Otherwise, this will slip down into this front here,

and then doesn't match this.

So, if the switch comes in with slash menu only,

if I don't put that exact in place there,

then it will match both of these and leading to a problem.

Furthermore, if I define the route one below the header,

then switch looks around for a match,

it would match the very first one that it encounters.

So, that's why if I put slash menu it will automatically match this one,

and so it will never reach this point anymore.

But then a slash menu,

following that with a slash something will not match this because this says exact,

and so that will come down here,

and then will match this particular lot.

So, now I'm able to bleed that into the dish with ID there.

So, interesting we have arranging the way the routes are

configured there so that I can extract information.

Now, for this dish with ID as I said,

the route will pass in three props here,

and I am only interested in the match prop there.

So, I'm just going to extract out the match object there from here.

So, this will get match, location,

history, but I'm going to ignore location and history,

and I'm going to extract out only the match one part of that thing there,

and then what is this going to do?

This component is going to return.

Now, this is where

I can use the detailed components that I have already rendered early.

So, the dish detailed component that I have already constructed.

So, note that up here I already have important dish detailed component,

I have used it in the earlier version of this application,

so that is already available to me.

For the dish detail what are the properties that I need to pass in?

So, for the dish detail,

I will pass in the dish,

the specific chosen dish here.

Now, what is the dish?

This is available by doing this state dishes filter,

you have already seen the use of this before,

this state dishes filter,

and then we'll say dish,

dish ID equal to.

Now, how do you extract out and match the things?

So, this is where we are going to see,

now note this, parseInt.

So, parseInt is a JavaScript function here,

when you specify your string and the radix,

what is the base of the number?

So, here will be a number consist of that string will be

converted into the corresponding integer value with that base there.

Okay? So, this is convert a string to an integer.

So, that's what parseInt allows me to do.

Now, what is the string that I'm going to convert?

So, this is where I will say match params.

So, notice match that came in.

This match object has the params here would contain the dish ID

here as the one of the properties of the match params there,

and then this will be base 10 integer.

So, convert this, this would be a string that will come in,

and this string convert that to a base 10 integer here.

So, that's what we want there,

base 10 integer here.

So, this would extract out that,

and then because the filter here will return an array there.

So, the first item from that array,

so, that's why I'll says zero here.

First item from that array will be extracted out and then

sent back as the dish property for dish detail.

In addition to the dish,

I also need to parseInt one more item there,

that along with the dish, now,

previously the comments were also part of the dish,

but now I have extracted the comments out from the dish.

So, that's why I have been explicitly parseInt comments also to my dish detail.

How do I parseInt comments?

This is where I would say this state comments.

So, notice that in the state,

I have dishes and comments separately.

So, from the comments, what I'm going to do is,

I'm going to extract out all those comments.

So, how do we extract out?

You do filter, and then we'll say comments.

So, extract out all those comments for each

comment dot dish ID is exactly that.

So, that is how I extract out dish ID there,

and then I'll parseInt.

Here, I will parseInt all the array as such, so,

this filter will extract all the comments for each,

the comment dot dish ID matches that value, and so,

that would be an array, and that's fine,

comments are parseInt another array anyway.

So, if you look at the comments dot JS file,

you will notice that for each one there is an ID there.

Of course in addition, there is a dish ID.

And this is the dishID which I'm going to compare against

the dish ID that is parsed in as the route parameter for me.

And then notice that if you go down,

you'll see that there is a different dishID for the other card.

So for each comment,

it'll have a dishID associated,

identifying which dish this comment corresponds to.

So from this whole list of comments,

I will extract out only those comments that pertain to dishID being equal to zero.

So that will be an array of comments from there,

and those comments I'll really extract and then

parse that as a parameter to DishDetail component.

There you go. Having gone through all those steps,

now you'll begin to see how many different things that you

need to change in order to make things work.

Well, that's implementation details.

So, now, I need to go and fix up the DishDetail component in order to

use the parameters that I'm getting in here or the props that I'm getting here.

So, going into the DishDetail component,

in the DishDetail component,

I will go in and then I will also import

link from react-router-dom because

I'm going to use that in constructing the Breadcrumb here.

So, I will also import Breadcrumb, BreadcrumbItem.

I will add Breadcrumbs to the dish that I render here also.

Now, I'll go in and come into the details here, down below here.

And so here, when I say, "RenderDish",

I will parse in the props.dish here.

And then here, when I say,

"RenderComments" I was parsing this in as

props.dish.comment because comments were part of the dish earlier.

Now, since comments are coming separately on their own,

I can just change it to props.comments

and then that'll parse the comments in to render comment.

So, the render comment should work just like before and

the props.dish should work just like before.

Now, having done this,

let's add in the Breadcrumb to this.

So, how do you add in a Breadcrumb to this?

So, in here let me go in and then indent this here.

Now, I'm going to go into the CenuComponent and then

copy this Breadcrumbs from the MenuComponent,

to save myself the trouble of having to type all these things here,

and then come into the DishDetail component.

And then right here, inside the container,

I will paste in those Breadcrumb items

there and then we'll fix up the Breadcrumb items to render these things.

So here, it says Breadcrumb link to home,

and then the BreadcrumbItem active.

Now instead of menu here,

I'm going to here render prop.dish.name.

So, you see the props.dish contains my dish and then so I'm going to use

the dishes name here in the Breadcrumb.

And similarly here, also this menu,

I will replace that with props.dish.name.

So, at the top,

the titles would be the name of the dish itself as the title.

Now, in addition to this,

here we have one link to the home.

We will add in one more link to the menu here.

So, we'll say link

to menu, and menu.

So, that'll take us back to the menu here.

Actually, I don't want to send you back to home from the details of the dish.

I wanted to send you back only to the menu.

So, the breakfast BreadcrumbItem will only render slash menu.

So you'll be able to go back to the menu from

the details of the dish here, which is fine.

So with these changes,

now my DishDetail component is also updated appropriately.

Now, I will also add in the Breadcrumb to the ContactComponent.

So, going to the ContactComponent,

I'm going to import

Breadcrumb.

Again, this I import from reactstrap.

We'll import Breadcrumb and then BreadcrumbItem, sorry.

So, this should be Breadcrumb with a small c. This would be BreadcrumbItem.

Both of these, I will import from reactstrap.

And within the ContactComponent, before I fix that,

let me just go to the MenuComponent and just copy

this all over again from the MenuComponent,

come back to the contact component.

And inside the container,

I'm just go to reinsert that into place.

Save myself the trouble of having to type this thing again,

and then we'll just go and fix that up to render the appropriate text.

So, Beadcrumb link to home,

and this is Contact Us, Contact US here.

And one more thing to import here

is link from

react-router-dom.

Save all the changes and then look at our application.

Coming back to our application in the browser,

you can see that the home component is rendered as such.

Let's go to the contact component.

And when you go to the Contact component,

you can see the Breadcrumb being rendered at the top here and

then the contact us title being rendered here.

There is a line separating the Contact Us from the rest of the code here.

So, that is how the Contact Us is rendered.

Let's go to the menu.

So, in the menu,

you can see that you have a Breadcrumb item and the menu being rendered here,

and then each of these is now turned into a link here.

So let's click on this one to see the details.

So now when you click on that,

you notice that you have now gone into

this new view here where the details of the dish is rendered.

This is still the DishDetail component that is rendering the thing,

so I haven't changed much in the code there minor fix to

that code and then the DishDetail component is rendering the menu.

Look at the URL here.

So, notice how the URL says, /menu/1,

1 being the ID of this particular dish.

So, you see how the URL with

route parameters can be used to route to a specific dish item.

So here, again I can click on Menu and go back to the menu here,

and then I can click on another dish and then come

back to the details of that specific dish here.

I can go back to the menu item and then go back to home.

So, now our Single Page Application is almost complete except for the About Us page.

That is second assignment for you.

With this, we complete this exercise.

So, in this exercise,

we have seen how we can use our parameters to pass information

to our React router which enables us to render

a dish and so the information about the route parameter can be passed into that dish

or rather passed into each component and then

used there to appropriately render the view.

With this, we complete this exercise.

This is a good time for you to do a good comment with

the message Single Page Applications part two.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play