A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar

Regístrate en 4Geeks

← Volver a Proyectos

Simple Counter

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

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}

🌱 Cómo comenzar este proyecto

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

Recomendamos abrir el react boilerplate usando un entorno de desarrollo 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:

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

👉 Por favor sigue estos pasos sobre cómo comenzar un proyecto de programació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).
  • 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.

Regístrate para obtener acceso a archivos y video de la solución

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Regístrate para obtener acceso a archivos y video de la solución

Lo usaremos para darte acceso a la comunidad.
¿Ya tienes una cuenta? Inicia sesión aquí.

Al registrarte estás aceptando nuestros Términos y condiciones y Política de privacidad.

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías

Dificultad

  • easy

Duración promedio

4 hrs

Tecnologías