Merge pull request #13 from josemoracard/jose1-README

fixed text README
breatheco-de · Oct 25, 2023 · 1657afe · 1657afe
2 parents 3dee00e + a7e0f7e
commit 1657afe
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 35 deletions.
diff --git a/README.es.md b/README.es.md
@@ -2,7 +2,7 @@
 # Traffic Light with React
 <!-- endhide -->
 
-A veces queremos crear componentes que mantengan un estado interno en el tiempo, imaginemos un semáforo que cambia de color cada 3 segundos, para implementar eso tendríamos una variable `color` que puede tener como valor cualquier color entre [amarillo, rojo, verde]
+A veces queremos crear componentes que mantengan un estado interno en el tiempo. Imaginemos un semáforo que cambia de color cada 3 segundos, para implementar eso tendríamos una variable `color` y le colocaríamos un color por defecto:
 
 ```js
 let color = "blue";
@@ -11,50 +11,55 @@ let color = "blue";
 Pero solo con tener esa variable no basta, necesitamos que cada vez que la variable color cambie también lo haga el código HTML del semáforo, para eso utilizamos el hook de react llamado `useState`:
 
 ```js
-//        ↓ variable name             ↓ default value
-const [ color, setColor] = useState("red");
-//               ⬆ function to change the color
+//        ↓ nombre de variable         ↓ valor por defecto
+const [ color, setColor ] = useState("red");
+//               ⬆ función para cambiar la variable "color"
 ```
-De ahora en adelante, cada vez que utilicemos la function setColor para cambiar el valor de la variable color, el HTML del componente también se actualizará para reflejar el cambio.
 
-> Puedes [leer más sobre hooks aquí](https://content.breatheco.de/lesson/react-hooks-explained).
+De ahora en adelante, cada vez que utilicemos la función `setColor` para cambiar el valor de la variable `color`, el HTML del componente también se actualizará para reflejar el cambio.
+
+> Puedes [leer más sobre hooks aquí](https://4geeks.com/es/lesson/react-hooks-explained-es).
 
 ## 🌱 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.
 
-# 📝 Instrucciones
+## 📝 Instrucciones
 
 Simulemos un semáforo [como este](https://github.com/breatheco-de/exercise-traffic-light-react/blob/master/preview.gif).
 
 La luz tiene que brillar cuando se hace clic.
 
-- Todo el propósito del componente es mostrar un semáforo con luces de lectura, amarillas y verdes.
-- Cuando se hace clic (se selecciona) alguna luz, ésta debe brillar, pero las otras luces deben dejar de brillar.
+- Todo el propósito del componente es mostrar un semáforo con luces roja, amarilla y verde.
+- Cuando se hace clic (se selecciona) alguna luz, esta debe brillar, pero las otras luces deben dejar de brillar.
 - El componente debe tener un estado que almacene el color actual que debe brillar, por eso debes usar el hook `useState` de la siguiente manera:
+
 ```js
-const [ color, setColor] = useState("red");
+const [ color, setColor ] = useState("red");
 ```
-- Utiliza ReactDOM.render para procesar el componente en el DOM de esta manera
+
+- Utiliza la función `setColor` para cambiar el color, y el componente se volverá a renderizar automáticamente (porque está vinculado con `useState`).
+- Utiliza ReactDOM.render para renderizar el componente en el DOM de esta manera:
+
 ```js
 ReactDOM.render(<TrafficLight />, document.querySelector('#app'));
 ```
+
 ## 🔥 Bonus
 
 + 2 Crea un botón que, al hacer clic en él, alterna el color seleccionado del semáforo entre rojo, verde y amarillo.
++ 10 Tener un botón que al hacer clic en él, añada un color extra "púrpura" al semáforo.
 
-+ 10 Tener un botón que al hacer clic en él anuncie un color extra "púrpura" al semáforo.
-
-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).
diff --git a/README.md b/README.md
@@ -2,39 +2,39 @@
 # Traffic Light with React
 <!-- endhide -->
 
-Sometimes we want to create components with an internal state that changes over time, imagine a traffic light that changes color every 3 seconds, for that we normally will make a variable color and set it to a default color:
+Sometimes we want to create components with an internal state that changes over time. Imagine a traffic light that changes color every 3 seconds, for that we normally initialize a variable `color` and set it to a default color:
 
 ```js
 let color = "blue";
 ```
 
-But we want our component to re-render and change the website HTML every time the variable color changes, that's why we use hooks:
+But we want our component to re-render and change the website's HTML every time the variable `color` changes, that's why we use hooks:
 
 ```js
-//        ↓ variable name             ↓ default value
-const [ color, setColor] = useState("red");
-//               ⬆ function to change the color
+//        ↓ variable name              ↓ default value
+const [ color, setColor ] = useState("red");
+//               ⬆ function to change the "color" variable
 ```
 
-From now on, every time we use the function `setColor` to change the variable color, the component will re-render and the entire traffic light HTML will be updated with the new color. 
+From now on, every time we use the function `setColor` to change the `color` variable, the component will re-render and the entire traffic light HTML will be updated with the new color. 
 
 > You can [read more about hooks here](https://content.breatheco.de/lesson/react-hooks-explained).
 
-## 🌱  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.
 
-We recommend opening the `react boilerplate ` using a provisioning tool like [Codespaces](https://4geeks.com/lesson/what-is-github-codespaces) (recommended) or [Gitpod](https://4geeks.com/lesson/how-to-use-gitpod). Alternatively, you can clone it on your local computer using the `git clone` command.
+We recommend opening the `react boilerplate` using a provisioning tool like [Codespaces](https://4geeks.com/lesson/what-is-github-codespaces) (recommended) or [Gitpod](https://4geeks.com/lesson/how-to-use-gitpod). Alternatively, you can clone it on your local computer using the `git clone` command.
 
 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 <your new url>`), 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 <your new url>`), and uploading the code to your new repository using the `add`, `commit` and `push` commands from the git terminal.
 
 
 ## 📝 Instructions
@@ -44,23 +44,23 @@ Let's simulate a traffic light [like this one](https://github.com/breatheco-de/e
 The light has to glow when clicked.
 
 - The whole purpose of the component is to display a traffic light with red, yellow and green lights.
-- When any light is clicked (selected) it has to glow, but the other lights have to stop glowing.
+- When any light is clicked (selected), it has to glow, but the other lights have to stop glowing.
 - The component must have a hooked state variable that tracks the color:
 
 ```js
-const [ color, setColor] = useState("red");
+const [ color, setColor ] = useState("red");
 ```
 
-- Use the setColor function to change the color and the component will automatically re-render (because it's hooked with `useState`).
-
-- Use the ReactDOM.render to render the component into the DOM like this
+- Use the `setColor` function to change the color, and the component will automatically re-render (because it's hooked with `useState`).
+- Use the ReactDOM.render to render the component into the DOM, like this:
+  
 ```js
 ReactDOM.render(<TrafficLight />, document.querySelector('#app'));
 ```
 
 ## 🔥 Bonus
 
 + 2 Create one button that when you click on it, cycles the traffic light selected color between red, green and yellow.  
-+ 10 Have a button that when clicked it ads an extra color "purple" to the traffic light.  
++ 10 Have a button that when clicked, it adds an extra color "purple" to the traffic light.  
 
-This and many other projects are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).
+This and many other projects are built by students as part of the 4Geeks Academy [Coding Bootcamp](https://4geeksacademy.com/us/coding-bootcamp) by [Alejandro Sanchez](https://twitter.com/alesanchezr) and many other contributors. Find out more about our [Full Stack Developer Course](https://4geeksacademy.com/us/coding-bootcamps/part-time-full-stack-developer), and [Data Science Bootcamp](https://4geeksacademy.com/us/coding-bootcamps/datascience-machine-learning).