4Geeks logo
Sobre Nosotros

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.

Data Science and Machine Learning - 16 wks

Full-Stack Software Developer - 16w

Buscar en lecciones

Aprendizaje social y en vivo

La forma más eficiente de aprender: Únete a una cohorte con compañeros, transmisiones en vivo, sesiones improvisadas de codificación, tutorías en vivo con expertos reales y mantenga la motivación.

← Volver a Proyectos

Simple Counter

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Video

Clic para abrir

Demo en vivo

No disponible

Duración promedio

4 hrs

Tecnologías

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.

Meta

Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación

Dificultad

beginner

Repositorio

Clic para abrir

Demo en vivo

No disponible

Duración promedio

4 hrs