4Geeks logo
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.

Full-Stack Software Developer

Data Science and Machine Learning - 16 wks

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

Continúa aprendiendo gratis sobre:

Landing Page con React

Meta

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

Dificultad

easy

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

12 hrs

Tecnologías

Landing page con React.js

🔥 Este ejercicio está diseñado para realizarse en  
grupos de 2 o máximo 3 personas.
   Si colaboras, discutes e intercambias ideas absorberás el contenido más rápidamente.

Tecnologías: HTML, CSS, JS, React.

Vamos a construir este landing page pero utilizando react y componentes funcionales (de tipo función).

La idea es dividir los componentes de Bootstrap en diferentes componentes de función, todos se importarán en el componente principal Home.js

Por favor usa los Componentes de Función para esto

Nota: las tarjetas tienen un contenido diferente, piense DRY (no se repita) y declare solo un componente y use props para manejar contenido diferente.

🌱 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.

Estrategia

Tomate unos minutos para analizar 🤯 la imagen y dibuja tu estrategia sobre ella, marca los componentes que vas a desarrollar:

Strategy for building a landing page with react

Lo que realmente queremos lograr con este ejercicio es que aprendas a decidir qué componentes vas a crear, ¿Qué crees que deba ser un componente? ¿Qué se va a reutilizar? ¿Cómo puedes hacer que tu código quede realmente ordenado y prevenir futuros errores?: <Jumbotron />, <Navbar />, <Card />.

Una vez terminada la estrategia puedes empezar a codificar, ¡Empieza a programar 🎊!

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

easy

Repositorio

Clic para abrir

Video

No disponible

Demo en vivo

No disponible

Duración promedio

12 hrs