Hooks

hooks/01_HelloReact/Readme.md

@@ -124,7 +124,12 @@ module.exports = {
 npm start
 ```
 
-# About Lemoncode
+# About Basefactor + Lemoncode
 
-We are a team of long-term experienced freelance developers, established as a group in 2010.
-We specialize in Front End technologies and .NET. [Click here](http://lemoncode.net/services/en/#en-home) to get more info about us.
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

hooks/02_Properties/Readme.md

@@ -66,3 +66,14 @@ _./src/index.tsx_
 ```cmd
 npm start
 ```
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/03_State/Readme.md

@@ -161,3 +161,14 @@ Side note: mind the use of the fat arrow function. This avoids losing the contex
   ```
   npm start
   ```
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/04_Callback/Readme.md

@@ -110,3 +110,14 @@ Now we've got a clear event, strongly typed and simplified (as it is more straig
 Now, the greetings message only changes when the user clicks the change button.
 
 > What happens if we simulate an AJAX call? Let's place in the app's componentWillMount a timeout and set the name value in the timeout's callback.
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/05_Refactor/Readme.md

@@ -162,3 +162,14 @@ export const App = () => {
   );
 };
 ```
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/06_Enable/Readme.md

@@ -110,3 +110,14 @@ strength component:
 - Create a password strenght indicator (you can do it just showing plain text
   in future samples we will teach you how to interact with CSS and you will
   be able to display a color bar indicating password strength).
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/07_ColorPicker/Readme.md

@@ -262,3 +262,12 @@ export const ColorPicker = (props: Props) => (
 ```bash
 npm start
 ```
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

hooks/08_ColorPickerRefactor/Readme.md

@@ -247,3 +247,14 @@ export const ColorPicker = (props: Props) => (
 
 > Excercise: evaluate what this code does, is this code worth? what issues could you find
 > in the future? What would happend if we add new fields to the color entity?
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/09_Sidebar/Readme.md

@@ -333,3 +333,14 @@ _./src/components/sidebar.tsx_
 ```
 npm start
 ```
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/10_TableMock/Readme.md

@@ -304,3 +304,13 @@ _./src/components/memberTable.tsx_
 
 > Excercise: we could go further with the refactoring, what about creating a
 > _TableHeaderComponent_ component and a _tableBodyComponent_ ?.
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

hooks/11_TableAxios/Readme.md

@@ -74,3 +74,13 @@ export const getMembersCollection = (): Promise<MemberEntity[]> => {
 ```bash
 npm start
 ```
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend

hooks/12_ReactRouter/.babelrc

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}

hooks/12_ReactRouter/Readme.md

@@ -0,0 +1,132 @@
+# 12 React Router
+
+n this sample we will start using React-Router (<acronym title="Single Page Application">SPA</acronym> navigation).
+
+We take as a starting point the example _03 State_:
+
+## Steps
+
+- Copy the content from _03 State_ and execute `npm install`.
+
+```bash
+npm install
+```
+
+- Let's make some cleanup (remove _src/hello.tsx_ and _src/nameEdit.tsx_ files).
+
+- Let's create a component called _PageA_ as _src/pageA.tsx_:
+
+_./src/pages/pageA.tsx_
+
+```jsx
+import * as React from "react"
+
+export const PageA = () =>
+    <div>
+      <h2>Hello from page A</h2>
+    </div>
+```
+
+- Let's create a component called _PageB_ as _src/pageB.tsx_:
+
+_./src/pages/pageB.tsx_
+
+```jsx
+import * as React from "react"
+
+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.
+
+```bash
+npm install react-router-dom --save
+npm install @types/react-router-dom --save-dev
+```
+
+- Let's define the routing in _app.tsx_:
+
+_./src/app.tsx_
+
+```diff
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+- import { App } from './app';
+- import { HelloComponent } from './hello';
++ import { HashRouter, Switch, Route } from 'react-router-dom';
++ import { PageA } from './pages/pageA';
++ import { PageB } from './pages/pageB';
+
+ReactDOM.render(
+- <HelloComponent userName={name} />
+- <NameEditComponent userName={name} onChange={setUsernameState} />
++ <HashRouter>
++   <Switch>
++     <Route exact={true} path="/" component={PageA} />
++     <Route path="/pageB" component={PageB} />
++   </Switch>
++ </HashRouter>,
+document.getElementById('root')
+);
+
+```
+
+- It's time to check that we are following the right track:
+
+```bash
+npm start
+```
+
+- Let's define a navigation from _[PageA.tsx](./src/pageA.tsx)_ to _[PageB.tsx](./src/pageB.tsx)_.
+
+_./src/pages/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>
+```
+
+- Let's define a navigation from _[PageB.tsx](./src/pageB.tsx)_ to _[PageA.tsx](./src/pageA.tsx)_
+
+_./src/pages/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>
+```
+
+
+- Let's run the app and check that the navigation links are working
+
+```bash
+npm start
+```
+
+
+# About Basefactor + Lemoncode
+
+We are an innovating team of Javascript experts, passionate about turning your ideas into robust products.
+
+[Basefactor, consultancy by Lemoncode](http://www.basefactor.com) provides consultancy and coaching services.
+
+[Lemoncode](http://lemoncode.net/services/en/#en-home) provides training services.
+
+For the LATAM/Spanish audience we are running an Online Front End Master degree, more info: http://lemoncode.net/master-frontend
+

hooks/12_ReactRouter/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "react-typescript-by-sample",
+  "version": "1.0.0",
+  "description": "React Typescript examples",
+  "main": "index.js",
+  "scripts": {
+    "start": "webpack-dev-server  --mode development --inline --hot --open",
+    "build": "webpack  --mode development"
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "hooks"
+  ],
+  "author": "Braulio Diez Botella",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/cli": "^7.2.3",
+    "@babel/core": "^7.2.2",
+    "@babel/polyfill": "^7.2.5",
+    "@babel/preset-env": "^7.3.1",
+    "@types/react": "^16.8.3",
+    "@types/react-dom": "^16.8.1",
+    "@types/react-router-dom": "^4.3.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.5",
+    "css-loader": "^2.1.0",
+    "file-loader": "^3.0.1",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.5.0",
+    "style-loader": "^0.23.1",
+    "typescript": "^3.3.3",
+    "url-loader": "^1.1.2",
+    "webpack": "^4.29.3",
+    "webpack-cli": "^3.2.3",
+    "webpack-dev-server": "^3.1.14"
+  },
+  "dependencies": {
+    "react": "^16.8.2",
+    "react-dom": "^16.8.2",
+    "react-router-dom": "^4.3.1"
+  }
+}

hooks/12_ReactRouter/src/app.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { HashRouter, Switch, Route } from "react-router-dom";
+import { PageA } from "./pages/pageA";
+import { PageB } from "./pages/pageB";
+
+export const App = () => {
+  const [name, setName] = React.useState("defaultUserName");
+
+  const setUsernameState = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setName(event.target.value);
+  };
+
+  return (
+    <>
+      <HashRouter>
+        <Switch>
+          <Route exact={true} path="/" component={PageA} />
+          <Route path="/pageB" component={PageB} />
+        </Switch>
+      </HashRouter>
+    </>
+  );
+};

hooks/12_ReactRouter/src/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title></title>
+  </head>
+  <body>
+    <div class="well">
+      <h1>Sample app</h1>
+      <div id="root"></div>
+    </div>
+  </body>
+</html>

hooks/12_ReactRouter/src/index.tsx

@@ -0,0 +1,6 @@
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+
+import { App } from "./app";
+
+ReactDOM.render(<App />, document.getElementById("root"));