React Components: Lifecycle Methods Part 1

Loading...

Del curso dictado por The Hong Kong University of Science and Technology

Front-End Web Development with React

141 calificaciones

The Hong Kong University of Science and Technology

Front-End Web Development with React

141 calificaciones

Curso 2 de 4 en SpecializationFull-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

De la lección

Introduction to React

In this module we get a quick introduction to front-end JavaScript frameworks and libraries, followed by an introduction to React. We will also learn about React components and JSX.

React Components3:41

Exercise (Video): React Components Part 124:25

React Components: State and Props9:17

Exercise (Video): React Components Part 222:33

React Components: Lifecycle Methods Part 114:18

Conoce a los instructores

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

We have just completed learning about a React component.

We have seen how we can create a React component by

defining a class and sub-classing the React component class.

Now, in the next module,

we'll learn about other kinds of React components.

Like for a class component in a React application,

every class component has a life cycle associated with it.

What exactly is a life cycle?

Let's briefly talk about that.

As we realize, a React application is made up of multiple React components that

are connected together to form the entire screen of your React applications view.

Now, each React component as in when it is required will be created by React

and then added into the DOM of your entire application.

So, every time a React component needs to be included into your applications view,

then the component that hosts the specific part of the view will be

created and added into the overall React component hierarchy.

So, a component passes through what we call as the life cycle for the component.

Now initially, the component doesn't exist,

then the component gets created and then once it is created,

then it can be mounted into your React application

at an appropriate point in the hierarchy of components,

then it will exist at that point for a period of time and then subsequently,

maybe you no longer require that view,

and so at the point,

the component can be removed from this hierarchy.

So that will be an unmounting of the component.

So, as you realize,

a component passes through a life cycle of creation,

mounting, and then existing in the hierarchy,

then unmounting, and then disappearing at the point.

Now in every stage of this life cycle React provides several life cycle hooks

or life cycle methods that can be invoked to perform certain operations.

So again, to summarize what I have just discussed,

a React component goes through

the following life cycle stages: the mounting of the component

after creation and in between if the view of the component needs to be updated,

then it gets updated.

So at that point, it will be in the updating stage,

and then when that component is no longer needed,

it'll be unmounted from the hierarchy so that will be

the unmounting stage of the life cycle for your component.

Now, as I mentioned,

there are several life cycle methods that are available in each stage.

The mounting stage, the updating stage,

and the unmounting stage.

So, these life cycle methods will be in invoked by React as

your component is passing through these stages of its life cycle.

Let's examine some of these life cycle methods.

Later on we will understand how we can make use of these life cycle methods to perform

certain operations required when

a component is passing through a particular stage of its lifecycle.

Let's first talk about

the life cycle methods that are available when the component is getting

mounted into the overall hierarchy of the React components.

Now in the mounting stage,

these methods that are available, a constructor, getDerivedStateFromProps,

render, and componentDidMount methods are

invoked when an instance of a component is created and inserted into the DOM.

So, at that time,

when it gets mounted into the DOM at that point these methods are going to be called.

The constructor will be called first,

the render will be called then,

then the componentDidMount will be called,

and so the componentDidMount will be

called after your component gets mounted into the DOM,

and then the view is rendered into the overall view of your application.

Now, if you see some of the older React documentation or some of the older examples,

you might also encounter people using another method called componentWillMount.

Now, with the React 16.3,

this method has been duplicated and you're no longer advised to use this method.

From 17.0 onward this method will be completely removed from React.

So, we would desist from using this method in our React application.

We will only use the constructor

then quite the render method obviously has to be used every single time.

The componentDidMount will be used when you need to

execute something after the component gets added into the DOM.

Then the getDrivedStateFromProps will be used if required.

Although I don't have an example to illustrate that to you.

Now, we'll look at an example of how we can make use of some of

these mounting life cycle methods by modifying

our application that we have been working on to see that

these life cycle methods indeed get called as the component is getting mounted.

At a later stage,

in another module we'll come back to the methods that are used

when a component is being updated and also when a component is being unmounted.

To help you understand how the life cycle methods are invoked,

let's go to our application that we have been working

on so far and in the menu component.

Now, you'll see that in the menu component that we have created in our application,

the constructor is already included there.

So, the constructor will be invoked when the menu component is created.

So, to illustrate to you that indeed this is going to be called,

I will put a simple console log statement in there saying,

"Menu Components constructor is invoked".

So that way, you can see in the console log that this indeed was called.

Now, similarly, I will take

this same console log and then we will use it in the render method.

So in the render method.

I'm going to also invoke that console log.

So, "Menu components render is invoked",

and let me add in a new method here,

new life cycle method here called componentDidMount,

and this method will be invoked again will test,

receive and this method is invoked.

So, we'll say componentDidMount and then I'll do a console log saying,

"Menu componentDidMount is invoked".

Now, I will add this in here just to illustrate to you that

these life cycle methods are indeed being called as the component is getting mounted.

So, in this example,

we see that when our React application gets created,

the App.GS will mount the menu component into its view,

and so at that point the menu component gets created and added into

our overall DOM for our React application.

So, let's execute this and then watch

the JavaScript console in our browser to see when these methods are getting invoked.

Going to our browser,

you'll see that our application has been rendered just like before.

There is no change to the view of your application,

but let me open the JavaScript console.

So here, I'm going to the view.

Developer JavaScript console.

If you're using another browser,

then you would similarly be able to access

the JavaScript console in the browser using a similar approach.

Look for the developer tools,

which are part of your specific browser that you are using.

So, again going into the JavaScript console,

you can see here that first statement that says,

menu component constructor is invoked.

Then, the next thing that is printed in the console says,

menu component render is invoked, and then finally,

Menu componentDidMount is invoked.

So you see how these three methods are invoked in that sequence,

as your component get mounted into your DOM by your reactor application.

So, this methods will allow you to get access to the component

at various stages of its creation and mounting into the DOM,

and if you need to perform any operation during that period,

you can include the appropriate code into that specific location,

either in the constructor,

or in the render,

or in the componentDidMount methods.

Now, we have already seen that in the constructor,

we are initializing the state for the component,

right within the constructor.

So, that is one use of the life-cycle method.

Similarly, if we want to do something after the component is mounted into the DOM,

then we can include that in the componentDidMount method.

Now we will see the use of that in one of

the later exercises in the last module of this course.

As we are working on our React application,

let me also draw your attention to a developer tool that is available for React,

called as react-devtools which is available.

This is the GitHub repository for it.

This is an extension that gets added to your browsers,

either Chrome or Firefox,

or even available as a standalone app,

if you would prefer to use it.

Now, in my case since I am using the Chrome browser,

I'm going to install the Chrome browser extension,

and then make use of it within my application.

So this is an interesting tool

that will be very useful as you're developing your React application,

because you can easily watch

things when your React application gets created and rendered,

then you can see various aspects of your React application including the DOM hierarchy,

which will enable you to check for any errors.

So if you encounter any problems in the way the views are rendered,

then you can go and check in the React developer tools.

Let me show you react-devtools for the specific application that we have been working on.

Now before we do that,

if your want to add the developer tools,

go to the appropriate browser extension there,

and then add it into your browser.

So for Chrome, you go to the Chrome dev store and then from there

add the extension for Chrome, similarly for Firefox.

If you want to use a standalone app,

then you can download that and then make use of it.

Now, I find that it is a lot more easy for me to integrate the extension into my Chrome,

because I'm already using the console log for watching the JavaScript console,

and so the react-devtools will add one more tab to

that developer tools window that I bring up at the bottom of my browser,

and so it is more convenient for me to use the react-devtools that way.

Now, a link to the react-devtools is available in

the additional resources off this section.

Now going to my React application,

right there in the developer tools,

I have the react-devtools installed there.

So, when you open it you can see the structure of your DOM there,

so you can see the app here.

Now, the advantage of doing this is that you can go in and watch

all the aspects and see

all the properties that are being sent to each one of these components,

and also for example in the menu,

you can go into the menu and then see the props that have come to the menu,

so you can easily find out whether your props are being correctly

passed into the menu item or not,

and so on, and then when you click on a particular dish as you realize,

you're going to be rendering that particular dish there.

So the details of the dish are shown down below here,

and you would also see in the React developer tools,

you can see the state here,

and you can see that the selected dish is

initialized to that dish that we just selected there.

So, that's the advantage of react-devtools.

It will allow you to go in and see the different aspects,

the different parts of the application,

and be able to check to see if you are encountering any errors.

If the props are been correctly passed,

if the step is correctly initialized,

all these can be easily useful while you're developing your React application.

So, take advantage of the react-devtools to help

you track as you develop your React application.

Explora nuestro catálogo

Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.

Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.

© 2018 Coursera Inc. Todos los derechos reservados.

Descargar en la App Store

Consíguelo en Google Play