Rewrite config with 16.8 support

.babelrc.js

@@ -0,0 +1,15 @@
+const basicBabelConfig = {
+    presets: [
+        [
+            '@babel/preset-env',
+            {
+                useBuiltIns: 'usage',
+                corejs: '3.36',
+            },
+        ],
+        '@babel/preset-react',
+        '@babel/preset-typescript',
+    ],
+};
+
+module.exports = basicBabelConfig;

.eslintrc.js

@@ -0,0 +1,34 @@
+const { resolve: pathResolve } = require('path');
+
+module.exports = {
+    env: {
+        browser: true,
+        commonjs: true,
+        es6: true,
+        node: true,
+    },
+    extends: ['eslint:recommended', 'plugin:react/recommended', 'prettier', 'plugin:prettier/recommended'],
+    parser: '@typescript-eslint/parser',
+    parserOptions: {
+        ecmaVersion: 6,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        tsconfigRootDir: pathResolve(__dirname),
+    },
+    plugins: ['react', 'prettier'],
+    rules: {
+        'no-console': 'off',
+        indent: ['error', 4],
+        quotes: ['error', 'single'],
+        semi: ['error', 'always'],
+        'prettier/prettier': [
+            'error',
+            {},
+            {
+                usePrettierrc: true,
+            },
+        ],
+        'react/no-deprecated': 'off',
+    },
+};

.gitignore

@@ -21,3 +21,6 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# masos
+.DS_Store

.prettierrc.yml

@@ -0,0 +1,9 @@
+printWidth: 120
+tabWidth: 4
+semi: true
+singleQuote: true
+trailingComma: 'es5'
+bracketSameLine: false
+arrowParens: 'avoid'
+singleAttributePerLine: true
+proseWrap: never

README.md

@@ -1,31 +1,32 @@
 ![react-starter](https://user-images.githubusercontent.com/33935506/36640446-894a1a78-1a27-11e8-970a-6cbf95d76799.png)
 
-# React Starter
+# React Starter (with Hooks)
 
-A basic template that consists of the essential elements that are required to start building a React (v16.4) application using Webpack (v4).
+A basic template that consists of the essential elements that are required to start building a React (v16.12+) application using Webpack (v4).
 
 The template consists of:
 
-* a typcial project layout structure
+* a typical project layout structure
 * babel setup and configuration
 * webpack setup and configuration
 * eslint setup and configuration
 * SCSS setup and configuration
-* the main React components to get started
+* the main React component with hook to get started
 
-Additionaly, the template provides a development and production webpack configuration.
+Additionally, the template provides a development and production webpack configuration.
 
 The template also allows one to include specific plugins as part of build. [Please see here for more detail](#build-application-with-bundleanalayzer-plugin-included)
 
 ---
 
 ## Developed With
 
-* [Node.js 8.11](https://nodejs.org/en/) - Javascript runtime
-* [React 16.4](https://reactjs.org/) - A javascript library for building user interfaces
-* [Babel 6.26](https://babeljs.io/) - A transpiler for javascript
+* [Node.js 10.X](https://nodejs.org/en/) - Javascript runtime
+* [React 16.12+](https://reactjs.org/) - A javascript library for building user interfaces, but with React Hooks
+* [Babel 7.x](https://babeljs.io/) - A transpiler for javascript
 * [Webpack 4.x](https://webpack.js.org/) - A module bundler
 * [SCSS](http://sass-lang.com/) - A css metalanguage
+* [TypeScript 4.9](https://www.typescriptlang.org/) - TypeScript is JavaScript with syntax for types.
 
 ---
 
@@ -85,109 +86,44 @@ These instructions will get you a copy of the project up and running on your loc
 
 The following software is required to be installed on your system:
 
-* Node 8.x
-* Npm 3.x
+* Node 10.x
+* Npm 6.x
 
 Type the following commands in the terminal to verify your node and npm versions
 
-  ```bash
-  node -v
-  npm -v
-  ```
+```bash
+node -v
+npm -v
+```
 
 ### Install
 
 Follow the following steps to get development environment running.
 
 * Clone _'react-starter'_ repository from GitHub
 
-  ```bash
-  git clone https://github.com/drminnaar/react-starter.git
-  ```
-
-   _OR USING SSH_
-
-  ```bash
-  git clone git@github.com:drminnaar/react-starter.git
-  ```
-
-* Install node modules
-
-   ```bash
-   cd react-starter
-   npm install
-   ```
-
-### Build
-
-#### Build Application
-
-dev | prod
-:---: | :---:
-npm run build:dev | npm run build:prod
-
-#### Build Application And Watch For Changes
-
-dev | prod
-:---: | :---:
-npm run build:dev:watch | npm run build:prod:watch
-
-#### Build Application With BundleAnalayzer Plugin Included
-
-dev | prod
-:---: | :---:
-npm run build:dev:bundleanalyze | npm run build:prod:bundleanalyze
-
-After running the above command, a browser window will open displaying an interactive graph resembling the following image:
-
-![bundle-analyzer](https://user-images.githubusercontent.com/33935506/36382812-eadf199e-1592-11e8-9681-cf5ccf67951f.png)
-
-### Run ESlint
-
-#### Lint Project Using ESLint
-
-  ```bash
-  npm run lint
-  ```
-
-#### Lint Project Using ESLint, and autofix
-
-  ```bash
-  npm run lint:fix
-  ```
-
-### Run
-
-#### Run Start
-
-This will run the _'serve:dev'_ npm task
-
-```bash
-npm start
+```sh
+npx degit https://github.com/My-Project-Template/react-starter-16.git <YOUR_PROJECT>
 ```
 
-#### Run Dev Server
+* Install node modules
 
 ```bash
-npm run serve:dev
+cd <YOUR_PROJECT>
+rm -rf package-lock.json
+npm i
 ```
 
-#### Run Dev Server With Dashboard
+### Run Build
 
-```bash
-npm run serve:dev:dashboard
+```sh
+npm run build
 ```
 
-The above command will display a dashboard view in your console resembling the following image:
-
-![webpack-dashboard](https://user-images.githubusercontent.com/33935506/36382813-eb10b0a8-1592-11e8-9506-fd25db65a258.png)
-
-#### Run Prod Server
-
-This command will build application using production settings and start the application using _live-server_
+#### Run Dev Server
 
 ```bash
-npm run serve:prod
+npm run dev
 ```
 
 ---
@@ -213,4 +149,8 @@ I use [SemVer](http://semver.org/) for versioning. For the versions available, s
 [react-calculator-standard]: https://github.com/drminnaar/react-calculator-standard
 [react-bitcoin-monitor]: https://github.com/drminnaar/react-bitcoin-monitor
 [react-weather-standard]: https://github.com/drminnaar/react-weather-standard
-[react-redux-quotlify]: https://github.com/drminnaar/react-redux-quotlify
+[react-redux-quotlify]: https://github.com/drminnaar/react-redux-quotlify
+
+### Co-Authors
+
+* [**Yueb**](https://github.com/Allen-Bayern)