Source: https://velopert.com/wp-content/uploads/2016/03/react.png I’m a huge fan of Marvel. I’ve been following the story line leading up to the big fight against Thanos since Iron Man was released in 2008. But at the same time, I like . Recently I’ve been learning bits and pieces of and I thought to myself, “Why not make something useful out of these random pieces of tricks I learned!” See it . programming ReactJS here If the font looks like TNR, wait a bit and refresh the page. It takes a while to download the Avengers fonts. This was one of the first few apps I made during my earlier learning stages. I’ve learned a lot more since then. I plan on sharing my other works in the future to document my learning progress. It’s amazing how much time we don’t use that we otherwise could use for just learning and building. This gap year I’m taking is making me realize that. My belief in “learning by doing” stems from the idea of building up certainty. At first I had no idea what the hell I was doing with the earlier fiddling I did with ReactJS. There were tons of trial and error involved like setting up a damn project for starters! Afterward, I continued looking around and made sure I understood at least one or two things from the code that I knew contributed to the output. I’m still in that process (I don’t think you’ll ever really get out of that honestly), and I’ll continue on that path because it helps me fill in gaps, and at the same time, build on previous knowledge that will eventually culminate to bigger projects. Doing this was easy, seeing as a simple command such as was all I needed to setup everything at hand. Makes life much easier than having to setup everything from Babel to Webpack. Programmers are notoriously lazy, so shortcuts like these are always welcomed and adapted. really create-react-app My experience in Python and MATLAB programming also helped in understanding JS as a whole. It’s pretty easy to migrate skills to other languages when you start to realize that they all pretty much follow the same structure and logic one way or another. ReactJS is pretty big, let alone JS, so I’d say it’s still a long way to go. Here’s what the contents of the html file look like after I did some cleaning: <!DOCTYPE html><html><head><meta charset="utf-8"><title>ReactJS Countdown Timer</title></head> <body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html> Everything gets set up for you quite neatly. Here’s what the main index.js file looks like: import React from 'react';import ReactDOM from 'react-dom';import './index.css';import App from './App'; ReactDOM.render(< />, document.getElementById('root')); App The rendering happens here by “attaching” the contents of “App” into the root div tag in the HTML file above. Think of it like inserting a previously coded 200+ line HTML file into that root div tag. That’s how ReactJS works in summary. You program in JavaScript eXtension (JSX), making it look like you’re programming still in HTML when in fact what you’re using is JavaScript. Pretty awesome stuff. The bulk of the rendering happens in App.js, and as you can see below. JSX makes it feel like you’re writing both HTML and JS at the same time. Amazing stuff! import React, { Component } from 'react';import './App.css';import Clock from './Clock'; App extends { class Component _constructor_(_props_) {  
      super(props);  
      this.state = { deadline: 'May, 4, 2018' };  
 }

 render() {  
      return (  
          <div className="App">  
               <div className="App-title">  
                    Avengers: Infinity War  
               </div>  
               <div className="App-date">  
                    {this.state.deadline}  
               </div>

               <_Clock_ deadline={ this.state.deadline }/>  
          </div>  
      );  
 } }export default App; The functionality of the countdown timer was put in another file called . The bulk of the math and the actual rendering that allows one to see in real time the countdown is all there. I haven’t intuitively understood the component lifecycle yet, so I can’t explain yet in simple terms how and work. I know it works, but I just can’t find the simple words yet to describe and . I don’t want to presume knowledge in something I don’t know well enough of. Told you there are still some gaps; I’m working on it! Clock.js componentWillMount() componentDidMount() why how import React, { Component } from 'react';import './App.css'; Clock extends { ( ) {super(props);this.state = {days: 0,hours: 0,minutes: 0,seconds: 0,};} class Component constructor props componentWillMount() {  
      this.getTimeUntil(this.props.deadline);  
 }

 componentDidMount() {  
      setInterval(() _\=>_ this.getTimeUntil(this.props.deadline), 1000);  
 }  

 leading0(_num_) {  
      return num < 10 ? '0' + num : num;  
 }

 getTimeUntil(_deadline_) {  
      _const_ time = _Date_.parse(deadline) - _Date_.parse(new Date());  
      if(time < 0) {  
           this.setState({ days: 0, hours: 0, minutes: 0, seconds: 0 });  
        
      } else {  
           _const_ seconds = Math.floor((time/1000)%60);  
           _const_ minutes = Math.floor((time/1000/60)%60);  
           _const_ hours = Math.floor((time/(1000\*60\*60))%24);  
           _const_ days = Math.floor(time/(1000\*60\*60\*24));  
           this.setState({ days, hours, minutes, seconds });  
      }  
 }

 render() {  
      return(  
           <div>  
                <div className="Clock-days">  
                     {this.leading0(this.state.days)} Days  
                </div>

                <div className="Clock-hours">  
                     {this.leading0(this.state.hours)} Hours  
                </div>

                <div className="Clock-minutes">  
                     {this.leading0(this.state.minutes)} Minutes  
                </div>

                <div className="Clock-seconds">  
                     {this.leading0(this.state.seconds)} Seconds  
                </div>  
           </div>  
      );  
 } }export default Clock; If you’re new to ReactJS, you might have noticed that the div tag has instead of . Remember, we’re still programming in JS, and the word is already reserved. There are some other minute details like this also. For instance, using or instead of . I’m still new to all of this so I’m still navigating. className class class const let var I’ve hosted everything on my in case anybody wanted to take a look at the whole shebang. Github page Still got a long way to go! Gotta keep practicing. I mean I gotta host my Machine Learning backends online somewhere somehow, right?

Super

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Ready for Infinity War? Here’s a Simple Countdown Timer Using ReactJS!

Too Long; Didn't Read

Companies Mentioned

Joseph J. Bautista

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Ready for Infinity War? Here’s a Simple Countdown Timer Using ReactJS!

Too Long; Didn't Read

Companies Mentioned

Joseph J. Bautista

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES