Wrote basic react outline of project.

unit-conversion/src/__snapshots__/app.test.js.snap

@@ -2,14 +2,81 @@
 
 exports[`the app has one labeled button that displays the value from the store 1`] = `
 <div>
-  <label>
-    Taps
-    : 
-    <button
-      class="blue"
-    >
-      9999
-    </button>
-  </label>
+  <div>
+    <h1>
+      Unit Selector
+    </h1>
+    <select
+      name="units"
+    >
+      <option
+        value="km"
+      >
+        km
+      </option>
+      <option
+        value="m"
+      >
+        m
+      </option>
+      <option
+        value="ft"
+      >
+        ft
+      </option>
+      <option
+        value="in"
+      >
+        in
+      </option>
+    </select>
+  </div>
+  <div>
+    <h1>
+      NumberInputField
+    </h1>
+    <input
+      placeholder="Enter # of {unitSelectorUnit}"
+      required=""
+      type="text"
+    />
+  </div>
+  <h1>
+    Ouput Section
+  </h1>
+  <div>
+    <h1>
+      Unit Selector
+    </h1>
+    <select
+      name="units"
+    >
+      <option
+        value="km"
+      >
+        km
+      </option>
+      <option
+        value="m"
+      >
+        m
+      </option>
+      <option
+        value="ft"
+      >
+        ft
+      </option>
+      <option
+        value="in"
+      >
+        in
+      </option>
+    </select>
+  </div>
+  <div>
+    <h1>
+      Number Output Text
+    </h1>
+  </div>
 </div>
 `;

unit-conversion/src/app.js

-import { Route } from 'react-router-dom';
-
-import { Counter } from './features/counter/counter.js';
+import { EndingNumberOutput } from './features/ending-number-output/endingNumberOutput.js';
+import { NumberInputField } from './features/number-input-field/numberInputField.js';
+import { UnitSelector } from './features/unit-selector/unitSelector.js';
 
 export function App() {
   return (
     <>
-      <Route exact path={'/'}>
-        <Counter label={'Taps'} />
-      </Route>
+      <UnitSelector />
+      <NumberInputField />
+      <h1>Ouput Section</h1>
+      <UnitSelector />
+      <EndingNumberOutput />
     </>
   );
 }

unit-conversion/src/features/ending-number-output/endingNumberOutput.js

+export function EndingNumberOutput() {
+  return (
+    <div>
+      <h1>Number Output Text</h1>
+    </div>
+  );
+}
\ No newline at end of file

unit-conversion/src/features/number-input-field/numberInputField.js

+export function NumberInputField() {
+  return (
+    <div>
+      <h1>NumberInputField</h1>
+      <input required type="text" placeholder="Enter # of {unitSelectorUnit}"></input>
+    </div>
+  );
+}

unit-conversion/src/features/unit-selector/unitSelector.js

+export function UnitSelector() {
+  return (
+    <div>
+      <h1>Unit Selector</h1>
+      <select name="units">
+          <option value="km">km</option>
+          <option value="m">m</option>
+          <option value="ft">ft</option>
+          <option value="in">in</option>
+      </select>
+    </div>
+  );
+}