Ich nehme derzeit an einer Akademie zum Java Fullstack Software Engineer teil. In den kommenden Wochen möchte ich hier meine Mitschrift, so gut es geht, aufzeichnen und mitteilen. Hier ist das, was ich vom ersten Tag in Block 10 gelernt und behalten habe:

# React

React ist ein Framework, welches basierend auf JavaScript für dynamische Komponenten des Frontends zuständig ist.

Eine Komponente hängt in einem DOM-Baum. App.js ist eine funktionale Komponente.

Shadow-Tree: Virtueller Dombaum, der im Hintergrund gebaut wird und bei Bedarf gegen die sichtbare Seite ausgetauscht wird.

Wer Java-Script mit React auf altem Weg nutzt, könnte auch einen SUV mit ausgeschaltetem Motor lenken ;-)

Startseite von React: https://react.org

Einrichtung Node.JS

Wir haben Node.JS herunter geladen (https://nodejs.org/en/) und installiert (Siehe auch den Artikel vom Vortag).
Mit node -v sehen wir die Version.
Mit npm -v sehen wir die Version vom Packet-Manager.
npm ls -g zeigt uns die global instalierten addons:

Wir lassen den npm-Ordner nach der Installation in Ruhe:

Wir installieren react (auf dem Arbeitsplatz-PC muss dafür SIA laufen und die zwei Proxy-Settings müssen gemacht werden):

Wir wechseln in unseren Projektordner "...\Block10\day01" und legen dort ein Projekt "my-app01" an mit "npx-create-react-app my-app01"

Wir starten den React-Server

cd my-app01

npm-start

Mit localhost:3000 in einem Browser auf den React-Server zugreifen:

In der Konsole darf nichts markiert werden, weil dann die Hintergrundprozesse (Server) nicht weiter laufen.

Projektstruktur:

Package.json entspricht der pom.xml von Maven. Man sieht dort die Abhängigkeiten:

node_modules fassen wir nicht an. Es entspricht quasi dem Maven

Der public Ordner mit seinen Inhalten ist der statische Teil unserer Web-Anwendungen.

Zusatzmodule installieren

Wir installieren lokal (also ohne -g) das Modul react-outer-dom und react-redux:

Die React Startseiten

Die index.html Seite sieht ziemlich leer aus. Dort gibt es nur eine Div-Section mit der ID "root", die aber leer ist. Dessen Inhalt wird geladen von index.js aus dem src-Ordner.

Die eigentliche Datei, die gerendert wird, ist App.js:

App.js liefert eine html-Seite als Return Ergebnis zurück:

Sobald eine Änderung in der App.js gespeichert wird, wird der Code automatisch compiliert und der Browser refresht:

Wir erstellen einen neuen Projekt-Ordner: My-app02
(npm install -g create-react-app brauchen wir nicht mehr machen, da wir es schon getan haben)

C:\Users\A290111\Akademie\Block10-React>npx create-react-app my-app02
C:\Users\A290111\Akademie\Block10-React>cd my-app02
C:\Users\A290111\Akademie\Block10-React\my-app02>npm install react-router-dom
C:\Users\A290111\Akademie\Block10-React\my-app02>npm install react-redux

nodee_modules ist schwergewichtig. Über 70.000 Dateien liegen in Unterordner. Normalerweise fassen wir ihn nicht an. npm installiert ihn aber für jedes Projekt neu.

Wir löschen das node-modules Verzeichnis in myapp02 und verschieben es von myapp-01 um eine Ebene höher in das day01. Mit der Version die wir haben, findet er das Nnode_modules Verzeichnis automatisch.

Wir öffnen App.js und ändern etwas drin rum (wir schmeissen den Inhalt raus und fügen folgendes ein):

Im Browser sehen wir dann (sofort nach dem Speichern):

Dann öffnen wir App.css

React kennt die Div-Klasse in App.js nicht. Das tut aber der Dom-Baum-React Framework. Der Code in den Klammern von Return sieht aus wie HTML, ist es aber nicht. Um die Fehlermeldung von oben wegzubekommen, ändern wir class in className:

Wir fügen nun die Komponente "Alpha" hinzu, sowohl in App.js als auch in der neu erstellten Datei "Alpha.js" und "Alpha.css". Im Browser erscheint in grün "Alpha (Funktionale Componente)"

Wir machen den Spaß auch noch für Beta, diesmal aber als Klassenkomponente:

Unterschied zwischen funktionaler und Klassenkomponeten

Eine funktionale Komponente ist eine Funktion, die via Return den React-HTML zurück gibt. Sie beinhaltet keine Daten. (Stateless). Kleiner Lebenszyklus.
Bei einer KlassenKomponente wird ein Render-Objekt zurückgegeben, welches das Return mit dem React-HTML zurück gibt. Die KK kann Daten beinhalten.
"Babel" übersetzt jsx nach JS.

Und jetzt eine gemischte Klassenkomponente:

Zusammenfassung

Block 10 - React

Bücher:

Fullstack React: The Complete Guide to ReactJS and Friends ISBN-13: 978-0991344628; 64,30 €
Learning React: Modern Patterns for Developing React Apps ISBN-13: 978-1492051725; 46,96 €
React: Das umfassende Handbuch für moderne Frontend-Entwicklung.ISBN-13: 978-3836268776; 39,90 €
React: Grundlagen, fortgeschrittene Techniken und Praxistipps – mit TypeScript und Redux ISBN-13: 978-3864905520; 34,30 €

Links:

https://nodejs.org/en/
https://reactjs.org/
https://reactjs.org/docs/getting-started.html
https://reactjs.org/tutorial/tutorial.html
https://de.reactjs.org/
https://www.w3schools.com/REACT/DEFAULT.ASP
https://www.tutorialspoint.com/reactjs/index.htm
https://kangax.github.io/compat-table/es6/

Tutorials:

https://reactjs.org/docs/getting-started.html
https://reactjs.org/tutorial/tutorial.html
https://www.tutorialspoint.com/reactjs/index.htm
https://www.w3schools.com/react/
https://www.guru99.com/reactjs-tutorial.html
https://www.javatpoint.com/reactjs-tutorial
https://www.tutorialandexample.com/reactjs-tutorial/
https://zetcode.com/all/
https://zetcode.com/all/#react
https://www.freecodecamp.org/news/react-beginner-handbook/
https://dev.to/syakirurahman/21-react-example-projects-to-learn-from-open-source-beginner-intermediate-level-2e6o
https://appdividend.com/2017/08/22/reactjs-tutorial-beginners-2017/
https://www.valentinog.com/blog/redux/

Material

https://material-ui.com/getting-started/installation/
https://material-ui.com/getting-started/usage/#quick-start
https://github.com/mui-org/material-ui/tree/master/examples

Umgebung:

node -v Version
npm -v Version
npm ls -g Globes Installationsverzeichnis für die NodeJS - Module : C:\Users\joachim\AppData\Roaming\npm

Proxy-Settintgs:

User-Home-Verz:\nodejs-14.17.npmrc

npm config set proxy http://username:password@host:port
npm config set https-proxy http://username:password@host:port

Telekom-Proxy:

npm config set proxy http://HE112113.emea1.cds.t-internal.com:8080/
npm config set https-proxy http://HE112113.emea1.cds.t-internal.com:8080/

Überblick Arbeiten mit ReactJS-Projekten

Entwicklungsumgebung einrichten
npm install -g create-react-app
npm ls -g

Anlegen eines ReactJS-Projekts:

Installation react, react-dom, und react-scripts mit cra-template…:
npx create-react-app my-app01

Installing react, react-dom, and react-scripts with cra-template... npm start Starts the development server. npm run build Bundles the app into static files for production. npm test Starts the test runner. npm run eject Removes this tool and copies build dependencies, configuration files and scripts into the app directory. If you do this, you can’t go back!

cd my-app01

Übersetzen und Starten der Applikation

npm start

Übersetzen *.ts -> *.js
Zusammenpackern webpack 5.68.0 compiled successfully in 8063 ms
Starten eines NodeJS-Server http://localhost:3000 my-app01@0.1.0 start
react-scripts start
….
Starting the development server…
Compiled successfully! You can now view my-app01 in the browser. Local: http://localhost:3000
On Your Network: http://10.0.1.238:3000

Browser http://localhost:3000/

REACT sucht vom Projekt ausgehend in der Hierachie nach Open (-> C:) einen node_modules-Ordener und benutzt den ersten den er findet um zu starten
Ab react@17.0..0

VOR REACT 17.0.0 muste man SymLinks einrichten

Symbolistic-Links: (aus Projekt-Verzeichniss)

Linux / Mac / Unix
ln -s ../node_modules ./node_modules
Quelle Ziel
Windows
mklink /J node_modules "../node_modules"
mklink /J node_modules "../../node_modules"

Ziel Quelle

React: Funktionale-Component vs. Class-Component>

https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components-in-react/

Functional Components (function NAME -> return(… React-HTML …))
-> Stateless component
-> Small Lifecycle

Class Component (class NAME -> render(return (… React-HTML …) ))
-> Stateful component
-> Big Lifecycle

Dateiendungen:

.ts -> *.js Funtional ES-5 function App() {
return ( "HTML");
}

.tsx -> *.jsx Klassesn ES-6 class App extends React.Component {
render() {
return ( "HTML");
}
} export default App;

jsx benötigt eine Transcription Babel d.h. erneutes übersetzen!!!!

-------------------------------------

Disclaimer

Alles was ich mitschrieb und verstanden habe ist ohne Gewähr. Die Bilder stammen teilweise aus dem Internet und wir haben keine Urheberansprüche darauf.

Besten Dank an unseren sehr empfehlenswerten

Trainer: Hans-Joachim Blanke blanke@4point.de

Man achte auf die Schwergewichtigkeit von node_modules ;-)

In den nächsten Tagen und Wochen geht’s weiter, so: stay tuned!

Gruß, Achim Mertens

Topics