Merge pull request #123 from jantoniocarvajal/master

#109 Update readme and add readme_es

Author: brauliodiez

14 ReactRouter/readme.md

@@ -6,16 +6,16 @@ In this case we will provide a default `userName` but let the user update
 it.
 
 
-We will take a startup point sample _03 State_:
+We will take a startup point sample _[03 State](./../03%20State)_:
 
 Summary steps:
 
 - Let's make first some cleanup: remove _hello.tsx_ and _nameEdit.tsx_
-- Let's create two components _PageA_ and _PageB_
+- Let's create two components _[PageA.tsx](./src/pageA.tsx)_ and _[PageB.tsx](./src/pageB.tsx)_
 - Let's install the dependencies to _react-router-dom_ and typescript definitions for this.
 - Let's define the routing.
-- Let's define a navigation from _PageA_ to _PageB_.
-- Let's define a navigation from _PageB_ to _PageA_.
+- Let's define a navigation from _[PageA.tsx](./src/pageA.tsx)_ to _[PageB.tsx](./src/pageB.tsx)_.
+- Let's define a navigation from _[PageB.tsx](./src/pageB.tsx)_ to _[PageA.tsx](./src/pageA.tsx)_.
 
 ## Prerequisites
 
@@ -25,7 +25,7 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are
 
 ## Steps to build it
 
-- Copy the content from _03 State_ and execute:
+- Copy the content from _[03 State](./../03%20State)_ and execute:
 
   ```
   npm install
@@ -40,29 +40,22 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or newer) if they are
 ```jsx
 import * as React from "react"
 
-export const PageA = () => {
-  return (
+export const PageA = () =>
     <div>
       <h2>Hello from page A</h2>
     </div>
-  )
-}
 ```
+- Let's create a component called _PageB_ as _src/pageB.tsx_:
 
 ### ./src/pageB.tsx
 
-- Let's create a component called _PageB_ as _src/pageB.tsx_:
-
 ```jsx
 import * as React from "react"
 
-export const PageB = () => {
-  return (
+export const PageB = () =>
     <div>
       <h2>Hello from page B</h2>
     </div>
-  )
-}
 ```
 
 - Let's install the dependencies [`react-router-dom`](https://github.com/ReactTraining/react-router) and typescript definitions for this.
@@ -103,42 +96,36 @@ ReactDOM.render(
 npm start
 ```
 
-- Let's define a navigation from PageA to PageB (_src/pageA.tsx_).
+- Let's define a navigation from _[PageA.tsx](./src/pageA.tsx)_ to _[PageB.tsx](./src/pageB.tsx)_.
 
 ### ./src/pageA.tsx
 
 ```diff
 import * as React from "react"
 + import { Link } from 'react-router-dom';
 
-export const PageA = () => {
-  return (
+export const PageA = () =>
     <div>
       <h2>Hello from page A</h2>
 +     <br />
 +     <Link to="/pageB">Navigate to Page B</Link>
     </div>
-  )
-}
-
 ```
 
-- Let's define a navigation from PageB to PageA  (_pageA.tsx_)
+- Let's define a navigation from _[PageB.tsx](./src/pageB.tsx)_ to _[PageA.tsx](./src/pageA.tsx)_
+
+### ./src/pageB.tsx
 
 ```diff
 import * as React from "react"
 + import { Link } from 'react-router-dom';
 
-export const PageB = () => {
-  return (
+export const PageB = () =>
     <div>
       <h2>Hello from page B</h2>
 +     <br />
 +     <Link to="/">Navigate to Page A</Link>
     </div>
-  )
-}
-
 ```
 
 

14 ReactRouter/readme_es.md

@@ -0,0 +1,133 @@
+# 14 ReactRouter
+
+En este ejemplo comenzaremos a usar React-Router (navegación <acronym title="Single Page Application">SPA</acronym>).
+
+En este caso proporcionaremos un `userName` por defecto pero dejaremos actualizarlo al usuario.
+
+Tomaremos como punto de partida el ejemplo _[03 State](./../03%20State)_
+
+Resumen de pasos:
+
+- Primero vamos a hacer un poco de limpieza: eliminamos _hello.tsx_ y _nameEdit.tsx_
+- Vamos a crear dos componentes: _[PageA.tsx](./src/pageA.tsx)_ y _[PageB.tsx](./src/pageB.tsx)_
+- Vamos a instalar las dependencias a _react-router-dom_ y sus definiciones para typescript.
+- Vamos a definir el enrutado.
+- Vamos a definir la navegación de _[PageA.tsx](./src/pageA.tsx)_ a _[PageB.tsx](./src/pageB.tsx)_
+- Vamos a definir la navegación de _[PageB.tsx](./src/pageB.tsx)_ a _[PageA.tsx](./src/pageA.tsx)_
+
+## Prerrequisitos
+
+Instalar [Node.js and npm](https://nodejs.org/en/) (v6.6.0 o superior) si no las tenemos instaladas en nuestro ordenador.
+
+> Verifica que estás usando al menos node v6.x.x and npm 3.x.x usando los comandos `node -v` y `npm -v` en un terminal/consola. Versiones anteriores pueden producir errores.
+
+## Pasos para construirlo
+
+Copia el contenido de _[03 State](./../03%20State)_ y ejecuta:
+
+  ```
+  npm install
+  ```
+
+- Vamos a hacer algo de limpieza (eliminar los archivos _src/hello.tsx_ y _src/nameEdit.tsx_).
+
+- Vamos a crear un componente llamado _PageA_ como _src/pageA.tsx_:
+
+### ./src/pageA.tsx
+
+```jsx
+import * as React from "react"
+
+export const PageA = () =>
+    <div>
+      <h2>Hello from page A</h2>
+    </div>
+```
+
+- Vamos a crear un componente llamado _PageB_ como _src/pageB.tsx_:
+
+### ./src/pageB.tsx
+
+```jsx
+import * as React from "react"
+
+export const PageB = () =>
+    <div>
+      <h2>Hello from page B</h2>
+    </div>
+```
+
+- Vamos a instalar las dependencias [`react-router-dom`](https://github.com/ReactTraining/react-router) y sus definiciones para typescript.
+
+```bash
+npm install react-router-dom --save
+npm install @types/react-router-dom --save-dev  
+```
+
+- Vamos a definir el enrutado en _[main.tsx](./src/main.tsx)_ :
+
+### ./src/main.tsx
+
+```diff
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+- import {App} from './app';
++ import { HashRouter, Switch, Route } from 'react-router-dom';
++ import {PageA} from './pageA';
++ import {PageB} from './pageB';
+
+ReactDOM.render(
+- <App />
++ <HashRouter>
++   <Switch>
++     <Route exact={true} path="/" component={PageA} />
++     <Route path="/pageB" component={PageB} />
++   </Switch>
++ </HashRouter>
+  , document.getElementById('root')
+);
+```
+
+- Es hora de verificar que estamos siguiendo el camino correcto:
+
+```bash
+npm start
+```
+
+- Vamos a definir la navegación de _[PageA.tsx](./src/pageA.tsx)_ a _[PageB.tsx](./src/pageB.tsx)_.
+
+### ./src/pageA.tsx
+
+```diff
+import * as React from "react"
++ import { Link } from 'react-router-dom';
+
+export const PageA = () =>
+    <div>
+      <h2>Hello from page A</h2>
++     <br />
++     <Link to="/pageB">Navigate to Page B</Link>
+    </div>
+```
+
+- Vamos a definir la navegación de _[PageB.tsx](./src/pageB.tsx)_ a _[PageA.tsx](./src/pageA.tsx)_
+
+### ./src/pageB.tsx
+
+```diff
+import * as React from "react"
++ import { Link } from 'react-router-dom';
+
+export const PageB = () =>
+    <div>
+      <h2>Hello from page B</h2>
++     <br />
++     <Link to="/">Navigate to Page A</Link>
+    </div>
+```
+
+- Ejecutamos la aplicación y comprobamos que la navegación funciona correctamente.
+
+```bash
+npm start
+```