moderne web-anwendungen mit

43 Pages·2017·2.85 MB·English

NILS HARTMANN
MODERNE WEB-ANWENDUNGEN MIT
React
Slides: http://bit.ly/bedcon-react
BED-CON BERLIN | SEPTEMBER 2017 | @NILSHARTMANN
NILS HARTMANN
Programmierer aus Hamburg
Java
JavaScript, TypeScript
Trainings und Workshops
https://reactbuch.de
@NILSHARTMANN
HINTERGRUND: SINGLE PAGE APPLICATIONS
Klassische Webanwendung Single Page Application
• JSP, Thymeleaf, JSF • REST API
• jQuery • React, Angular, Vue
https://github.com/nilshartmann/react-example-app/tree/typescript
BEISPIEL ANWENDUNG
<PasswordView>
<PasswordForm>
<input />
<CheckLabelList>
<CheckLabel />
<CheckLabel />
</CheckLabelList>
<Label />
<Button />
</PasswordForm>
</PasswordView>
KOMPONENTEN
RETHINKING BEST PRACTICES
Klassische Aufteilung Aufteilung in Komponenten
Logik, Model
(JS)
View
(HTML, Template)
Gestaltung
(CSS)
n d l
e
o el b
utt ef La
B b
a
g
n
i
E
Grafik Inspiriert von: https://pbs.twimg.com/media/DCXJ_tjXoAAoBbu.jpg
SEPARATION OF CONCERNS
React-Komponenten
Logik, Model
(JS)
• bestehen aus Logik und UI
• kein CSS
View
• keine Templatesprache
(HTML, Template)
• werden deklarativ beschrieben
• werden immer komplett
Gestaltung
(CSS)
gerendert
n d l
e
o l
e b
t
t f a
u e L
B b
a
• können auf dem Server g
n
i
E
gerendert werden („universal
webapps“)
KOMPONENTEN
REACT SCHRITT FÜR SCHRITT
DIE JSX SPRACHERWEITERUNG
Anstatt einer Template Sprache: HTML in JavaScript integrieren
• Erlaubt Schreiben von HTML-artigen Ausdrücken im JavaScript-Code
• Wird zu regulärem JavaScript Code compiliert (z.B. Babel, TypeScript)
• Optional
JSX
const name = 'Lemmy';
const greeting = <h1>Hello, {name}</h1>;
Übersetztes JavaScript
var name = 'Lemmy';
var greeting = React.createElement('h1', null, 'Hello, ', name);
EINE REACT KOMPONENTE: ALS FUNKTION
Komponente CheckLabel
function CheckLabel() {
Komponentenfunktion JSX
return <div
className="CheckLabel-unchecked">
At least 8 characters long.
</div>;
}