Merge branch 'master' into master

Author: brauliodiez

01-use-state/Readme.md

@@ -18,7 +18,7 @@ and can be edited using an **input**.
 
 ## Steps
 
-- First we copy the previous example, and do a _npm install_
+- First we copy the previous example, and do a _npm install_.
 
 ```bash
 npm install
@@ -45,14 +45,14 @@ export const MyComponent: React.FC = () => {
 
 - Using the reserved word _export_ we can expose this file to other modules.
 
-- It is not strictly necessary to type it with _React.FC_ (Function Component), but It's a good idea, sticking to _Typescript_ will help us to have
+- It is not strictly necessary to type it with _React.FC_ (Function Component), but it's a good idea, sticking to _Typescript_ will help us to have
   fewer headaches in the future.
 
 - The component is just a function that returns elements from React.
   Notice that in this case we have not added _Props_ since it does not consume any.
 
 - Let's go for the interesting part, surely if we use the Java on Angular
-  mindset, we would ty implementing something like (**IMPORTANT: THIS IS WRONG**).
+  mindset, we would ty implementing something the following (**IMPORTANT: THIS IS WRONG**).
 
 ```diff
 export const MyComponent : React.FC = () => {
@@ -73,13 +73,13 @@ export const MyComponent : React.FC = () => {
 If you come to a React project and you come across code like this, it's a bad smell, looks like the person that have coded it did not take the time to learn the basics of this library, let's see why:
 
 - When creating a variable, each time the component is repainted, the value
-  of the variable _myName_ will always be _John Doe_, why? the component
+  of the variable _myName_ will always be _John Doe_. Why? the component
   is just function that is executed over and over on each repaint.
 
-- If we asign a value directly to the _input_ contro, we are skipping to
+- If we asign a value directly to the _input_ we are skipping two
   main pillars of React: unidirection flow and asynchronous state assignment.
 
-If you want to see it in action (input not working) you just have to add it to the _app.tsx_ file
+If you want to see it in action (input not working) you just have to add it to the _app.tsx_ file.
 
 _./src/app.tsx_
 
@@ -93,7 +93,7 @@ export const App = () => {
 };
 ```
 
-Ok ... How can I handle this? Using React hooks! Let's take a look to _React.useState_, this hook:
+Ok... How can I handle this? Using React hooks! Let's take a look to _React.useState_, this hook:
 
 - Is initialized with a default value.
 
@@ -110,7 +110,7 @@ have a _setName_ or a _setLastname_?
 
 - Let's go and code this component using _Hooks_.
 
-First we make use of the _setState_
+First we make use of the _setState_.
 
 _./src/demo.tsx_
 
@@ -120,7 +120,7 @@ export const MyComponent: React.FC = () => {
 +  const [myName, setMyName] = React.useState('John Doe');
 ```
 
-- As we have named our _getter_ _myName_ it works for us
+- As we have named our _getter_ _myName_, it works for us
   to both to display the name in the _h4_, as well as in the
   _input_
 
@@ -130,8 +130,8 @@ export const MyComponent: React.FC = () => {
 
 What do we have here?
 
-- \*_e_: argument of the _eventHandler_, gives us information about the event, exposes a series of properties ..
-- **e.target**: which DOM element generated the event.
+- \*_e_: argument of the _eventHandler_, gives us information about the event, exposes a series of properties.
+- **e.target**: which DOM Element generated the event.
 - **e.target.value**: what value does this element have (the value property
   of the DOM Element that generated the event).
 
@@ -149,15 +149,15 @@ arguments and pass it to the _myName_ _setState_ function.
 
 How is going to work?
 
-- _setMyName_ request update the state.
+- _setMyName_ requests to update the state.
 - This will launch a rerender of the component.
 - When the component code is executed and reaches the line
   code that does the _useState_ instead of return _John Doe_, it will
   will supply the name that was stored with _setState_
 - When rerendering the component that new value will be shown in the
   screen.
 
-You have to change your mindset, ... try to repeat this example
+You have to change your mindset, try to repeat this example
 without help and understand it well, it is your first big step to understand
 how this technology works.
 

01-use-state/Readme_es.md

@@ -19,17 +19,17 @@ un **h4**, y por otro permita editarlo utilizando un **input**.
 
 ## Paso a Paso
 
-- Primero copiamos el ejemplo anterior, y hacemos un _npm install_
+- Primero copiamos el ejemplo anterior y hacemos un _npm install_
 
 ```bash
 npm install
 ```
 
-- Vamos a crear un fichero que llamaremos _demo.tsx_, vayamos paso a paso
-  primero nos importamos **React** ¿Por qué si de primeras no uso nada que
-  ponga _React._ porque en el momento que empezamos a poner tsx/jsx
-  (es decir esos _h1_, _input_ o _div_ que después se traducen a
-  _React.createElement_ es necesario importarlo).
+- Vamos a crear un fichero que llamaremos _demo.tsx_. Vayamos paso a paso:
+  primero nos importamos **React**. ¿Por qué si de primeras no uso nada que
+  ponga _React_? porque en el momento que empezamos a poner tsx/jsx
+  (es decir, esos _h1_, _input_ o _div_ que después se traducen a
+  _React.createElement_) es necesario importarlo.
 
 _demo.tsx_
 
@@ -51,11 +51,11 @@ export const MyComponent: React.FC = () => {
 - No es extrictamente necesario tiparlo con _React.FC_ (Function Component), pero
   es buena idea, todo lo que nos atemos a _Typescript_ nos servirá para tener
   menos dolores de cabeza en el futuro.
-- El componente no es más que una functiona que devuelve elementos de React.
+- El componente no es más que una función que devuelve elementos de React.
   Fijate que en este caso no hemos puesto _Props_ ya que no consume ninguna
   del exterior.
 
-- Vamos a por la parte interesante, seguro que nuestra mente Java on Angular
+- Vamos a por la parte interesante, seguro que nuestra mente Java o Angular
   nos mueve a implementar lo siguiente (**IMPORTANTE: ESTO ESTA MAL**).
 
 ```diff
@@ -76,7 +76,7 @@ export const MyComponent : React.FC = () => {
 
 Si llegáis a un proyecto React y os encontráis código como este, huele a que los
 que lo han codificado no se tomaron el tiempo de aprender las bases de esta
-librerías, veamos porque:
+librerías, veamos por qué:
 
 - Al crear una variable, cada vez que se vuelva a repintar el componente
   _myName_ va a valer siempre _John Doe_, esto no deja de ser una función que se
@@ -86,7 +86,7 @@ librerías, veamos porque:
   dos de los pilares de React, el flujo unidireccional, y que el seteo del
   estado sea asíncrono.
 
-Si queréis verlo en acción sólo tenéis que añadirlo al fichero _app.tsx_
+Si queréis verlo en acción sólo tenéis que añadirlo al fichero _app.tsx_.
 
 _./src/app.tsx_
 
@@ -100,8 +100,8 @@ export const App = () => {
 };
 ```
 
-Vale... ¿Cómo puedo manejar esto? ¡ Con los hooks de React ! Tenemos
-_React.useState_
+Vale... ¿Cómo puedo manejar esto? ¡Con los hooks de React! Tenemos
+_React.useState_.
 
 - Se inicializa con un valor por defecto.
 
@@ -114,15 +114,15 @@ _React.useState_
   nuestro _getter_ y el segundo nuestro \_setter.
 
 ¿Por qué narices usa un array? Aquí viene la genialidad, si hubiese devuelto
-un objeto, al hacer destructuring del objeto habríamos tenido que cenirños
+un objeto, al hacer destructuring del objeto habríamos tenido que ceñirnos
 a un nombre concreto de getter y a uno de setter, esto es un rollo porque
-en un componente podemos tener multiples state, y además queremos añadirle
-sentido a los nombres, ¿Porque tener un _setState_ genérico cuando podemos
+en un componente podemos tener múltiples state, y además queremos añadirle
+sentido a los nombres, ¿Por qué tener un _setState_ genérico cuando podemos
 tener un _setName_ o un _setLastname_?
 
-- Vamos a montar este componente con _Hooks_
+- Vamos a montar este componente con _Hooks_.
 
-Primero hacemos uso del _setState_
+Primero hacemos uso del _setState_:
 
 _./src/demo.tsx_
 
@@ -134,20 +134,20 @@ export const MyComponent: React.FC = () => {
 
 - Como hemos nombrado a nuestro _getter_ _myName_ nos vale
   tanto para mostrar el nombre en el _h4_, así como en el
-  _input_
+  _input_.
 
 - Ahora viene la parte interesante, para poder capturar cuando
   el usuario teclea en el input nos suscribimos al evento
   _onChange_ (este es un evento estándar de HTML, más info [MDN](https://developer.mozilla.org/es/docs/Web/API/HTMLElement/change_event)).
 
-¿ Qué tenemos aquí?
+¿Qué tenemos aquí?
 
-- \*_e_: argumento del _eventHandler_, nos da información del evento, expone una serie de propiedades..
-- **e.target**: que DOM elemento genero el evento.
+- \*_e_: argumento del _eventHandler_, nos da información del evento, expone una serie de propiedades:
+- **e.target**: qué DOM Element generó el evento.
 - **e.target.value**: que valor tiene ese elemento (la propiedad valor
-  del DOM Element que genero el evento).
+  del DOM Element que generó el evento).
 
-En este event handler aprovecha os para recojer el valor del input y pedir
+En este event handler aprovechamos para recoger el valor del input y pedir
 setear el estado de _myName_.
 
 ```diff
@@ -161,17 +161,17 @@ setear el estado de _myName_.
 
 ¿Qué va a provocar esto?
 
-- Que la petición _setMyName_ actualize el estado.
+- Que la petición _setMyName_ actualice el estado.
 - Esto va a lanzar un repintado del componente.
 - Cuando se ejecute el código del componente y llegue a la línea
-  de código que hace el _useState_ en vez de _John Doe_ se le
+  de código que hace el _useState_, en vez de _John Doe_ se le
   facilitará el nombre que se almaceno con _setState_
-- Al repintar el componente se usara ese nuevo valor mostrandolo
+- Al repintar el componente se usará ese nuevo valor mostrandolo
   por pantalla.
 
 Es un cambio de mentalidad grande,... intenta repetir este ejemplo
 sin ayuda y entenderlo bien, es tu primer gran paso para entender
-como funciona esta tecnología.
+cómo funciona esta tecnología.
 
 # ¿Te apuntas a nuestro máster?
 

02-use-state-object/Readme.md

@@ -13,22 +13,21 @@
 
 This example takes the [_01-use-state_](https://github.com/Lemoncode/react-hooks-by-example/blob/master/01-use-state) as a starting point.
 
-In the previous example we stored a string in the state, but
-...do we need to use a _useState_ per each basic fild, can we store an object using
-useState? Yes you can, but we have to take into consideration that updates on this
+In the previous example we stored a string in the state, but... we don't use _useState_ just for basic types. Can we store an object using
+_useState_? Yes we can, but we have to take into consideration that updates on this
 object must be done following the principle of immutability (we never
 add an update on a given object, we create a new one).
 
 ## Steps
 
-- First we copy the previous example, and execute a _npm install_
+- First we copy the previous example, and execute a _npm install_.
 
 ```bash
 npm install
 ```
 
 - Let's go store in the state an object that has the name
-  and last name of a given user, we can write something like:
+  and last name of a given user. We can write something like:
 
 _./src/demo.tsx_
 
@@ -41,9 +40,9 @@ export const MyComponent: React.FC = () => {
 +  });
 ```
 
-By doing this we create a state that stores the object, but it would a good idea to
-get benefit of using TypeScript and add strong typing, this will help us finding silly bugs
-like _Ouch ! I forgot to type the "t" in lastname_.
+By doing this we create a state that stores the object, but it would be a good idea to
+get benefit of using TypeScript and add strong typing. This will help us finding silly bugs
+like _Ouch! I forgot to type the "t" in lastname_.
 
 ```diff
 + interface UserInfo {
@@ -59,7 +58,7 @@ export const MyComponent: React.FC = () => {
   });
 ```
 
-- Coold, now that we got our object stored and typed, let's display the user name and lastname.
+- Cool, now that we have our object stored and typed, let's display the user's name and lastname.
 
 ```diff
   return (
@@ -71,9 +70,9 @@ export const MyComponent: React.FC = () => {
   );
 ```
 
-If we start the application we can see how the name and surname are displayed.
+If we start the application we can see how the name and lastname are displayed.
 
-- Let's jump on the main thing, updating the name field..., we might be tempted to update userInfo, but this won't
+- Let's jump on the main thing, updating the name field... We might be tempted to update userInfo, but this won't
   work, anyway let's give a try (**SPOILER ALERT: THIS IS WRONG**):
 
 ```diff
@@ -94,8 +93,8 @@ This is not going to work, we are again applying a Java / Angular approach,
 we are trying to modify something that is alive only when the function is being
 executed, once the component is rerended this value will be lost.
 
-- The way to do this is by creating a new objecto and assigning it using the _setState_
-  method, in order to do this copy we use the spread operator (by doing this all the fields
+- The way to do this is by creating a new object and assigning it using the _setState_
+  method. In order to do this copy we use the spread operator (by doing this, all the fields
   that doesn't change are just passed as they are, they are not recreated).
 
 ```diff
@@ -153,7 +152,7 @@ entry for the one that had changes.
 ```
 
 Now we can test and see that we can update both the name and
-surname.
+lastname.
 
 # About Basefactor + Lemoncode
 

02-use-state-object/Readme_es.md

@@ -14,15 +14,15 @@
 
 Este ejemplo toma como punto de partida el ejemplo [_01-use-state_](https://github.com/Lemoncode/react-hooks-by-example/blob/master/01-use-state).
 
-En el ejemplo anterior almacenabamos un string en el estado, pero
-no todo son tipos básicos, ¿Podemos almacenar un objeto utilizando
-useState? Claro que sí, lo único que cuando queremos introducir
+En el ejemplo anterior almacenábamos un string en el estado, pero
+no todo son tipos básicos. ¿Podemos almacenar un objeto utilizando
+_useState_? Claro que sí, lo único que cuando queremos introducir
 cambios en el estado tenemos que seguir el principio de inmutabilidad
 y no modificar el objeto original.
 
 ## Paso a Paso
 
-- Primero copiamos el ejemplo anterior, y hacemos un _npm install_
+- Primero copiamos el ejemplo anterior, y hacemos un _npm install_.
 
 ```bash
 npm install
@@ -43,8 +43,8 @@ export const MyComponent: React.FC = () => {
 ```
 
 Así creamos un estado al que le almacenamos el objeto, pero nos vendría
-bien tener algo de strong typing, que nos ayude a encontrar fallos tontos
-del tipo me olvide poner la "t" en lastname.
+bien tener algo de strong typing que nos ayude a encontrar fallos tontos
+del tipo _me olvide poner la "t" en lastname_.
 
 ```diff
 + interface UserInfo {
@@ -73,10 +73,10 @@ export const MyComponent: React.FC = () => {
   );
 ```
 
-- Si arrancamos la aplicación podemos ver como se muestra el nombre y apellido.
+- Si arrancamos la aplicación podemos ver cómo se muestra el nombre y apellido.
 
 - Ahora vamos al turrón, podríamos estar tentados de modificar directamente userInfo y
-  ver que pasa, hacer algo así como (**SPOILER ALERT: ESTO ESTA MAL**):
+  ver qué pasa, hacer algo así como (**SPOILER ALERT: ESTO ESTA MAL**):
 
 ```diff
   return (
@@ -120,13 +120,13 @@ que vamos a introducir una modificación.
   );
 ```
 
-Ahora sí que funciona, cuando queremos actualizar _userInfo_ hacemos
+Ahora sí que funciona. Cuando queremos actualizar _userInfo_ hacemos
 la petición para actualizar el estado y le creamos un objeto nuevo
-copiando todas las propiedades del antiguo y como último pasa machacamos
+copiando todas las propiedades del antiguo y, como último paso, machacamos
 el valor de la propiedad que ha cambiado.
 
 - Vamos a hacer lo mismo para lastname, si quieres dale a la pausa en este
-  video e intentalo tu por tu cuenta.
+  video e inténtalo tu por tu cuenta.
 
 ```diff
   return (

Readme.md

@@ -17,15 +17,15 @@ Set of step by step guide examples covering React Hooks, from start to advanced
 
 About this examples:
 
-- Each example is focused in a topic (simple and straightforward).
-- Each example contains a Readme.md with an step by step guide to reproduce it.
+- Each example is focused on a topic (simple and straightforward).
+- Each example contains a Readme.md with a step by step guide to reproduce it.
 
 # Examples implemented
 
 List of examples:
 
 - [00-boiler-plate](https://github.com/Lemoncode/react-hooks-by-example/tree/master/00-boilerplate): starting point, just a blank create-react-app project (all examples will take
-  this as starting point)
+  this as starting point).
 - [01-use-state](https://github.com/Lemoncode/react-hooks-by-example/tree/master/01-use-state): adding state (simple element) to a functional component.
 - [02-use-state-object](https://github.com/Lemoncode/react-hooks-by-example/tree/master/02-use-state-object): adding state (object) to a functional component.
 - [03-component-did-mount](https://github.com/Lemoncode/react-hooks-by-example/tree/master/03-component-did-onload): executing some operations when a functional component gets mounted.