Mit ReactJS und Typescript anfangen

Im Bereich Frontend Development muss man als letzte, beim User ausgeführte Schicht, eine besonders hohe Flexibilität vorweisen können. Um nicht für jeden Anwendungsfall eine neue Software zu benötigen bin ich bei ReactJS von Facebook gelandet.

Weg und Zielsetzung – was kann ich eigentlich mit React machen?

Mit React (hier gewollt ohne JS) kann man kurz gesagt sehr viel machen. React Native zum Beispiel bietet die Möglichkeit das eigene Projekt native in Apps für Apple iOS und Android zu bringen. Wir wollen uns hier aber auf die Webanwendungen fokussieren.

Da ReactJS im Grunde „nur“ eine Library ist die man als Basis verwendet, sind die Einsatzbereiche sehr vielfältig. Ob ein kleines Tool in einer Seite oder als umfassende Single Page Application (im weiteren SPA genannt). Wenn es um eine ganze SPA geht, werden gern auch andere Frameworks wie Angular von Google genannt und/oder verwendet. Diese bieten meist mehr Funktionalität, sind aber in ihrer Verwendung dadurch aber auch „starrer“.

Um als kleine Library auch diese Funktionalitäten zu gewährleisten wenn man ReactJS verwendet, gibt es zahlreiche Plugins und Extensions zu verschiedensten Bereichen. Im Zweifel kann man natürlich aber auch alles selber schreiben, aber wer will das heutzutage noch…

ReactJS App starter Projekt
ReactJS App starter Projekt

Voraussetzungen – was benötige ich für die Erstellung von ReactJS Applikationen?

Nun was für Handwerkszeug braucht es um los zu legen? Grundvoraussetzung ist Kenntnis von Javascript und Verständnis von Objekt-Orientierter Programmierung (OOP). Die weiteren Tools und Schritte stelle ich dann vor.

Installiert sollte ein Package-Manager sein, um alle Plugins und Software herunterladen zu können. Ebenso empfehlenswert ist die Verwendung einer guten, vertrauten IDE zur Softwareentwicklung. Und natürlich React selber. Hier die Links der von mir verwendeten Programme mit zusätzlichen Informationen.

  • Konsole/Terminal
  • PHPStorm von IntelliJ >> https://www.jetbrains.com/phpstorm/
    • PHPStorm kann man nach der Installation 30 Tage lang testen, einfach herunterladen und installieren.
    • Kostenlose Alternative zu PHPStorm Microsoft Code >> https://code.visualstudio.com/download
  • GIT >> https://git-scm.com/
    • Herunterladen und installieren.
  • NodeJS >> https://nodejs.org/en/
    • Herunterladen und installieren.
    • In der Konsole testen ob vorhanden, mit node -v
    • NPM >> sollte nach der NodeJS Installation mit vorhanden sein.
      • In der Konsole testen ob vorhanden, mit npm -v
  • ReactJS >> https://github.com/facebookincubator/create-react-app
    • Die Installation ist unter dem Link bei Github auch beschrieben. Wer da nicht schauen möchte gibt bitte direkt in die Konsole npm install -g create-react-app ein. Mit dem Parameter -g wird create-react-app` global in eurer Umgebung (auf dem Computer) installiert. So muss man die Software nicht bei jedem Projekt erst noch installieren.
Installierte Software Tools CLI
Installierte Software – Command Line Tools

Des weiteren möchte ich noch erwähnen das ich alle Schritte und Arbeiten auf einem Apple Mac vorgenommen habe. Unter anderen Betriebssystemen laufen die von mir genannten Programme aber auch.

Wenn die aufgeführten Tools alle verfügbar sind, geht es im nächsten Artikel weiter mit dem anlegen eines ersten Projekts sowie der Einrichtung in der IDE.

Ein Kommentar

Kommentar hinterlassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.