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

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