Add React example

Author: ganatan

README.md

@@ -1,32 +1,42 @@
-# Angular 13 Example Bootstrap
+# Angular 13 & React 18 Examples Bootstrap
 
-> An Angular starter kit featuring [Angular 13.3.4](https://angular.io), [Angular CLI 13.3.3](https://cli.angular.io/)
+<table>
+<tr>
+<td>
+  <a href="https://www.ganatan.com/en">
+    <img src="./img/ganatan-about-github.png" align="right"
+    alt="Ganatan Angular Example routing" width="140" height="140">
+  </a>
 
-> it's part of a repo series designed to create a Web Application with Angular
+it's part of a repo series designed to create a **Web Application with Angular 13**
 
-# Web Application Live Demo
-<p align="center">
-  <p align="center">
-    <a href="https://angular.ganatan.com/">
-      <img src="https://media.giphy.com/media/9BuBBLc7keCgRojp92/giphy.gif" alt="Angular 13 Example 
-      Application"/>
-    </a>
-  </p>
-</p>
 
-## Quick start
+* Featuring [**Angular 13.3.10**](https://github.com/angular/angular/releases) & [**Angular CLI 13.3.7**](https://github.com/angular/angular-cli/releases/)
+
+
+* See the [**Live demo**](#angular-live-demo), Test the repo with [**Quick start**](#angular-quick-start) and for more information Read the step by step [**Tutorial**](#angular-tutorial) or read the [**Getting started**](#angular-getting-started)
+
+
+it's part of a repo series designed to create a **Web Application with React 18**
+
+
+* Featuring [**React 18.1.0**](https://github.com/facebook/react/releases) & [**Create-react-app 5.0.1**](https://github.com/facebook/create-react-app/releases)
+
+
+
+# [Angular Quick start](#angular-quick-start)
 
 ```bash
-# select a repo
+# choose a repo
 # download the example or clone the repo from github
-git clone https://github.com/ganatan/angular-bootstrap.git
+git clone https://github.com/ganatan/angular-react-bootstrap.git
 
 # download the example or clone the repo from gitlab
-git clone https://gitlab.com/ganatan/angular-bootstrap.git
-
+git clone https://gitlab.com/ganatan/angular-react-bootstrap.git
 
 # change directory
-cd angular-bootstrap
+cd angular-react-bootstrap
+cd angular
 
 # install the repo with npm
 npm install
@@ -37,25 +47,67 @@ npm start
 ```
 in your browser go to [http://localhost:4200](http://localhost:4200) 
 
-## Getting Started
 
-### Installation
+# [React Quick start](#react-quick-start)
+
+```bash
+# choose a repo
+# download the example or clone the repo from github
+git clone https://github.com/ganatan/angular-react-bootstrap.git
+
+# download the example or clone the repo from gitlab
+git clone https://gitlab.com/ganatan/angular-react-bootstrap.git
+
+# change directory
+cd angular-react-bootstrap
+cd react
+
+# install the repo with npm
+npm install
+
+# start the server
+npm start
+
+```
+in your browser go to [http://localhost:3000](http://localhost:3000) 
+
+
+# [Angular Getting started](#angular-getting-started)
+
+
+## Installation
+* `npm install` (installing dependencies)
+* `npm outdated` (verifying dependencies)
+
+## Development
+* `npm run start`
+* in your browser go to [http://localhost:4200](http://localhost:4200) 
+
+## Production 
+* `npm run build`
+
+## Tests
+* `npm run test`
+
+
+
+# [React Getting started](#react-getting-started)
+
+
+## Installation
 * `npm install` (installing dependencies)
 * `npm outdated` (verifying dependencies)
 
-### Developpement
+## Development
 * `npm run start`
-* in your browser [http://localhost:4200](http://localhost:4200) 
+* in your browser go to [http://localhost:3000](http://localhost:3000) 
 
-### Production 
+## Production 
 * `npm run build`
 
 ## Tests
 * `npm run test`
 
-### Prototype Bootstrap 5
-* `change directory` cd ui
-* launch html pages in your browser
 
 
 ### Author

.browserslistrc angular/.browserslistrc

@@ -0,0 +1,58 @@
+{
+  "root": true,
+  "ignorePatterns": [
+    "projects/**/*"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "*.ts"
+      ],
+      "parserOptions": {
+        "project": [
+          "tsconfig.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": [
+        "plugin:@angular-eslint/recommended",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "no-undefined": "error",
+        "no-var": "error",
+        "prefer-const": "error",
+        "func-names": "error",
+        "id-length": "error",
+        "newline-before-return": "error",
+        "space-before-blocks": "error",
+        "no-alert": "error",
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "app",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": [
+        "*.html"
+      ],
+      "extends": [
+        "plugin:@angular-eslint/template/recommended"
+      ],
+      "rules": {}
+    }
+  ]
+}

.editorconfig angular/.editorconfig

@@ -103,9 +103,21 @@
             ],
             "scripts": []
           }
+        },
+        "lint": {
+          "builder": "@angular-eslint/builder:lint",
+          "options": {
+            "lintFilePatterns": [
+              "src/**/*.ts",
+              "src/**/*.html"
+            ]
+          }
         }
       }
     }
   },
-  "defaultProject": "angular-starter"
-}
+  "defaultProject": "angular-starter",
+  "cli": {
+    "defaultCollection": "@angular-eslint/schematics"
+  }
+}

angular/.eslintrc.json

@@ -0,0 +1,44 @@
+user www-data;
+worker_processes auto;
+pid /run/nginx.pid;
+include /etc/nginx/modules-enabled/*.conf;
+
+events {
+  worker_connections 768;
+}
+
+http {
+  sendfile on;
+  tcp_nopush on;
+  tcp_nodelay on;
+  keepalive_timeout 65;
+  types_hash_max_size 2048;
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+
+  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
+  ssl_prefer_server_ciphers on;
+
+  access_log /var/log/nginx/access.log;
+  error_log /var/log/nginx/error.log;
+
+  gzip on;
+
+  include /etc/nginx/conf.d/*.conf;
+
+  server {
+    listen 80 default_server;
+    listen [::]:80 default_server;
+    root /var/www/html;
+    index index.html index.htm index.nginx-debian.html;
+
+    server_name _;
+
+    location / {
+      try_files $uri $uri/ =404;
+    }
+
+  }
+
+}
+