Support boilerplate for TypeScript projects

I would like to support boilerplate code for ReasonML, TypeScript,
ClojureScript, and Elm projects before I specialize in any of these
frameworks. All of my projects should use TailwindCSS.

All of this boilerplate should offer:
- Same command to start developing
- Same API to build and deploy
- TailwindCSS support
- Basic boilerplate for components, state, and routes

This TypeScript boilerplate is not complete, but I would like to commit the
progress in case I do not return to this for awhile.

1 files changed, 52 insertions, 0 deletions

diff --git a/boilerplate/typescript/src/App.tsx b/boilerplate/typescript/src/App.tsx
new file mode 100644
index 000000000000..4fae1b36ac4d
--- /dev/null
+++ b/boilerplate/typescript/src/App.tsx
@@ -0,0 +1,52 @@
+import React, { useEffect } from "react";
+import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import { useDispatch } from "react-redux";
+import { actions, useTypedSelector } from "./store";
+import { Link } from "react-router-dom";
+
+const App: React.FC = () => {
+  const dispatch = useDispatch();
+  const { isLoading } = useTypedSelector(state => ({
+    isLoading: state.isLoading,
+  }));
+
+  return (
+    <Router>
+      <nav className="bg-blue-400">
+        <ul className="container mx-auto justify-between flex py-6 text-white">
+          <li>
+            <Link to="/">Home</Link>
+          </li>
+          <li>
+            <Link to="/about">About</Link>
+          </li>
+          <li>
+            <Link to="/contact">Contact</Link>
+          </li>
+        </ul>
+      </nav>
+      <Switch>
+        <Route exact path="/">
+          <div className="container mx-auto">
+            <h1>Welcome to the home page. Loading: {isLoading ? "true" : "false"}</h1>
+            <button
+              className="bg-gray-300 py-4 px-6"
+              onClick={() => dispatch(actions.toggleIsLoading())}>isLoading</button>
+          </div>
+        </Route>
+        <Route exact path="/about">
+          <div className="container mx-auto">
+            <h1>Here is the about page.</h1>
+          </div>
+        </Route>
+        <Route exact path="/contact">
+          <div className="container mx-auto">
+            <h1>Here is the contact page.</h1>
+          </div>
+        </Route>
+      </Switch>
+    </Router>
+  );
+};
+
+export default App;