Merge pull request #170 from dailymp/master

brauliodiez · web-flow · commit faa150a9d42d · 2019-04-18T11:00:27.000+02:00
#158 Issue resolved
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,5 @@ typings/
 .idea/
 */src/**/*.js
 */src/**/*.js.map
-package-lock.json
+package-lock.json
+.vscode
diff --git a/hooks/00_BoilerPlate/Readme.md b/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.
 
diff --git a/hooks/01_HelloReact/Readme.md b/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:
diff --git a/hooks/02_Properties/Readme.md b/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:
diff --git a/hooks/02_Properties/src/hello.tsx b/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>
+);
diff --git a/hooks/03_State/Readme.md b/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.
 
diff --git a/hooks/03_State/src/app.tsx b/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);
diff --git a/hooks/03_State/src/nameEdit.tsx b/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) => (
diff --git a/old_class_components_samples/00 BoilerPlate/package.json b/old_class_components_samples/00 BoilerPlate/package.json
@@ -22,7 +22,7 @@
     "typescript": "^2.8.3",
     "url-loader": "^1.0.1",
     "webpack": "^4.8.1",
-    "webpack-cli": "^2.1.3",
+    "webpack-cli": "3.2.3",
     "webpack-dev-server": "^3.1.4"
   },
   "dependencies": {
diff --git a/old_class_components_samples/00 BoilerPlate/readme.md b/old_class_components_samples/00 BoilerPlate/readme.md
@@ -24,7 +24,7 @@ Summary steps:
 
 # Prerequisites
 
-Install [Node.js and npm](https://nodejs.org/en/) (v8.9.4) if they are not already installed on your computer.
+Install at least [Node.js and npm](https://nodejs.org/en/) (v8.9.4) 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.
 
@@ -143,29 +143,32 @@ _[./package.json](./package.json)_
 {
   "name": "reactboilerplate",
   "version": "1.0.0",
-  "description": "Sample working with React,TypeScript and Webpack",
+  "description": "sample working with React, Typescript and Webpack",
+  "main": "index.js",
   "scripts": {
-    "start": "webpack-dev-server",
-    "build": "webpack"
-  },
-  "author": "Lemoncode",
-  "license": "MIT",
-  "dependencies": {
-    "bootstrap": "^3.3.7",
-    "jquery": "^3.2.1"
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "webpack-dev-server  --mode development --inline --hot --open",
+    "build": "webpack  --mode development"
   },
+  "author": "",
+  "license": "ISC",
   "devDependencies": {
-    "awesome-typescript-loader": "^3.1.3",
-    "babel-core": "^6.25.0",
-    "babel-preset-env": "^1.5.2",
-    "css-loader": "^0.28.4",
-    "file-loader": "^0.11.2",
-    "html-webpack-plugin": "^2.28.0",
-    "style-loader": "^0.18.2",
-    "typescript": "^2.3.4",
-    "url-loader": "^0.5.9",
-    "webpack": "^2.6.1",
-    "webpack-dev-server": "^2.4.5"
+    "awesome-typescript-loader": "^5.0.0",
+    "babel-core": "^6.26.3",
+    "babel-preset-env": "^1.7.0",
+    "css-loader": "^0.28.11",
+    "file-loader": "^1.1.11",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.0",
+    "style-loader": "^0.21.0",
+    "typescript": "^2.8.3",
+    "url-loader": "^1.0.1",
+    "webpack": "^4.8.1",
+    "webpack-cli": "^2.1.3",
+    "webpack-dev-server": "^3.1.4"
+  },
+  "dependencies": {
+    "bootstrap": "^4.1.1"
   }
 }
 
@@ -198,8 +201,7 @@ _[./src/index.html](./src/index.html)_
 
  ```
 
-- Now it's time to create a basic **[./webpack.config.js](./webpack.config.js)** file, this configuration will
- include plumbing for:
+- Now it's time to create a basic **[./webpack.config.js](./webpack.config.js)** file, this configuration will include plumbing for:
  - Launching a web dev server.
  - Transpiling from TypeScript to JavaScript.
  - Setup Twitter Bootstrap (including fonts, etc...).
@@ -278,6 +280,7 @@ module.exports = {
  ```
  npm start
  ```
+ ## Note: If you have problems when running the app  you should update webpack-cli to : "webpack-cli": "3.2.3"
 
 # About Lemoncode
 
diff --git a/old_class_components_samples/02 Components/readme.md b/old_class_components_samples/02 Components/readme.md
@@ -13,7 +13,7 @@ Summary steps:
 
 ## Prerequisites
 
-Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0) if they are not already
+Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0or 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`
diff --git a/old_class_components_samples/02 Components/src/components/about.tsx b/old_class_components_samples/02 Components/src/components/about.tsx
@@ -11,7 +11,7 @@ export const About: React.StatelessComponent<{}> = () => {
             This sample takes the sample "01 Hello react" as starting point.
             </small>
         </h1>
-        <div className="col-10">
+        <div className="col-xs-12">
           <h3>
             <small>
               We are adding react components: a main component that consumes a <b>header</b> and an <b>about</b> component.
@@ -20,7 +20,7 @@ export const About: React.StatelessComponent<{}> = () => {
         </div>
       </div>
 
-      <div className="col-2 top-buffer">
+      <div className="col-xs-12 top-buffer">
         <h3>Highlights</h3>
         <hr />
         <h3>
@@ -30,7 +30,7 @@ export const About: React.StatelessComponent<{}> = () => {
         </h3>
       </div>
 
-      <div className="col-10">
+      <div className="col-xs-12 top-buffer">
         <ul>
           <li className="top-buffer">
             <h4><b>Components:</b></h4>
diff --git a/old_class_components_samples/03 Navigation/package.json b/old_class_components_samples/03 Navigation/package.json
@@ -9,6 +9,7 @@
   "author": "Lemoncode",
   "license": "MIT",
   "dependencies": {
+    "@types/node": "^11.9.5",
     "bootstrap": "^4.1.3",
     "jquery": "^3.2.1",
     "mini-css-extract-plugin": "^0.4.1",
diff --git a/old_class_components_samples/03 Navigation/readme.md b/old_class_components_samples/03 Navigation/readme.md
@@ -20,28 +20,30 @@ Install [Node.js and npm](https://nodejs.org/en/) (v6.6.0) if they are not alrea
 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.
+> in a terminal/console window. Older versions may produce errors.
 
 ## Steps to build it
 
 - Copy the content of the `02 Components` folder to an empty folder for the sample.
 
 - Install the npm packages described in the `package.json` and verify that it works:
 
- ```bash
- $ npm install
- ```
+```bash
+$ npm install
+```
 
 - Install `react-router-dom` and typings:
 
 ```bash
 npm install react-router-dom --save
 npm install @types/react-router-dom --save-dev
+npm i @types/node
 ```
 
 - Update `vendors`:
 
 ### ./webpack.config.js
+
 ```diff
 ...
 entry: {
@@ -62,30 +64,31 @@ entry: {
 - Now, we can start adding a dummy `Members Page`:
 
 ### ./src/components/members/page.tsx
+
 ```javascript
-import * as React from 'react';
+import * as React from "react";
 
 export const MembersPage: React.StatelessComponent<{}> = () => {
   return (
     <div className="row">
       <h2> Members Page</h2>
     </div>
   );
-}
-
+};
 ```
 
 - And its `index.ts` file:
 
 ### ./src/components/members/index.ts
-```javascript
-export * from './page';
 
+```javascript
+export * from "./page";
 ```
 
 - Update `header` component to add links to navigate other pages:
 
 ### ./src/components/header.tsx
+
 ```diff
 import * as React from 'react';
 + import { Link } from 'react-router-dom';
@@ -103,13 +106,12 @@ export const Header: React.StatelessComponent<{}> = () => {
 +                <div className="collapse navbar-collapse" id="navbarSupportedContent">
 +                    <ul className="navbar-nav mr-auto">
 +                        <li className="nav-item">
-+                            {/* <a className="nav-link" href="#">Home <span className="sr-only">(current)</span></a> */}
 +                            <Link className="nav-link" to="/about"> About</Link>
 +                        </li>
 +                        <li className="nav-item ">
 +                            <Link className="nav-link" to="/members"> Members </Link>
-+                        </li>                    
-+                    </ul>            
++                        </li>
++                    </ul>
 +                </div>
 +            </nav>
     </div>
@@ -121,6 +123,7 @@ export const Header: React.StatelessComponent<{}> = () => {
 - Update components `index.ts` file:
 
 ### ./src/components/index.ts
+
 ```diff
 export * from './header';
 export * from './about';
@@ -133,11 +136,12 @@ export * from './about';
 - Now, we are going to create the `AppRouter` component where we define routes:
 
   ### ./src/router.tsx
+
   ```javascript
-  import * as React from 'react';
-  import { Route, HashRouter, Switch } from 'react-router-dom';
-  import { App } from './app';
-  import { About, MembersPage } from './components';
+  import * as React from "react";
+  import { Route, HashRouter, Switch } from "react-router-dom";
+  import { App } from "./app";
+  import { About, MembersPage } from "./components";
 
   export const AppRouter: React.StatelessComponent<{}> = () => {
     return (
@@ -152,7 +156,7 @@ export * from './about';
         </div>
       </HashRouter>
     );
-  }
+  };
   ```
 
   - The type of router that we are using is HashRouter because we are creating a static website.
@@ -163,6 +167,7 @@ export * from './about';
 - Update `App`. We will remove the div enclosing `Header` because we have already added it in `AppRouter`:
 
 ### ./src/app.tsx
+
 ```diff
 import * as React from 'react';
 - import { Header, About } from './components';
@@ -183,6 +188,7 @@ import * as React from 'react';
 - And finally, update main file:
 
 ### ./src/index.tsx
+
 ```diff
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
@@ -198,11 +204,11 @@ ReactDOM.render(
 
 - Execute the example:
 
- ```bash
- $ npm start
- ```
+```bash
+$ npm start
+```
 
 # About 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 specialize in Front End technologies and .NET. [Click here](http://lemoncode.net/services/en/#en-home) to get more info about us.
diff --git a/old_class_components_samples/03 Navigation/src/components/header.tsx b/old_class_components_samples/03 Navigation/src/components/header.tsx

Original file line number	Diff line number	Diff line change
`@@ -4,6 +4,6 @@ interface Props {`
`4`	`4`	`userName: string;`
`5`	`5`	`}`
`6`	`6`
`7`		`-export const HelloComponent = (props: Props) => {`
`8`		`- return <h2>Hello user: {props.userName} !</h2>;`
`9`		`-};`
	`7`	`+export const HelloComponent = (props: Props) => (`
	`8`	`+ <h2>Hello user: {props.userName} !</h2>`
	`9`	`+);`
Original file line number	Diff line number	Diff line change
`@@ -2,7 +2,7 @@ import * as React from "react";`
`2`	`2`
`3`	`3`	`interface Props {`
`4`	`4`	`userName: string;`
`5`		`- onChange: (e : React.ChangeEvent<HTMLInputElement>) => void;`
	`5`	`+ onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;`
`6`	`6`	`}`
`7`	`7`
`8`	`8`	`export const NameEditComponent = (props: Props) => (`