We have seen so far what a React web-app is, the states and lifecycle of a React component. We also created a basic clock using a function to re-render the page at each second which if you think can be achieved with or without React. React doesn’t recommend using multiple renders instead it uses a stateful approach where the page is re-rendered once a state is altered.
Our aim for this article will be to take up the code we had written in the previous article, and create a stateful solution that will help us achieve the same result. To start let us recall what we had developed in the previous article,
Now what is the component in the above example ? Actually, if you pay attention there is no component whatsoever. We are assigning a nested JSX element named “myElement” to contain the latest time and rendering the same every second, which is one of the worst ways to implement using React. Now we will start to implement it using the state and lifecycle methods which will require a classful component, let us start by creating one beforehand.
Now that we have defined the class to be “Clock” we must think of the process first. “Props” is the set of attributes that rarely change while “State” is the set of observable attributes that are supposed to change over time. Now if we think about our own situation, our clock has exactly two parts one is the title that says “Welcome to GeeksforGeeks!” this should be implemented using props as it will not be changing throughout the lifetime; the other part is the time itself that should be changed at each second. Let us just use the constructor and render method to first create the backbone method to show the title and time without updating it at regular intervals.
Now that we have created our own component Clock and have rendered what we require, we only need to figure out a way of updating the time each second. Now it is clear that we have to set an interval to update the state at each second and this should be done as soon as the clock component is mounted. Thus we have to use a lifecycle function componentDidMount() where we will set an interval to update the state and to make the app efficient we will use componentWillUnmount() method to clear the interval. Let us see the following implementation.
Congratulations! You just created a React web app using States, Props and some of the lifecycle methods. You might be asking is that all? No, it isn’t even a nibble of the whole platter stay tuned for the upcoming articles where we dive deeper into React and create some more projects on the go.
- ReactJS | Lifecycle of Components
- ReactJS | State in React
- ReactJS | State vs props
- HTML & CSS | Tabindex attribute & Navigation bars
- Google Amp amp-ad
- Google AMP amp-accordion
- How to create Nested Accordion using Google AMP amp-accordion?
- How to create Hidden Header using Google AMP amp-accordion?
- How to create Dynamic Header using Google AMP amp-accordion?
- Google AMP amp-facebook-like
- Google AMP amp-carousel
- Google AMP amp-date-countdown
- Google AMP amp-brightcove
- Google AMP amp-bind-recaptcha
- Google AMP amp-autocomplete
- How to disable download option in amp-audio in Google AMP ?
- How to set custom media notification with amp-audio in Google AMP ?
- How to set an image placeholder for amp-anim in Google AMP ?
- ReactJS | Introduction to JSX
- ReactJS | ReactDOM
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.