Merge pull request #2 from Lemoncode/master

Merge from original repo

Author: igoralvarez

.gitignore

@@ -6,4 +6,5 @@ typings/
 .idea/
 */src/**/*.js
 */src/**/*.js.map
-package-lock.json
+package-lock.json
+.vscode

hooks/00_BoilerPlate/Readme.md

@@ -22,7 +22,7 @@ Summary steps:
 
 # Prerequisites
 
-Install [Node.js and npm](https://nodejs.org/en/) (v8.9.1) if they are not already installed on your computer.
+Install [Node.js and npm](https://nodejs.org/en/) (v8.9.1 or higher) if they are not already installed on your computer.
 
 > Verify that you are running at least node v8.x.x and npm 5.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
 

hooks/01_HelloReact/Readme.md

@@ -109,13 +109,13 @@ module.exports = {
  resolve: {
    extensions: ['.js', '.ts', '.tsx']
  },
- entry: {
--   app: './index.ts',
-+   app: './index.tsx',
-   vendorStyles: [
-     '../node_modules/bootstrap/dist/css/bootstrap.css',
-   ],
- },
+ entry: ["@babel/polyfill", 
+ -  "main.ts"],
+ +  "./index.tsx"],
+  output: {
+    path: path.join(basePath, "dist"),
+    filename: "bundle.js"
+  },
 ```
 
 - Execute the example:
@@ -124,7 +124,12 @@ module.exports = {
 npm start
 ```
 
-# About Lemoncode
+# 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.
 
-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.
+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

@@ -13,7 +13,7 @@ We take as startup point the example **01 Hello React**:
 
 ## Prerequisites
 
-Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0) if they are not already installed on your computer.
+Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0 or higher) if they are not already installed on your computer.
 
 > Verify that you are running at least node v6.x.x and npm 3.x.x by running `node -v` and `npm -v` in a terminal/console window. Older versions may produce errors.
 
@@ -37,12 +37,13 @@ import * as React from 'react';
 + }
 
 - export const HelloComponent = () => {
-+ export const HelloComponent = (props: Props) => {
-  return (
++ export const HelloComponent = (props: Props) => (
+- {
+-  return (
 -    <h2>Hello component !</h2>
 +    <h2>Hello user: { props.userName } !</h2>
   );
-}
+- }
 ```
 
 - Let's update _index.tsx_ and provide a value to the _userName_ property:
@@ -66,3 +67,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/02_Properties/src/hello.tsx

@@ -4,6 +4,6 @@ interface Props {
   userName: string;
 }
 
-export const HelloComponent = (props: Props) => {
-  return <h2>Hello user: {props.userName} !</h2>;
-};
+export const HelloComponent = (props: Props) => (
+    <h2>Hello user: {props.userName} !</h2>
+);

hooks/03_State/Readme.md

@@ -66,7 +66,7 @@ _./src/index.tsx_
   ```
 
 - It's time to revisit _app.tsx_. We want to store the user's name and let the user updated it. We will use hooks to
-  allow _App_ fucntional components to make use of state (this works in React 16.8.2 and above if you have to use
+  allow _App_ functional components to make use of state (this works in React 16.8.2 and above if you have to use
   older verions you have to use a class component, check the "old*classes_components" on the root of this repo for example).
   We will add \_userName* to the state.
 
@@ -154,10 +154,19 @@ export const App = () => {
 };
 ```
 
-Side note: mind the use of the fat arrow function. This avoids losing the context for _this_ in the callback.
-
 - Finally let's test everything works once more.
 
   ```
   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/src/app.tsx

@@ -3,7 +3,7 @@ import { HelloComponent } from "./hello";
 import { NameEditComponent } from "./nameEdit";
 
 export const App = () => {
-  const [name, setName] = React.useState("defaultUserName");
+  const [name, setName] = React.useState("initialName");
 
   const setUsernameState = (event: React.ChangeEvent<HTMLInputElement>) => {
     setName(event.target.value);

hooks/03_State/src/nameEdit.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 interface Props {
   userName: string;
-  onChange: (e : React.ChangeEvent<HTMLInputElement>) => void;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
 export const NameEditComponent = (props: Props) => (

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,57 @@ export const App = () => {
   );
 };
 ```
+
+- Now let's jump into _NameEditComponent_ and update the contract and
+  implementation:
+
+```diff
+interface Props {
+  initialUserName: string;
++   editingName: string;
+-  onNameUpdated: (newName: string) => any;
++  onNameUpdated: () => any;
++   onEditingNameUpdated: (newEditingName: string) => any;
+}
+```
+
+```diff
+export const NameEditComponent = (props: Props) => {
+-  const [editingName, setEditingName] = React.useState(props.initialUserName);
+
+  const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+-    setEditingName(e.target.value);
++    props.onEditingNameUpdated(e.target.value);
+  };
+
+  const onNameSubmit = (event: any): any => {
+-    props.onNameUpdated(editingName);
++   props.onNameUpdated();
+  };
+
+- if(props.initialUserName !== lastInitialName) {
+-    setLastInitialName(props.initialUserName);
+-    setEditingName(props.initialUserName);
+- }
+
+
+  return (
+    <>
+      <label>Update name:</label>
+-      <input value={editingName} onChange={onChange} />
++      <input value={props.editingName} onChange={onChange} />
+      <button onClick={onNameSubmit}>Change</button>
+    </>
+  );
+};
+```
+
+# 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