adjust eslint and typescript config

.eslintrc.js

@@ -24,5 +24,10 @@ module.exports = {
   ],
   rules: {
     semi: ['error', 'always'],
+    'react/jsx-tag-spacing': ['error', {
+      beforeSelfClosing: 'always'
+    }],
+    'react/jsx-uses-react': 'error',
+    'react/jsx-uses-vars': 'error',
   },
 };

package-lock.json

@@ -963,12 +963,37 @@
       "integrity": "sha512-Il2DtDVRGDcqjDtE+rF8iqg1CArehSK84HZJCT7AMITlyXRBpuPhqGLDQMowraqqu1coEaimg4ZOqggt6L6L+A==",
       "dev": true
     },
+    "@types/prop-types": {
+      "version": "15.7.3",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.3.tgz",
+      "integrity": "sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==",
+      "dev": true
+    },
     "@types/q": {
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/@types/q/-/q-1.5.2.tgz",
       "integrity": "sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==",
       "dev": true
     },
+    "@types/react": {
+      "version": "16.9.11",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.11.tgz",
+      "integrity": "sha512-UBT4GZ3PokTXSWmdgC/GeCGEJXE5ofWyibCcecRLUVN2ZBpXQGVgQGtG2foS7CrTKFKlQVVswLvf7Js6XA/CVQ==",
+      "dev": true,
+      "requires": {
+        "@types/prop-types": "*",
+        "csstype": "^2.2.0"
+      }
+    },
+    "@types/react-dom": {
+      "version": "16.9.4",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.4.tgz",
+      "integrity": "sha512-fya9xteU/n90tda0s+FtN5Ym4tbgxpq/hb/Af24dvs6uYnYn+fspaxw5USlw0R8apDNwxsqumdRoCoKitckQqw==",
+      "dev": true,
+      "requires": {
+        "@types/react": "*"
+      }
+    },
     "@typescript-eslint/eslint-plugin": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.7.0.tgz",
@@ -2382,6 +2407,12 @@
         "cssom": "0.3.x"
       }
     },
+    "csstype": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.7.tgz",
+      "integrity": "sha512-9Mcn9sFbGBAdmimWb2gLVDtFJzeKtDGIr76TUqmjZrw9LFXBMSU70lcs+C0/7fyCd6iBDqmksUcCOUIkisPHsQ==",
+      "dev": true
+    },
     "dashdash": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",

package.json

@@ -4,7 +4,11 @@
   "description": "A simple web app to track calories.",
   "main": "index.js",
   "scripts": {
+    "clean": "rm -rf ./dist",
+    "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx",
+    "prebuild": "npm run clean",
     "build": "parcel build -d dist --public-url / ./src/index.html",
+    "predev": "npm run clean",
     "dev": "parcel serve -d dist --public-url / ./src/index.html",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -25,6 +29,8 @@
     "typescript": "^3.7.2"
   },
   "devDependencies": {
+    "@types/react": "^16.9.11",
+    "@types/react-dom": "^16.9.4",
     "@typescript-eslint/eslint-plugin": "^2.7.0",
     "@typescript-eslint/parser": "^2.7.0",
     "eslint": "^6.6.0",

src/components/App.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+function App () {
+  return (
+    <div>foobar</div>
+  );
+}
+
+export {
+  App
+};

src/index.tsx

@@ -1 +1,5 @@
-console.log('foo');
+import React from 'react';
+import { render } from 'react-dom';
+import { App } from './components/App';
+
+render(<App />, document.getElementById('appContainer'));

tsconfig.json

@@ -7,7 +7,7 @@
     // "lib": [],                             /* Specify library files to be included in the compilation. */
     // "allowJs": true,                       /* Allow javascript files to be compiled. */
     // "checkJs": true,                       /* Report errors in .js files. */
-    // "jsx": "preserve",                     /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
+    "jsx": "react",                           /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */
     // "declaration": true,                   /* Generates corresponding '.d.ts' file. */
     // "declarationMap": true,                /* Generates a sourcemap for each corresponding '.d.ts' file. */
     // "sourceMap": true,                     /* Generates corresponding '.map' file. */
@@ -24,7 +24,7 @@
 
     /* Strict Type-Checking Options */
     "strict": true,                           /* Enable all strict type-checking options. */
-    // "noImplicitAny": true,                 /* Raise error on expressions and declarations with an implied 'any' type. */
+    "noImplicitAny": true,                    /* Raise error on expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,              /* Enable strict null checks. */
     // "strictFunctionTypes": true,           /* Enable strict checking of function types. */
     // "strictBindCallApply": true,           /* Enable strict 'bind', 'call', and 'apply' methods on functions. */