updated 01 Hello React

Author: brauliodiez

01 HelloReact/.babelrc

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

01 HelloReact/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "reactbysample",
+  "version": "1.0.0",
+  "description": "In this sample we setup the basic plumbing to \"build\" our project and launch it in a dev server.",
+  "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"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/cli": "^7.1.2",
+    "@babel/core": "^7.1.2",
+    "@babel/polyfill": "^7.0.0",
+    "@babel/preset-env": "^7.1.0",
+    "@types/react": "^16.4.16",
+    "@types/react-dom": "^16.0.9",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.4",
+    "css-loader": "^1.0.0",
+    "file-loader": "^2.0.0",
+    "html-webpack-plugin": "^3.2.0",
+    "mini-css-extract-plugin": "^0.4.3",
+    "style-loader": "^0.23.1",
+    "typescript": "^3.1.1",
+    "url-loader": "^1.1.1",
+    "webpack": "^4.20.2",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.9"
+  },
+  "dependencies": {
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2"
+  }
+}

01_HelloReact/.babelrc

@@ -68,17 +68,7 @@ export const HelloComponent = () => {
     <h2>Hello component !</h2>
   );
 }
- ```
-Side note: in ES6, this can written as 
-
-```jsx
-import * as React from 'react';
-
-export const HelloComponent = () => (
-    <h2>Hello component !</h2>
-);
-
- ```
+```
 
 - Wire up this component by using `react-dom` under [./src/main.tsx](./src/main.tsx) (we have to rename this file extension from `ts` to `tsx` and replace the content).
 

01_HelloReact/package.json

@@ -10,4 +10,4 @@ <h1>Sample app</h1>
       <div id="root"></div>
     </div>
   </body>
-</html>
+</html>

01 HelloReact/readme.md renamed to 01_HelloReact/readme.md

@@ -0,0 +1 @@
+document.write("Hello from main.ts !");

01 HelloReact/readme_es.md renamed to 01_HelloReact/readme_es.md

@@ -14,4 +14,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}

01 HelloReact/src/hello.tsx renamed to 01_HelloReact/src/hello.tsx

@@ -1,22 +1,21 @@
-let path = require('path');
-let HtmlWebpackPlugin = require('html-webpack-plugin');
-let MiniCssExtractPlugin = require('mini-css-extract-plugin');
-let webpack = require('webpack');
+var HtmlWebpackPlugin = require('html-webpack-plugin');
+var MiniCssExtractPlugin = require('mini-css-extract-plugin');
+var webpack = require('webpack');
+var path = require('path');
 
-let basePath = __dirname;
+var basePath = __dirname;
 
 module.exports = {
   context: path.join(basePath, "src"),
   resolve: {
     extensions: ['.js', '.ts', '.tsx']
   },
-  entry: [
-    './main.tsx',
-    '../node_modules/bootstrap/dist/css/bootstrap.css'
-  ],
+  entry: ['@babel/polyfill', 
+          './main.tsx'
+         ],
   output: {
     path: path.join(basePath, 'dist'),
-    filename: 'bundle.js',        
+    filename: 'bundle.js'
   },
   devtool: 'source-map',
   devServer: {
@@ -25,7 +24,7 @@ module.exports = {
     host: 'localhost',
     port: 8080,
     stats: 'errors-only'
-  },  
+  },
   module: {
     rules: [
       {
@@ -34,8 +33,9 @@ module.exports = {
         loader: 'awesome-typescript-loader',
         options: {
           useBabel: true,
-        },
-      },
+          "babelCore": "@babel/core", // needed for Babel v7
+        },        
+      },    
       {
         test: /\.css$/,        
         use: [MiniCssExtractPlugin.loader, "css-loader"]
@@ -47,7 +47,7 @@ module.exports = {
           name: 'assets/img/[name].[ext]?[hash]'
         }
       },
-    ],
+   ],
   },
   plugins: [
     //Generate index.html in /dist => https://github.com/ampedandwired/html-webpack-plugin
@@ -60,5 +60,5 @@ module.exports = {
       filename: "[name].css",
       chunkFilename: "[id].css"
     }),
-  ],
-};
+  ],  
+};