react: basic hardcoded example

Laoujin · Laoujin · commit 1d31cc4ac77e · 2019-01-29T00:11:25.000+01:00
diff --git a/JavaScript/impl-react/public/index.html b/JavaScript/impl-react/public/index.html
@@ -7,6 +7,7 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
@@ -16,7 +17,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>React Design Patterns</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
diff --git a/JavaScript/impl-react/src/Components/App.css b/JavaScript/impl-react/src/Components/App.css
@@ -0,0 +1,7 @@
+.navbar {
+	margin-bottom: 25px;
+}
+
+.container {
+	width: 400px;
+}
diff --git a/JavaScript/impl-react/src/Components/App.js b/JavaScript/impl-react/src/Components/App.js
@@ -5,8 +5,28 @@ import { formConfig } from '../FormBuilder/formConfig.js';
 export class App extends Component {
   render() {
     return (
-      <div className="App">
-        <pre>{JSON.stringify(formConfig)}</pre>
+      <div>
+        <nav className="navbar navbar-light bg-light">
+          <div className="navbar-brand">itenium</div>
+        </nav>
+
+        <div className="container">
+          <form>
+            <div className="form-group">
+              <label>Email</label>
+              <input type="email" className="form-control" />
+            </div>
+            <div className="form-group">
+              <label>Password</label>
+              <input type="password" className="form-control" />
+            </div>
+            <div className="form-group form-check">
+              <input type="checkbox" className="form-check-input" />
+              <label className="form-check-label">Remain logged in</label>
+            </div>
+            <button type="submit" className="btn btn-primary">Login</button>
+          </form>
+        </div>
       </div>
     );
   }
diff --git a/JavaScript/impl-react/src/FormBuilder/formConfig.js b/JavaScript/impl-react/src/FormBuilder/formConfig.js
@@ -1,6 +1,6 @@
 export const formConfig = [
-  {type: 'text', label: 'Email', pattern: '^.*@.*$'},
+  {type: 'email', label: 'Email', pattern: '^.*@.*$'},
   {type: 'secret', label: 'Password', minLength: 8},
-  {type: 'secret', label: 'Repeat', minLength: 8},
+  {type: 'toggle', label: 'Remain logged in'},
   {type: 'submit', label: 'Login'},
 ];
