From 7d8dab061a79a54b2313481f6526ded01a786a99 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 21:04:57 +0200 Subject: [PATCH 1/3] Update README.md --- README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 713c3084..c4b3edb8 100644 --- a/README.md +++ b/README.md @@ -2,21 +2,21 @@ # Landing page with React -> 馃敟 This exercise is meant to be done with a partner. Collaborate, and discuss exchanges with others and your learning will be easier and faster. +> 馃敟 This exercise is meant to be done with a partner. Collaborate, discuss ideas, and exchange insights with others, and your learning will be easier and faster. -

+

Technologies: HTML, CSS, JS, React. Let's build [this landing page](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/preview.gif) using React Function Components. -The idea is to split Bootstrap components into different function Components, they'll be all imported into the main component Home.jsx +The idea is to split Bootstrap components into different function components; they'll all be imported into the main component Home.jsx ***Please use Function Components for this*** -Note: the Cards have different content, think DRY (Don't repeat yourself) and declare only ***one*** component and use ```props``` to handle different content. +> Note: The cards have different content, think DRY (Don't Repeat Yourself) and declare only ***one*** component and use `props` to handle different content. -## 馃尡 How to start this project +## 馃尡 How to start this project Do not clone this repository because we are going to be using a different template. @@ -24,21 +24,21 @@ We recommend opening the `react boilerplate` using a provisioning tool like [Cod This is the repository you need to open or clone: -``` +```text https://github.com/4GeeksAcademy/react-hello ``` **馃憠 Please follow these steps on** [how to start a coding project](https://4geeks.com/lesson/how-to-start-a-project). -馃挕 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin `), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal. +> 馃挕 Important: Remember to save and upload your code to GitHub by creating a new repository, updating the remote (`git remote set-url origin `), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal. ## Strategy -Take a few minutes to analyze 馃く the image and draw your strategy on it, mark the components that you are going to develop: +Take a few minutes to analyze 馃く the image and draw your strategy on it, identify the components that you are going to develop: ![Strategy for building a landing page with react](https://github.com/breatheco-de/exercise-landing-page-with-react/blob/master/strategy.gif?raw=true) -The key of this project is to help you understand how to pick the components that you want to build, you have to think the best way to organize and avoid future errors. What can be re-used? If your code is tuning into something big and hard to understand you probably will need to split it into components: ``, ``, ``. +The key of this project is to help you understand how to pick the components that you want to build. You have to think about the best way to organize and avoid future errors. What can be re-used? If your code is turning into something big and hard to understand, you will probably need to split it into components: ``, ``, ``. That is it! Start coding your first React website. Have fun!馃帄 From 66a4f2b64bd45a37d238a0b0237aaf7b4bf1f063 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 21:17:21 +0200 Subject: [PATCH 2/3] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c4b3edb8..3dc36ece 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,9 @@ > 馃敟 This exercise is meant to be done with a partner. Collaborate, discuss ideas, and exchange insights with others, and your learning will be easier and faster. -

+

+ +

Technologies: HTML, CSS, JS, React. @@ -14,7 +16,7 @@ The idea is to split Bootstrap components into different function components; th ***Please use Function Components for this*** -> Note: The cards have different content, think DRY (Don't Repeat Yourself) and declare only ***one*** component and use `props` to handle different content. +> Note: The cards have different content, think DRY (Don't Repeat Yourself) and declare only ***one*** `` component, then use `props` to handle different content. ## 馃尡 How to start this project From 281f1c2be7da31cf76ae5dd2ac955631c47779b4 Mon Sep 17 00:00:00 2001 From: Jose Mora <109150320+josemoracard@users.noreply.github.com> Date: Wed, 18 Oct 2023 21:21:50 +0200 Subject: [PATCH 3/3] Update README.es.md --- README.es.md | 29 ++++++++++++----------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/README.es.md b/README.es.md index 2690cb77..9f764068 100644 --- a/README.es.md +++ b/README.es.md @@ -2,51 +2,46 @@ # 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. -``` +> 馃敟 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.

- +

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 ``, 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 `) 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 `) 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?: ``, ``, ``. +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: ``, ``, ``. -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). \ No newline at end of file +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).