# 158 on hooks. Review and updated from 00 to 03.

Author: dailymp

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:

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:

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.
 

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) => (