Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
Clic para abrirDemo en vivo
No disponible
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.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}
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.
Crea un componente de contador de segundos, llamado SecondsCounter. Debería verse como este.
1<SecondsCounter seconds={3434} />
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.
Tutoriales y ejercicios de 4Geeks Coding Projects para personas que están aprendiendo a codificar o mejorando sus habilidades de codificación
Dificultad
beginnerRepositorio
Clic para abrirVideo
Clic para abrirDemo en vivo
No disponible
Duración promedio
4 hrs
Tecnologías