Simple Counter

Contador Simple con React

React mejora la creación de componentes personalizados, que puedes representar a través de tu aplicación web utilizando el método ReactDOM.render(). Un componente personalizado te permite dividir y conquistar, separando los desafíos lógicos y visuales en partes más pequeñas, lo que le 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//import react al bundle
2import React from 'react';
3import ReactDOM from 'react-dom';
4import Card from './component/Card.jsx'
5
6ReactDOM.render(<Card />, document.quertSelector('#root'));

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

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

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

1//Declaration of custom component (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}

🌱 Cómo comenzar este proyecto

No clones este repositorio porque vamos a usar una plantilla diferente.

Recomendamos abrir el react boilerplate usando una herramienta de aprovisionamiento como Codespaces (recomendado) o Gitpod. Alternativamente, puedes clonarlo en tu computadora local usando el comando git clone.

Este es el repositorio que necesitas abrir o clonar:

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

👉 Por favor sigue estos pasos cómo comenzar un proyecto de codificación.

💡 Importante: Recuerda guardar y subir tu código a GitHub creando un nuevo repositorio, actualizando el remoto (git remote set-url origin <your new url>) y subiendo el código a tu nuevo repositorio usando los comandos add, commit y push desde la terminal de git.

📝 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).
• Use el ReactDOM.render() para representar el componente en la aplicación web.
• Use 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.

🔥 Bono

• Crear una opción de cuenta regresiva a partir de un número dado.
• Crear funciones de parada, reinicio y reanudación
• Crear una alerta cuando el usuario llega a un tiempo específico, es decir, el usuario ingresa "10", 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 Curso de Programación para convertirte en Full Stack Developer, o nuestro Data Science Bootcamp.