First steps

src/App.tsx

@@ -1,10 +1,17 @@
-import React from 'react';
+import React, { useState } from 'react';
+
 import './App.css';
 
+import { boardDefault } from "./helpers"
+import Board from "./components/Board"
+import Keyboard from "./components/Keyboard"
+
 function App() {
   return (
     <div className="App">
-
+      <nav><h1>Wordle</h1></nav>
+      <Board />
+      <Keyboard />
     </div>
   );
 }

src/components/Board.tsx

@@ -0,0 +1,64 @@
+import React, { useState } from 'react'
+import { boardDefault } from "../helpers"
+
+import Letter from "./Letter"
+
+type Props = {}
+
+function Board({}: Props) {
+  return (
+    <div className="board">
+        {" "}
+        <div className="row">
+          <Letter letterPos={0} attemptVal={0}/>
+          <Letter letterPos={1} attemptVal={0}/>
+          <Letter letterPos={2} attemptVal={0}/>
+          <Letter letterPos={3} attemptVal={0}/>
+          <Letter letterPos={4} attemptVal={0}/>
+          <Letter letterPos={5} attemptVal={0}/>
+        </div>
+        <div className="row">
+          <Letter letterPos={0} attemptVal={1}/>
+          <Letter letterPos={1} attemptVal={1}/>
+          <Letter letterPos={2} attemptVal={1}/>
+          <Letter letterPos={3} attemptVal={1}/>
+          <Letter letterPos={4} attemptVal={1}/>
+          <Letter letterPos={5} attemptVal={1}/>
+        </div>
+        <div className="row">
+          <Letter letterPos={0} attemptVal={2}/>
+          <Letter letterPos={1} attemptVal={2}/>
+          <Letter letterPos={2} attemptVal={2}/>
+          <Letter letterPos={3} attemptVal={2}/>
+          <Letter letterPos={4} attemptVal={2}/>
+          <Letter letterPos={5} attemptVal={2}/>
+        </div>
+        <div className="row">
+          <Letter letterPos={0} attemptVal={3}/>
+          <Letter letterPos={1} attemptVal={3}/>
+          <Letter letterPos={2} attemptVal={3}/>
+          <Letter letterPos={3} attemptVal={3}/>
+          <Letter letterPos={4} attemptVal={3}/>
+          <Letter letterPos={5} attemptVal={3}/>
+        </div>
+        <div className="row">
+          <Letter letterPos={0} attemptVal={4}/>
+          <Letter letterPos={1} attemptVal={4}/>
+          <Letter letterPos={2} attemptVal={4}/>
+          <Letter letterPos={3} attemptVal={4}/>
+          <Letter letterPos={4} attemptVal={4}/>
+          <Letter letterPos={5} attemptVal={4}/>
+        </div>
+        <div className="row">
+          <Letter letterPos={0} attemptVal={5}/>
+          <Letter letterPos={1} attemptVal={5}/>
+          <Letter letterPos={2} attemptVal={5}/>
+          <Letter letterPos={3} attemptVal={5}/>
+          <Letter letterPos={4} attemptVal={5}/>
+          <Letter letterPos={5} attemptVal={5}/>
+        </div>
+    </div>
+  )
+}
+
+export default Board

src/components/Keyboard.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+type Props = {}
+
+function Keyboard({}: Props) {
+  return (
+    <div>Keyboard</div>
+  )
+}
+
+export default Keyboard

src/components/Letter.tsx

@@ -0,0 +1,15 @@
+import React, { ReactPropTypes } from 'react'
+import PropTypes from 'prop-types';
+
+type Props = {
+    letterPos: number,
+    attemptVal: number,
+}
+
+function Letter({letterPos, attemptVal}: Props) {
+  return (
+    <div>Letter</div>
+  )
+}
+
+export default Letter

src/helpers.tsx

@@ -0,0 +1,8 @@
+export const boardDefault = [
+    ["", "", "", "", ""],
+    ["", "", "", "", ""],
+    ["", "", "", "", ""],
+    ["", "", "", "", ""],
+    ["", "", "", "", ""],
+    ["", "", "", "", ""],
+]

tsconfig.json

@@ -21,6 +21,9 @@
     "jsx": "react-jsx"
   },
   "include": [
-    "src"
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/*.ts",
+    "src/*.tsx"
   ]
 }