Der Import Befehl taucht in jedem React Skript mindestens 1 mal auf und ist daher elementar. React Skripte "kennen" nur Dateien, die explizit eingebunden wurden. Es gibt verschiedene Arten, die je nach Art der Datei auftreten können.

Beim Einbinden von node-Modulen muss kein Dateipfad angegeben werden, sondern nur der Name des Moduls.

    import React from 'react';

Der Name des Moduls steht hier am Ende. Das erste React ist hier der Variablenname mit dem das Modul angesprochen werden kann. Bei React z.B bei der Erstellung einer neunen Komponente:

    export default class XYZ extends React.Component {
    ...
    }

Will man nun z.B eine Komponente in einer anderen Komponente nutzen, so muss man diese Komponente mit einem Dateipfad importieren.

    import XYZ from './XYZ.js';

Bei der Angabe von Pfaden ist wichtig, dass der Pfad in React immer mit einem Punkt beginnt. Pfadangaben sollten sowieso immer relativ sein, da sich die Komponenten alle im selben Überordner befinden müssen, im src Ordner. Die Ordnerstruktur innerhalb ist egal, aber es können nur Komponenten innerhalb dieses Ordners eingebunden werden.

Andere Dateien wie z.B Bilder oder Stylesheets werden genauso eingebunden wie Komponenten. Je nach Anwendung kann aber der Variablenname wegfallen:

    import './Stylesheet.css';

Ein Stylesheet besitzt Standardmäßig keine Elemente, die wir in React direkt ansprechen müssen, daher brauchen wir diesen hier nicht zwangsläufig.

Will ich aber nun ein Bild in meiner Komponente einbinden, so muss ich dieses Bild in React ansprechen können:

    import picture from './picture.png';
    ....
    var pic = <img src={picture} />

Wie schon erwähnt kann ein Stylesheet normal als CSS-Datei importiert werden. Es gibt aber mehr als einen Weg CSS in React einzubinden.

• Die Normale Einbindung:

    import './stylesheet.css';
    ....
    <div className="exampleClass"></div>

• als privates CSS-Modul (das CSS-File MUSS hier die Dateiendung .module.css haben)

    import style from './stylesheet.module.css';
    ....
    <div className={style.exampleClass}></div>

• bei CSS Code der nicht spezifisch für eine Komponente sondern für die gesamte Seite angewandt werden soll, kann die Datei im public-Ordner einfach in die index.html eingepflegt werden, wie man es von HTML gewohnt ist.

Bei Code aus dem Netz sieht man es häufig, dass Dateiendungen einfach weggelassen werden. Das ist in React zwar legitim, kann aber zu Problemen führen, wenn man keine Eindeutige Namensgebung hat.

Man kann in React auch mit Sass arbeiten, darauf wird hier aber nicht eingegangen.