From f00913d5a8fae7d0caf584ed50d92dfc2ad1d70e Mon Sep 17 00:00:00 2001 From: Vincent Ahrend Date: Fri, 2 Oct 2020 16:55:10 +0200 Subject: [PATCH 1/2] Setup React and JSX (WIP) --- package-lock.json | 120 +++++++++++++++++++++++++++------------------- src/app.tsx | 5 ++ src/index.tsx | 8 ++++ webpack.config.js | 27 ++++++----- 4 files changed, 99 insertions(+), 61 deletions(-) create mode 100644 src/app.tsx create mode 100644 src/index.tsx diff --git a/package-lock.json b/package-lock.json index 6ebd02a..e9c1637 100644 --- a/package-lock.json +++ b/package-lock.json @@ -78,6 +78,17 @@ "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", "dev": true }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "dev": true, + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -1483,13 +1494,13 @@ } }, "@typescript-eslint/eslint-plugin": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.4.0.tgz", - "integrity": "sha512-RVt5wU9H/2H+N/ZrCasTXdGbUTkbf7Hfi9eLiA8vPQkzUJ/bLDCC3CsoZioPrNcnoyN8r0gT153dC++A4hKBQQ==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.4.1.tgz", + "integrity": "sha512-O+8Utz8pb4OmcA+Nfi5THQnQpHSD2sDUNw9AxNHpuYOo326HZTtG8gsfT+EAYuVrFNaLyNb2QnUNkmTRDskuRA==", "dev": true, "requires": { - "@typescript-eslint/experimental-utils": "4.4.0", - "@typescript-eslint/scope-manager": "4.4.0", + "@typescript-eslint/experimental-utils": "4.4.1", + "@typescript-eslint/scope-manager": "4.4.1", "debug": "^4.1.1", "functional-red-black-tree": "^1.0.1", "regexpp": "^3.0.0", @@ -1506,15 +1517,15 @@ } }, "@typescript-eslint/experimental-utils": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.4.0.tgz", - "integrity": "sha512-01+OtK/oWeSJTjQcyzDztfLF1YjvKpLFo+JZmurK/qjSRcyObpIecJ4rckDoRCSh5Etw+jKfdSzVEHevh9gJ1w==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.4.1.tgz", + "integrity": "sha512-Nt4EVlb1mqExW9cWhpV6pd1a3DkUbX9DeyYsdoeziKOpIJ04S2KMVDO+SEidsXRH/XHDpbzXykKcMTLdTXH6cQ==", "dev": true, "requires": { "@types/json-schema": "^7.0.3", - "@typescript-eslint/scope-manager": "4.4.0", - "@typescript-eslint/types": "4.4.0", - "@typescript-eslint/typescript-estree": "4.4.0", + "@typescript-eslint/scope-manager": "4.4.1", + "@typescript-eslint/types": "4.4.1", + "@typescript-eslint/typescript-estree": "4.4.1", "eslint-scope": "^5.0.0", "eslint-utils": "^2.0.0" }, @@ -1541,41 +1552,41 @@ } }, "@typescript-eslint/parser": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.4.0.tgz", - "integrity": "sha512-yc14iEItCxoGb7W4Nx30FlTyGpU9r+j+n1LUK/exlq2eJeFxczrz/xFRZUk2f6yzWfK+pr1DOTyQnmDkcC4TnA==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.4.1.tgz", + "integrity": "sha512-S0fuX5lDku28Au9REYUsV+hdJpW/rNW0gWlc4SXzF/kdrRaAVX9YCxKpziH7djeWT/HFAjLZcnY7NJD8xTeUEg==", "dev": true, "requires": { - "@typescript-eslint/scope-manager": "4.4.0", - "@typescript-eslint/types": "4.4.0", - "@typescript-eslint/typescript-estree": "4.4.0", + "@typescript-eslint/scope-manager": "4.4.1", + "@typescript-eslint/types": "4.4.1", + "@typescript-eslint/typescript-estree": "4.4.1", "debug": "^4.1.1" } }, "@typescript-eslint/scope-manager": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.4.0.tgz", - "integrity": "sha512-r2FIeeU1lmW4K3CxgOAt8djI5c6Q/5ULAgdVo9AF3hPMpu0B14WznBAtxrmB/qFVbVIB6fSx2a+EVXuhSVMEyA==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.4.1.tgz", + "integrity": "sha512-2oD/ZqD4Gj41UdFeWZxegH3cVEEH/Z6Bhr/XvwTtGv66737XkR4C9IqEkebCuqArqBJQSj4AgNHHiN1okzD/wQ==", "dev": true, "requires": { - "@typescript-eslint/types": "4.4.0", - "@typescript-eslint/visitor-keys": "4.4.0" + "@typescript-eslint/types": "4.4.1", + "@typescript-eslint/visitor-keys": "4.4.1" } }, "@typescript-eslint/types": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.4.0.tgz", - "integrity": "sha512-nU0VUpzanFw3jjX+50OTQy6MehVvf8pkqFcURPAE06xFNFenMj1GPEI6IESvp7UOHAnq+n/brMirZdR+7rCrlA==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.4.1.tgz", + "integrity": "sha512-KNDfH2bCyax5db+KKIZT4rfA8rEk5N0EJ8P0T5AJjo5xrV26UAzaiqoJCxeaibqc0c/IvZxp7v2g3difn2Pn3w==", "dev": true }, "@typescript-eslint/typescript-estree": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.4.0.tgz", - "integrity": "sha512-Fh85feshKXwki4nZ1uhCJHmqKJqCMba+8ZicQIhNi5d5jSQFteWiGeF96DTjO8br7fn+prTP+t3Cz/a/3yOKqw==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.4.1.tgz", + "integrity": "sha512-wP/V7ScKzgSdtcY1a0pZYBoCxrCstLrgRQ2O9MmCUZDtmgxCO/TCqOTGRVwpP4/2hVfqMz/Vw1ZYrG8cVxvN3g==", "dev": true, "requires": { - "@typescript-eslint/types": "4.4.0", - "@typescript-eslint/visitor-keys": "4.4.0", + "@typescript-eslint/types": "4.4.1", + "@typescript-eslint/visitor-keys": "4.4.1", "debug": "^4.1.1", "globby": "^11.0.1", "is-glob": "^4.0.1", @@ -1619,12 +1630,12 @@ } }, "@typescript-eslint/visitor-keys": { - "version": "4.4.0", - "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.4.0.tgz", - "integrity": "sha512-oBWeroUZCVsHLiWRdcTXJB7s1nB3taFY8WGvS23tiAlT6jXVvsdAV4rs581bgdEjOhn43q6ro7NkOiLKu6kFqA==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.4.1.tgz", + "integrity": "sha512-H2JMWhLaJNeaylSnMSQFEhT/S/FsJbebQALmoJxMPMxLtlVAMy2uJP/Z543n9IizhjRayLSqoInehCeNW9rWcw==", "dev": true, "requires": { - "@typescript-eslint/types": "4.4.0", + "@typescript-eslint/types": "4.4.1", "eslint-visitor-keys": "^2.0.0" }, "dependencies": { @@ -2675,13 +2686,6 @@ "to-regex-range": "^5.0.1" } }, - "fsevents": { - "version": "2.1.3", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", - "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", - "dev": true, - "optional": true - }, "is-number": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz", @@ -4848,15 +4852,11 @@ "dev": true }, "fsevents": { - "version": "1.2.13", - "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", - "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.1.3.tgz", + "integrity": "sha512-Auw9a4AxqWpa9GUfj370BMPzzyncfBABW8Mab7BGWBYDj4Isgq+cDKtx0i6u9jcX9pQDnswsaaOTgTmA5pEjuQ==", "dev": true, - "optional": true, - "requires": { - "bindings": "^1.5.0", - "nan": "^2.12.1" - } + "optional": true }, "function-bind": { "version": "1.1.1", @@ -9231,6 +9231,17 @@ "upath": "^1.1.1" } }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "dev": true, + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", @@ -9452,6 +9463,17 @@ "upath": "^1.1.1" } }, + "fsevents": { + "version": "1.2.13", + "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.13.tgz", + "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", + "dev": true, + "optional": true, + "requires": { + "bindings": "^1.5.0", + "nan": "^2.12.1" + } + }, "glob-parent": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz", diff --git a/src/app.tsx b/src/app.tsx new file mode 100644 index 0000000..c7f1aa9 --- /dev/null +++ b/src/app.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +const App = () =>

Hallo

; + +export default App; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx new file mode 100644 index 0000000..854531c --- /dev/null +++ b/src/index.tsx @@ -0,0 +1,8 @@ +import 'core-js/stable'; +import 'regenerator-runtime/runtime'; + +import React from 'react'; +import ReactDOM from 'react-dom'; +import App from './app' + +ReactDOM.render(, document.getElementById('root')); \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index 7567893..a5425b2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,30 +1,33 @@ -const path = require('path'); +const path = require("path"); -const HtmlWebpackPlugin = require('html-webpack-plugin'); +const HtmlWebpackPlugin = require("html-webpack-plugin"); const getPath = (file) => { - return path.resolve(__dirname, 'src', file); + return path.resolve(__dirname, "src", file); }; module.exports = () => { return { - target: 'web', - devtool: 'eval-source-map', - entry: getPath('index.jsx'), + target: "web", + devtool: "eval-source-map", + entry: getPath("index.tsx"), resolve: { - extensions: ['.js', '.jsx'], + extensions: [".ts", ".tsx"], }, module: { rules: [ { - test: /\.jsx?/, + test: /\.tsx?/, exclude: /node_modules/, use: [ { - loader: 'babel-loader', + loader: "babel-loader", }, { - loader: 'eslint-loader', + loader: "eslint-loader", + }, + { + loader: "ts-loader", }, ], }, @@ -32,8 +35,8 @@ module.exports = () => { }, plugins: [ new HtmlWebpackPlugin({ - filename: 'index.html', - template: getPath('index.html'), + filename: "index.html", + template: getPath("index.html"), }), ], devServer: { From ef75d532d37bdea1b6458add360224e1752941dc Mon Sep 17 00:00:00 2001 From: sophiek Date: Mon, 5 Oct 2020 21:28:30 +0200 Subject: [PATCH 2/2] Fix jsx setup --- babel.config.json | 2 +- src/app.tsx | 6 +++--- src/index.tsx | 12 ++++++------ tsconfig.json | 3 +++ webpack.config.js | 5 +---- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/babel.config.json b/babel.config.json index 104747c..885165e 100644 --- a/babel.config.json +++ b/babel.config.json @@ -8,6 +8,6 @@ } ], "@babel/typescript", - "@babel/preset-react" + "@babel/react" ] } diff --git a/src/app.tsx b/src/app.tsx index c7f1aa9..5306c8d 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,5 +1,5 @@ -import React from 'react'; +import React from "react"; -const App = () =>

Hallo

; +const App = () =>

Hallo, hier ist alles schön :)

; -export default App; \ No newline at end of file +export default App; diff --git a/src/index.tsx b/src/index.tsx index 854531c..8f8a37e 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,8 +1,8 @@ -import 'core-js/stable'; -import 'regenerator-runtime/runtime'; +import "core-js/stable"; +import "regenerator-runtime/runtime"; -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './app' +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./app"; -ReactDOM.render(, document.getElementById('root')); \ No newline at end of file +ReactDOM.render(, document.getElementById("root")); diff --git a/tsconfig.json b/tsconfig.json index 542900d..b5fe33a 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,4 +1,7 @@ { + "compilerOptions": { + "jsx": "react" + }, "compiler": { "jsx": "react", "noImplicitAny": false, diff --git a/webpack.config.js b/webpack.config.js index a5425b2..0610464 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -12,7 +12,7 @@ module.exports = () => { devtool: "eval-source-map", entry: getPath("index.tsx"), resolve: { - extensions: [".ts", ".tsx"], + extensions: [".js", ".ts", ".tsx"], }, module: { rules: [ @@ -26,9 +26,6 @@ module.exports = () => { { loader: "eslint-loader", }, - { - loader: "ts-loader", - }, ], }, ],