ReactJS
Your trail: 

This page (revision-9) was last changed on 27-Nov-2023 15:18 by Dieter Käppel

This page was created on 18-Oct-2023 06:42 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
9 27-Nov-2023 15:18 5 KB Dieter Käppel to previous
8 23-Nov-2023 13:03 4 KB Dieter Käppel to previous | to last
7 14-Nov-2023 09:00 4 KB Dieter Käppel to previous | to last
6 14-Nov-2023 08:24 4 KB Dieter Käppel to previous | to last
5 14-Nov-2023 08:23 4 KB Dieter Käppel to previous | to last
4 18-Oct-2023 08:15 3 KB Dieter Käppel to previous | to last
3 18-Oct-2023 06:45 2 KB Dieter Käppel to previous | to last
2 18-Oct-2023 06:43 1 KB Dieter Käppel to previous | to last
1 18-Oct-2023 06:42 1014 bytes Dieter Käppel to last

Page References

Incoming links Outgoing links
ReactJS
ReactJS

Version management

Difference between version and

At line 9 added 52 lines
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"]
}
}}}
At line 62 added 18 lines
!!!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"
]
}
}
}
At line 12 changed one line
!!TS-Config
Zusätzlich muss in der TS-Config angegeben werden, dass es sich um Extended Javascript handelt:
{{{
{
"compilerOptions": {
"jsx": "react-jsx"
}
}
}}}
!!!Typescript nur Typen generieren
At line 123 added 105 lines
!!!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": "node"
}
}
}}}
__Hinweis:__ Viele Konfigurationen sind inkonsistent. Es ist schwierig herauszufinden, welche Kombinationen dieser Plugins mit welchen Parametern zusammen arbeiten.
!!!LitJS Adapter
Folgender Adapter vereinfacht das Einbinden von LitJS-Komponenten:
{{{
import {createComponent} from "@lit/react";
import React from "react";
export function lit(tag) {
return createComponent({
tagName: customElements.getName(tag),
elementClass: tag,
react: React
});
}
export default function Lit({tag, children, ...props}) {
const Element = lit(tag);
return <Element {...props}>{children}</Element>;
}
}}}
Oder in Typescript:
{{{
import {ReactWebComponent, createComponent} from "@lit/react";
import React from "react";
declare var customElements: any;
type Constructor<T> = {
new (): T;
};
type LitProps<I> = {
tag: Constructor<I>,
children: React.ReactNode,
rest: any[]
};
type AnyComponent = (props: any) => React.ReactElement;
export function lit<I extends HTMLElement>(tag: Constructor<I>): ReactWebComponent<I> {
return createComponent({
tagName: customElements.getName(tag),
elementClass: tag,
react: React
});
}
export default function Lit<I extends HTMLElement>({tag, children, ...rest}: LitProps<I>): React.ReactElement {
const Element: AnyComponent = lit(tag) as AnyComponent;
return <Element {...rest}>{children}</Element>;
}
}}}
This page (revision-9) was last changed on 27-Nov-2023 15:18 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
824 Aufrufe

referenziert von
Main
ReactJS

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.21 17:00:35 GMT