This is version 1 2 3 4 5 6 7 8 9 . It is not the current version, and thus it cannot be edited.

Back to current version Restore this version

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"]
	}

Typescript Komponenten .tsx#

ReactJS kann auch mit Typescript kombiniert werden. Dazu muss in der webpack.config.js folgende Regel für den Babel-Loader konfiguriert werden:

        {
            test: /\.(jsx|tsx)$/,
            exclude: /node_modules/,
			use: {
				loader: "babel-loader",
				options: {
					presets: [
						"@babel/preset-env",
						["@babel/preset-react", {"runtime": "automatic"}],
                        "@babel/preset-typescript"
					]
				}
			}
        }

Zusätzlich muss in der TS-Config angegeben werden, dass es sich um Extended Javascript handelt:

{
	"compilerOptions": {
		"jsx": "react-jsx"
	}
}

Typescript nur Typen generieren#

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: [],
}

Typescript mit Decorators#

Von Typescript sind sehr viele Varianten mit sogenannten Decorators (Annotationen etc.) im Umlauf. Folgende Konfiguration unterstützt einige davon.

webpack.config.js:

            use: {
                loader: "babel-loader",
                options: {
                    presets: [
                        "@babel/preset-env",
                        "@babel/preset-typescript",
                        ["@babel/preset-react", {runtime: "automatic"}]
                    ],
                    plugins: [
                        "@babel/syntax-dynamic-import",
                        ["@babel/plugin-proposal-decorators", {version: "2023-05", decoratorAutoAccessors: true}],
                        "@babel/plugin-proposal-object-rest-spread",
                        ["@babel/plugin-transform-class-properties"]
                    ]
                }

tsconfig.json:

{
	"compilerOptions": {
		"jsx": "react-jsx",
		"experimentalDecorators": true,
		"emitDecoratorMetadata": true,
		"target": "ESNext",
		"moduleResolution": "Bundler"
	}
}

Hinweis: Viele Konfigurationen sind inkonsistent. Es ist schwierig herauszufinden, welche Kombinationen dieser Plugins mit welchen Parametern zusammen arbeiten.