Contador simple

React mejora la creación de componentes personalizados, que puedes representar a través de tu aplicación web utilizando el método ReactDOM.createRoot(). Un componente personalizado te permite dividir y conquistar, separando los desafíos lógicos y visuales en partes más pequeñas, lo que te brinda un mayor control sobre la pantalla y las funcionalidades de cada parte de la aplicación web.

Por ejemplo, para crear un componente bootstrap <Card /> codificarías esto:

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

Después de declararlo, puedes importar y utilizar en tu aplicación web de esta manera:

1// Importa react al bundle
2import React from 'react';
3import ReactDOM from 'react-dom';
4import Card from './component/Card.jsx'
5
6const root = ReactDOM.createRoot(document.querySelector('#root'));
7root.render(<App />);
8
9// Si usas una version de react anterior a la 18 puedes usar
10// ReactDOM.render de esta manera
11// ReactDOM.render(<Card />, document.quertSelector('#root'));

Adicionalmente, puedes pasar información a través de props:

1// Uso de componente personalizado
2<Card imageUrl="http://via.placeholder.com/350x150" title="A nice image" />

Para uso dentro del método de renderización de su componente:

1// Declaración de componente personalizado (Card.jsx)
2
3function Card(props){
4    return (
5        <div className="card">
6            <img className="card-img-top" src={props.imageUrl} alt="Card image cap" />
7            <div className="card-body">
8                <h5 className="card-title">{props.title}</h5>
9                <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p>
10                <a href="#" className="btn btn-primary">Go somewhere</a>
11            </div>
12        </div>
13    );
14}

1https://github.com/4GeeksAcademy/react-hello

📝 Instrucciones

Crea un componente de contador de segundos, llamado SecondsCounter. Debería verse como este.

• El propósito principal del componente es mostrar cuántos segundos han pasado desde que el sitio web terminó de cargarse (onLoad).
• Usa ReactDOM.createRoot() para representar el componente en la aplicación web.
• Usa la función setInterval() para volver a renderizar el componente cada segundo.
• El componente no necesita un estado local, puede pasar la cantidad de segundos como props de la siguiente manera:

1<SecondsCounter seconds={3434} />

• Puedes encontrar el icono del reloj a la izquierda del componente en Font Awesome.

🔥 Bonus

• Crear una opción de cuenta regresiva a partir de un número dado.
• Crear funciones de parar, reiniciar y resumir el contador.
• Crear una alerta cuando el usuario llega a un tiempo específico, es decir, el usuario ingresa "10", y una alerta debería mostrarse notificando al usuario que se alcanzó su tiempo.

Este y otros proyectos son usados para aprender a programar por parte de los alumnos de 4Geeks Academy Coding Bootcamp realizado por Alejandro Sánchez y muchos otros contribuyentes. Conoce más sobre nuestros Cursos de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.