How to build a simple counter using React

Simple Counter with React

React improves the creation of custom components, which you can render throughout your web-app using the ReactDOM.render() method. A custom component allows you to divide and conquer, separating logical and visual challenges into smaller pieces- giving you greater control over the display and functionalities of each part of the web-app.

For example, to create a bootstrap <Card />; component you’d code this:

function Card(props){
    return (
        <div className="card">
            <img className="card-img-top" src="http://via.placeholder.com/350x150" alt="Card image cap" />
            <div className="card-body">
                <h5 className="card-title">Card title</h5>
                <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    );
}

After declaring it, you are able to import and use it in your webapp like this:

//import react into the bundle
import React from 'react';
import ReactDOM from 'react-dom';
import Card from './component/Card.jsx'

ReactDOM.render(<Card />, document.querySelector('#root'));

Additionally, you can pass information through the Card component using props:

<!-- Use of the custom component -->
<Card imageUrl="http://via.placeholder.com/350x150" title="A nice image" />

… for usage within the render method of your Card component (notice the image src and card title):

//Declaration of custom component (Card.js)

function Card(props){
    return (
        <div className="card">
            <img className="card-img-top" src={props.imageUrl} alt="Card image cap" />
            <div className="card-body">
                <h5 className="card-title">{props.title}</h5>
                <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
                <a href="#" className="btn btn-primary">Go somewhere</a>
            </div>
        </div>
    );
}

Instructions

Create a seconds-counter component, called SecondsCounter. It should look like this one.

• The whole purpose of the component is to display how many seconds have passed since the website finished loading (onLoad).
• Use the ReactDOM.render() to render the component into the web-app.
• Use the setInterval() function to re-render de component on every second.
• The component does not need a local state, you can pass the number of seconds as props like this:

<SecondsCounter seconds={3434} />

• You can find the clock icon on the left of the component in Font Awesome.

Bonus

• Create an option to countdown from a given number.
• Create stop, reset, and resume functionality
• Create an alert when the user reaches a specified time, ie the user enters “10”, an alert should render notifying the user that their time was reached

Download Details:

Author: frankhurtado75

Source Code: https://github.com/frankhurtado75/simple-counter

#reactjs #react #javascript