Presentational and Container Components

Loading...

來自 The Hong Kong University of Science and Technology 的課程

Front-End Web Development with React

102 個評分

The Hong Kong University of Science and Technology

Front-End Web Development with React

102 個評分

課程 2（共 4 門，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

從本節課中

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.

Presentational and Container Components6:58

Exercise (Video): Presentational and Container Components21:46

React Components: Lifecycle Methods Part 28:16

Functional Components3:41

Exercise (Video): Functional Components14:02

與講師見面

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

When you've implemented the dish detail component in the first assignment,

you might have noticed that

the dish detail component operates purely on the props that are passed to

it from the menu component in the form of the selected dish details.

So, the dish detail component itself has no local state,

and is purely dependent on rendering its view based on the props that is passed on it.

So, it is acting as a pure presentational component as we might classify our components.

Similarly, a container component may simply

store the state information and pass the state information to its children.

Let's look at some details next.

Some people have informally classified the various kinds of components that we

use when we implement our React application into different cuts.

So, for example, we can talk about presentational components that are purely responsible

for rendering the view based on the props that they are passed in,

and then you could have container components that simply make

use of presentational components and pass props to

them and they are responsible for storing the state (the container components).

Similarly, we can talk about these as skinny and sat components.

Skinny components mean purely responsible for rendering the view and

fat components having a lot more information being tracked there in the form of state.

Similarly, we can even label them as dumb and smart components,

stateless and stateful components.

No matter how you classify them,

you begin to see that they can view components as of two kinds.

Again, these are informal ways of classifying the components.

There is no formal description of these kinds of components in React itself,

but this helps us to structure our application when we view

the components of different kinds as delineated here.

Let's look at specifically representational

and the container components in a little more detail.

Taking a broad view of presentational components,

we can consider presentational components to a mainly concerned with rendering the view,

that is how things look.

So, they are mostly interested in the markup and style,

so they become the repository for the markup and styles

for rendering the view to the screen.

So, they render the view based upon the data that is passed on to them through props.

So, we have already seen how we pass that

selected dish details through props to the dish detail components.

So that being one example of a presentational component.

Furthermore, presentational components do not maintain there own local state.

So, they won't maintain the state of the application in any way.

They may maintain some basic state with respect to only the UI state.

So for example, if you have a dialog box popped up or a model popped up on the screen,

that state of the dialog box of the model,

may be reflected in the local state, but beyond that,

the presentational components do not worry about

the application state itself and they simply depend upon

their opinion to passing the application state that is necessary for rendering the view.

So, this gives you a rough idea of how we view a presentational component.

On the other hand, we can view a container component as being responsible for

tracking the state or at least a part of the state of our application.

So, they are responsible for making things work.

So, they are more worried about fetching the data, say for example,

from a server and then using the data within

the application or to set up the state or maybe taking care of

updating the state in response to any user interactions on

the screen or updating the states based upon the data sent back from the server.

So, all these would be responsibilities of container component.

So, again this is just a broad way of specifying what

a container component may be used for,

and they make use of presentational components for actually rendering the view.

So, they could wrap the information

sent in by the presentational components in their own wrapping divs

within the container component in order to position

the views that are rendered by the presentational component on the screen,

but beyond that they will not be responsible for actually constructing the views.

They delegate that responsibility to the presentational component,

and also they are responsible for providing the data to the presentational component in

the form of props that can be passed in to the child component there.

So, they maintain the state and they

take care of any state updates and then they will take care

of communicating with the server in order to maintain

the state or reflecting the state update and so on.

So that becomes the responsibility of a container component.

So, you can clearly see the separation of concerns

between representational component and a container component.

So, if you view your React application as consisting of these two kinds,

then implementing your application or

at least thinking of how you implement your application becomes more easier.

So, you could only think about

presentational components that are purely responsible for the views,

and then you could think about container components

that make use of the presentational components in

order to construct the overall view of your application.

Again, this is just an informal way of looking at how you can

organize your React application itself into a hierarchy of components.

So, with this view,

let's go and work on our React application and

then reconstruct it to use a presentational component say for example,

we can redesign our menu component to be a pure presentational component,

and we can redesign another component on top of it as a parent,

which will be responsible for the state.

We have already lifted the state into app.js in the previous exercise of the last module.

探索我們的目錄

免費加入並獲得個性化推薦、更新和優惠。

Coursera 致力於普及全世界最好的教育，它與全球一流大學和機構合作提供在線課程。

© 2018 Coursera Inc. 保留所有權利。

通過 App Store 下載

通過 Google Play 獲取