Skip to content

Commit

Permalink
Update README.es.md
Browse files Browse the repository at this point in the history
  • Loading branch information
josemoracard authored Oct 18, 2023
1 parent 66a4f2b commit 281f1c2
Showing 1 changed file with 12 additions and 17 deletions.
29 changes: 12 additions & 17 deletions README.es.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,51 +2,46 @@
# Landing page con React.js
<!--endhide-->

```
🔥 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.
```
> 🔥 Este ejercicio está diseñado para realizarse con un compañero. Si colaboras, discutes e intercambias ideas, absorberás el contenido más rápidamente.
<p align="center">
<img height="200" src="https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/preview.gif?raw=true" />
<img height="500" src="https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/preview.gif?raw=true" />
</p>

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

Vamos a construir [este landing page](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/preview.gif) pero utilizando react y componentes funcionales (de tipo función).
Vamos a construir [esta landing page](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/preview.gif) 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.
> Nota: las tarjetas tienen contenido diferente, piensa en DRY (Don't Repeat Yourself), que significa: "No Te Repitas" y declara solo ***un*** componente `<Card />`, luego usa `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](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.
Recomendamos abrir el `react boilerplate` usando un entorno de desarrollo como [Codespaces](https://4geeks.com/es/lesson/tutorial-de-github-codespaces) (recomendado) o [Gitpod](https://4geeks.com/es/lesson/como-utilizar-gitpod). Alternativamente, puedes clonarlo en tu computadora local usando el comando `git clone`.

Este es el repositorio que necesitas abrir o clonar:

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

**👉 Por favor sigue estos pasos** [cómo comenzar un proyecto de codificación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).
**👉 Por favor sigue estos pasos sobre** [cómo comenzar un proyecto de programación](https://4geeks.com/es/lesson/como-comenzar-un-proyecto-de-codificacion).

💡 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.
> 💡 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](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/strategy.gif?raw=true)
![Estrategia para construir una landing page con React](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/strategy.gif?raw=true)

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 />`.
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? Lo más seguro es que tienes que dividir tu código en componentes: `<Jumbotron />`, `<Navbar />`, `<Card />`.

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

Este y otros proyectos son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Curso de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).
Este y otros proyectos son usados para [aprender a programar](https://4geeksacademy.com/es/aprender-a-programar/aprender-a-programar-desde-cero) por parte de los alumnos de 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) realizado por [Alejandro Sánchez](https://twitter.com/alesanchezr) y muchos otros contribuyentes. Conoce más sobre nuestros [Cursos de Programación](https://4geeksacademy.com/es/curso-de-programacion-desde-cero?lang=es) para convertirte en [Full Stack Developer](https://4geeksacademy.com/es/coding-bootcamps/desarrollador-full-stack/?lang=es), o nuestro [Data Science Bootcamp](https://4geeksacademy.com/es/coding-bootcamps/curso-datascience-machine-learning).

0 comments on commit 281f1c2

Please sign in to comment.