[ReactJS] ist das Javascript-Framework von Facebook. Es ist Open Source. !!!Webpack Webpack ist ein sogenannter Transpiler, der Javascript Code parsed und für das Web, dem Browser oder zum Debugging packt. [ReactJS] kommt mit einer internen Konfiguration von Webpack. Sobald man etwas ändern möchte, braucht man eine "webpack.config.js" im Projekt. {{{ module: { rules: [{ test: /\.jsx$/i, include: path.resolve(__dirname, "src"), use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", ["@babel/preset-react", {"runtime": "automatic"}] ] } } }, { test: /\.ts$/i, include: path.resolve(__dirname, "src"), use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env", "@babel/typescript" ] } } }, { test: /\.js$/i, include: path.resolve(__dirname, "src"), use: { loader: "babel-loader", options: { presets: [ "@babel/preset-env" ] } } }, { test: /\.css$/i, include: [ path.resolve(__dirname, "src"), path.resolve(__dirname, "node_modules") ], use: ["style-loader", "css-loader", "postcss-loader"] }, { test: /\.(png|svg|jpe?g|gif|woff2?|ttf|eot)$/, use: "file-loader" }] }, resolve: { extensions: [".js", ".jsx", ".css", ".ts"] } }}} !!TS-Config Der Typescript-Compiler hat eine eigene Konfiguration: {{{ { "compilerOptions": { "target": "es5", "lib": [ "dom", "dom.iterable", "esnext" ], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, "jsx": "preserve" }, "include": [ "src" ] } }}} !!!Tailwind-Config Tailwind ist ein Style-Framework, welches versucht ohne Stylesheets auszukommen. Für [ReactJS] wird meist eine Konfiguration benötigt: {{{ /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], theme: { extend: {}, }, plugins: [], } }}}