Structured out basic scaffolding & Forms & Routing & React-like File System

.eslintrc

@@ -0,0 +1,54 @@
+{
+  "parser": "babel-eslint",
+  "parserOptions": {
+    "ecmaVersion": 10
+  },
+  "plugins": ["babel", "react-hooks"],
+  "extends": ["eslint:recommended"],
+  "env": { "browser": true, "node": true, "es6": true },
+  "settings": {
+    "polyfills": ["fetch"]
+  },
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "quotes": [2, "backtick", "avoid-escape"],
+    "semi": "error",
+    "react/button-has-type": [0],
+    "react/forbid-prop-types": [0],
+    "react/no-unused-prop-types": [0],
+    "react/jsx-filename-extension": [0],
+    "react/jsx-one-expression-per-line": [0],
+    "no-underscore-dangle": [0],
+    "max-len": [0],
+    "no-return-assign": [0],
+    "no-param-reassign": [0],
+    "global-require": [0],
+    "no-useless-escape": [0],
+    "no-unused-expressions": [0],
+    "consistent-return": [0],
+    "class-methods-use-this": [0],
+    "react/prefer-stateless-function": [0],
+    "no-nested-ternary": [0],
+    "no-undef": [1],
+    "react/no-array-index-key": [0],
+    "react/prop-types": [0],
+    "babel/new-cap": [0],
+    "babel/object-curly-spacing": [0],
+    "babel/no-invalid-this": [1],
+    "no-console": [0],
+    "import/no-extraneous-dependencies": [1],
+    "import/prefer-default-export": [0],
+    "react/no-unused-state": [1],
+    "no-unexpected-multiline": [0],
+    "function-paren-newline": [0],
+    "react/no-string-refs": [0],
+    "react/destructuring-assignment": [1],
+    "react/no-access-state-in-setstate": [0],
+    "jsx-a11y/click-events-have-key-events": [1],
+    "jsx-a11y/no-static-element-interactions": [1],
+    "jsx-a11y/label-has-for": [1],
+    "jsx-a11y/alt-text": [1],
+    "arrow-parens": [0]
+  }
+}

package.json

@@ -6,6 +6,9 @@
     "@material-ui/core": "^4.5.0",
     "@material-ui/icons": "^4.4.3",
     "@material-ui/styles": "^4.5.0",
+    "@reach/router": "^1.2.1",
+    "@testing-library/react": "^9.3.0",
+    "formik": "^1.5.8",
     "react": "^16.10.2",
     "react-dom": "^16.10.2",
     "react-scripts": "3.2.0"
@@ -33,7 +36,19 @@
   },
   "description": "This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).",
   "main": "index.js",
-  "devDependencies": {},
+  "devDependencies": {
+    "@babel/core": "7.6.4",
+    "@babel/node": "7.6.3",
+    "babel-eslint": "^10.0.3",
+    "eslint": "^6.5.1",
+    "eslint-config-airbnb": "^18.0.1",
+    "eslint-plugin-babel": "^5.3.0",
+    "eslint-plugin-import": "^2.18.2",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-react": "^7.16.0",
+    "eslint-plugin-react-hooks": "2.1.2",
+    "prettier": "1.18.2"
+  },
   "author": "BendJS",
   "license": "MIT"
 }

src/App.js

@@ -1,27 +1,21 @@
-import React from 'react';
-import logo from './logo.svg';
+import React, { Fragment } from 'react';
+import { Router } from '@reach/router';
+
+import ContactUs from './components/contact-us';
+import Home from './components/home';
+import Header from './components/header';
 import './App.css';
 import Button from '@material-ui/core/Button';
 
 function App() {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <Button
-          color="secondary"
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </Button>
-      </header>
-    </div>
+    <Fragment>
+      <Header />
+      <Router>
+        <Home path='/' />
+        <ContactUs path='contact-us' />
+      </Router>
+    </Fragment>
   );
 }
 

src/__tests__/App.test.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react';
+
+import App from '../App';
+
+describe('Tests for App.js', () => {
+  test('should test App renders with no issues', () => {});
+});

src/components/contact-us/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Formik } from 'formik';
+
+const ContactUs = () => (
+  <div>
+    <h1>Formik Basic Example</h1>
+    <Formik
+      initialValues={{ name: 'Jean Luc Picard' }}
+      onSubmit={(values, actions) => {
+        setTimeout(() => {
+          alert(JSON.stringify(values, null, 2));
+          actions.setSubmitting(false);
+        }, 1000);
+      }}
+      render={props => (
+        <form onSubmit={props.handleSubmit}>
+          <input
+            type='text'
+            onChange={props.handleChange}
+            onBlur={props.handleBlur}
+            value={props.values.name}
+            name='name'
+          />
+          {props.errors.name && <div id='feedback'>{props.errors.name}</div>}
+          <button type='submit'>Submit</button>
+        </form>
+      )}
+    />
+  </div>
+);
+
+export default ContactUs;

src/components/header/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from '@reach/router';
+
+function Home() {
+  return (
+    <header>
+      <Link to='/'>Home</Link>
+      <Link to='contact-us'>Contact Us</Link>
+    </header>
+  );
+}
+export default Home;

src/components/home/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+const Home = () => <div>Content Home Page</div>;
+
+export default Home;