Review hooks samples

Author: igoralvarez

hooks/00_BoilerPlate/Readme.md

@@ -15,7 +15,6 @@ Summary steps:
   - Webpack and webpack-dev-server.
   - TypeScript.
   - Babel.
-  - Bootstrap.
 - Setup **[./webpack.config.js](./webpack.config.js)**
 - Create a test JS file.
 - Create a simple HTML file.
@@ -136,8 +135,7 @@ _[./package.json](./package.json)_
   "main": "index.js",
   "scripts": {
     "start": "webpack-dev-server  --mode development --inline --hot --open",
-    "build": "webpack  --mode development",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "webpack  --mode development"
   },
   "author": "",
   "license": "ISC",
@@ -198,7 +196,6 @@ _[./src/index.html](./src/index.html)_
 - Now it's time to create a basic **[./webpack.config.js](./webpack.config.js)** file. This configuration includes plumbing for:
 - Launching a web dev server.
 - Transpiling from TypeScript to JavaScript.
-- Setting up Twitter Bootstrap (including fonts, etc...).
 - Generating the build under a **dist** folder.
 
 _[./webpack.config.js](./webpack.config.js)_

hooks/01_HelloReact/Readme.md

@@ -96,7 +96,7 @@ _[./src/index.tsx](./src/index.tsx)_
 
 - Delete the file _main.ts_ we are not going to need it anymore.
 
-- Modify the [./webpack.config.js](./webpack.config.js) file and change the entry point from `./index.ts`
+- Modify the [./webpack.config.js](./webpack.config.js) file and change the entry point from `./main.ts`
   to `./index.tsx`.
 
 _[./webpack.config.js](./webpack.config.js)_
@@ -110,8 +110,8 @@ module.exports = {
    extensions: ['.js', '.ts', '.tsx']
  },
  entry: ["@babel/polyfill", 
- -  "main.ts"],
- +  "./index.tsx"],
+-  "./main.ts"],
++  "./index.tsx"],
   output: {
     path: path.join(basePath, "dist"),
     filename: "bundle.js"

hooks/02_Properties/Readme.md

@@ -38,7 +38,6 @@ import * as React from 'react';
 
 - export const HelloComponent = () => {
 + export const HelloComponent = (props: Props) => (
-- {
 -  return (
 -    <h2>Hello component !</h2>
 +    <h2>Hello user: { props.userName } !</h2>

hooks/03_State/Readme.md

@@ -12,7 +12,7 @@ We take as a starting point the example _02 Properties_:
   username (with default value "defaultUserName").
   This _App_ component renders the _Hello_ component. At first we create a simple stateless
   _App_ component.
-- Update _main.tsx_ file to include our _App_ component.
+- Update _index.tsx_ file to include our _App_ component.
 - Change _App_ component to a stateful class component to hold the _userName_ state.
 - Create a _NameEdit_ component to let the user change the value of username. This changes the _App_ state
   using a function from _App_.
@@ -67,7 +67,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_ 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).
+  older versions 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.
 
 Let's move this component to a class stateful component and define a state including _userName_, and pass this value to the _Hello_ component.

hooks/05_Refactor/Readme.md

@@ -62,7 +62,7 @@ We can think about two possible solutions:
 
   - The child components remains as pure presentational.
   - You have only one place where the updates is being done, and you have control over it, you could easily change behavior
-    e.g. if the user has alreay started typing then name then ignore the ajax call.
+    e.g. if the user has already started typing the name then ignore the ajax call.
 
 We will stick with the second approach in the rest of examples, but we encourage you to go through both approaches as
 a learning excercise.
@@ -119,7 +119,7 @@ The first approach was fine if we come from a Java / C# mindset, but it has it d
 what would happen if we want the editingName to be preserved if it has changed (async call
 would have no effect then)? When there is a conflict updating the state between parent and child
 a valid solution is to lift up that part of the state to the parent component, if we follow
-this approach we can endup having the core state isolated in container components (prior step
+this approach we can end up having the core state isolated in container components (prior step
 to build redux on top of it).
 
 Let's see how can we lift up this state:

hooks/06_Enable/Readme.md

@@ -3,7 +3,7 @@
 Let's continue with the update name sample, this time we want to disable the
 "update" button when the input is empty or when the value hasn't changed.
 
-We will take a startup point sample _05 Refactor_
+We will take as startup point sample _05 Refactor_
 
 ## Summary steps:
 
@@ -51,7 +51,7 @@ _./src/nameEdit.tsx_
     decide in which cases it should be disabled (thanks to [Victor Borrego](https://github.com/v-borrego) to point out this great solution).
 
 We will follow the second approach since is the one that can provide more flexibility to the
-control (in a real project, choosing between one approach or the other depends on specfication details).
+control (in a real project, choosing between one approach or the other depends on specification details).
 
 We will expose a _disabled_ property in the _NameEdit_ component.
 
@@ -97,7 +97,7 @@ npm start
 
 # Excercise
 
-Ideas to further implement this, let's convert our NamEdit component to a password
+Ideas to further implement this, let's convert our NameEdit component to a password
 strength component:
 
 - Extract the disabled condition to function.

hooks/07_ColorPicker/Readme.md

@@ -1,14 +1,13 @@
 # 07 Colopicker
 
-In this sample we are going to implement a color picker component, it will allow us to choose
-between red / green / blue components and displaty the resulting color.
+In this sample we are going to implement a color picker component, it will allow us to choose between red / green / blue components and display the resulting color.
 
-We will start with a non optimal implementation and we will refactor it in sample 09.
+We will start with a non optimal implementation and we will refactor it in sample 08.
 
 # Steps
 
 - We will take as starting point sample _06 Enable_, copy the content from that project and
-  exectue _npm install_
+  execute _npm install_
 
 ```bash
 npm install
@@ -18,7 +17,7 @@ npm install
 
 - We will create a components folder under _src_ (_src/components_).
 
-- Inside that components folder we will copy all the components that we have created (_nameEdit_
+- Inside that components folder we will copy all the components that we have created (_nameEdit.tsx_
   and _hello.tsx_).
 
 - We will create an _index_ file under _src/components_ and create a barrel (by doing this, later
@@ -47,7 +46,7 @@ export interface Color {
 
 - Let's start by creating a _ColorBrowser_ component: this color will just display the
   selected color (under the hood is just a div, by applying css styling we provide a width
-  and height to that rectanble, and a background color).
+  and height to that rectangle, and a background color).
 
 _./src/components/colorBrowser.tsx_
 
@@ -128,7 +127,7 @@ _./src/app.tsx_
 npm start
 ```
 
-- We want add color picker editing capabilities, let's create a color picker component
+- We want to add color picker editing capabilities, let's create a color picker component
   and add a single slider for one of the color values.
 
 _./src/components/colorpicker.tsx_

hooks/08_ColorPickerRefactor/Readme.md

@@ -1,12 +1,12 @@
 # 08 Colorpicker Refactor
 
-In this example we are going to review the colorpicker component we have created and simplify it. Right now we have three slider controls with many details that make our HTML hard to read. Let's componentize this scenario.
+In this example we are going to review the colorPicker component we have created and simplify it. Right now we have three slider controls with many details that make our HTML hard to read. Let's componentize this scenario.
 
-We take _07 Colorpicker_ as reference.
+We take _07 ColorPicker_ as reference.
 
 # Steps to reproduce this sample
 
-- Copy the content from _07 Colorpicker_ and execute _npm install_.
+- Copy the content from _07 ColorPicker_ and execute _npm install_.
 
 ```bash
 npm install
@@ -37,9 +37,9 @@ _DO NOT COPY THIS_
 
 - We will start our refactor by componentizing this piece of code,
   let's append to the _colorPicker.tsx_ the following component
-  (another approach could be to create a new file, that's a tetchty decisition,
+  (another approach could be to create a new file, that's a tetchy decision,
   on one hand it makes sense to keep in the same file the slider since is quite
-  related to the picker, on the other segregating in diferent files is another
+  related to the picker, on the other segregating in different files is another
   valid approach).
 
 _./src/components/colorPicker.tsx_

hooks/09_Sidebar/Readme.md

@@ -12,7 +12,7 @@ implementation, then we will make it generic.
 npm install
 ```
 
-- Create a file called _src/sidebar.css_ and add the following styles (http://www.w3schools.com/howto/howto_js_sidenav.asp):
+- Create a file called _src/components/sidebar.css_ and add the following styles (http://www.w3schools.com/howto/howto_js_sidenav.asp):
 
 _./src/components/sidebar.css_
 
@@ -100,10 +100,10 @@ _./webpack.config.js_
 
 ```
 
-- We are going to create now a sidebar component, _src/sidebar.tsx_. Right now we will create just
+- We are going to create now a sidebar component, _src/components/sidebar.tsx_. Right now we will create just
   a rectangle and we will interact with the animation.
 
-We need to install node typings, since we are goin to make use of _require_ to import from
+We need to install node typings, since we are going to make use of _require_ to import from
 the _css_.
 
 ```bash
@@ -212,7 +212,7 @@ export const SidebarComponent = (props: Props) =>
     </div>
 ```
 
-- Let's make a quick test we will show always the side bar:
+- Let's make a quick test, we will show always the side bar:
 
 _./src/app.tsx_
 

hooks/09_Sidebar/Readme_es.md

@@ -10,7 +10,7 @@ En este ejemplo vamos a añadir una barra lateral a nuestra aplicación, empezar
 npm install
 ```
 
-- Cree un archivo llamado _src/sidebar.css_ y añada los siguientes estilos (http://www.w3schools.com/howto/howto_js_sidenav.asp):
+- Cree un archivo llamado _src/components/sidebar.css_ y añada los siguientes estilos (http://www.w3schools.com/howto/howto_js_sidenav.asp):
 
 _./src/components/sidebar.css_
 
@@ -98,7 +98,7 @@ _./webpack.config.js_
 
 ```
 
-- Vamos a crear el componente de la barra lateral, _src/sidebar.tsx_. Crearemos sólo
+- Vamos a crear el componente de la barra lateral, _src/components/sidebar.tsx_. Crearemos sólo
   un rectángulo e interactuaremos con la animación.
 
 Necesitamos instalar los tipos para _node_, ya que usaremos _require_ a la hora de importar desde el _css_.

hooks/10_TableMock/Readme.md

@@ -3,7 +3,7 @@
 In this sample we are going to show a table with mock data.
 
 We will simulate that this method is calling an ajax api (it will return a promise),
-by doing this we can check how easy is to replace it by a reall call in the next
+by doing this we can check how easy is to replace it by a real call in the next
 example.
 
 # Steps to reproduce the sample
@@ -15,8 +15,6 @@ example.
 npm install
 ```
 
-- Let's define a model entity:
-
 - Let's define a model entity in _src/model/member.ts_:
 
 _./src/model/member.ts_
@@ -65,7 +63,7 @@ export const getMembersCollection = (): Promise<MemberEntity[]> => {
 
 > Using promises means you are going to use ES6 or you are going to include a
 > polyfill to provide compatibility on ES5 (need to install the polifyll and
-> include it your wepback entry point).
+> include it your webpack entry point).
 
 - Let's jump into the ui side, to create the table component we are going to follow
   a progressive approach:
@@ -122,7 +120,7 @@ export const MemberTableComponent = () => {
 In this component we are doing many things:
 
 - First we have created a custom hook to encapsulate the getter to memberCollection and
-  the loadMemberCollection call to the api, by doing this code is more maintenalbe plus
+  the loadMemberCollection call to the api, by doing this code is more maintenable plus
   is a potential effect to be reused in other components.
 
 - We just use the custom hook that we have create in the component.
@@ -149,7 +147,7 @@ export * from "./sidebar";
 + export * from './memberTable';
 ```
 
-- Let's instatiate this component into the app:
+- Let's instantiate this component into the app:
 
 First we import it
 
@@ -303,7 +301,7 @@ _./src/components/memberTable.tsx_
 ```
 
 > Excercise: we could go further with the refactoring, what about creating a
-> _TableHeaderComponent_ component and a _tableBodyComponent_ ?.
+> _TableHeaderComponent_ component and a _tableBodyComponent_ ?
 
 # About Basefactor + Lemoncode
 

hooks/11_TableAxios/Readme.md

@@ -1,18 +1,18 @@
-# 11 Table fetch
+# 11 Table Axios
 
-In this sample we are going to update the previous sampe (mock table) and instead of
+In this sample we are going to update the previous sample (mock table) and instead of
 returning mock data, return real data from the github rest api.
 
 # Steps to reproduce the sample
 
-- We will take as starting point sample _10 tableMock_, let's copy the content from this
+- We will take as starting point sample _10 TableMock_. Let's copy the content from this
   sample and execute _npm install_.
 
 ```bash
 npm install
 ```
 
-- To retrieve data from the Github REST api we will make use of axios, let's install the package
+- To retrieve data from the Github REST api we will make use of axios. Let's install the package
   (no need to install typing, they are already included in the library).
 
 ```bash
@@ -68,7 +68,7 @@ export const getMembersCollection = (): Promise<MemberEntity[]> => {
 ```
 
 - Aaaand... we don't need to add any update on the rest of the application, why?
-  The function is providing the same contract it returns a promise<MemberEntity[]>,
+  The function is providing the same contract, it returns a promise<MemberEntity[]>,
   let's give a try:
 
 ```bash

hooks/12_ReactRouter/Readme.md

@@ -1,6 +1,6 @@
 # 12 React Router
 
-n this sample we will start using React-Router (<acronym title="Single Page Application">SPA</acronym> navigation).
+In 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_:
 
@@ -14,7 +14,7 @@ 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_:
+- Let's create a component called _PageA_ as _src/pages/pageA.tsx_:
 
 _./src/pages/pageA.tsx_
 
@@ -27,7 +27,7 @@ export const PageA = () =>
     </div>
 ```
 
-- Let's create a component called _PageB_ as _src/pageB.tsx_:
+- Let's create a component called _PageB_ as _src/pages/pageB.tsx_:
 
 _./src/pages/pageB.tsx_
 
@@ -54,22 +54,29 @@ _./src/app.tsx_
 ```diff
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-- import { App } from './app';
 - import { HelloComponent } from './hello';
+- import { NameEditComponent } from './nameEdit';
 + 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')
+export const App = () => {
+- const [name, setName] = React.useState("initialName");
+
+- const setUsernameState = (event: React.ChangeEvent<HTMLInputElement>) => {
+-    setName(event.target.value);
+-  };
+  return (
+    <>
+-     <HelloComponent userName={name} />
+-     <NameEditComponent userName={name} onChange={setUsernameState} />
++     <HashRouter>
++       <Switch>
++         <Route exact={true} path="/" component={PageA} />
++         <Route path="/pageB" component={PageB} />
++       </Switch>
++     </HashRouter>,
+    </>
 );
 
 ```