Erste Schritte mit React

07.04.2021 Ricky Elfner
Mobile React Open source JavaScript Frontend Framework Hands-on Tutorial How-to

Nachdem wir Ihnen bereits Angular und Vue.js näher gebracht haben, wollen wir nun mit React fortfahren. Dabei ist auch React eine JavaScript Library um User Interfaces zu erstellen. Dadurch soll es anhand des States der Applikation möglich sein, einen gewünschtes User Interface darzustellen. Wie Angular und Vue setzt auch React auf eine komponentenbasierte Anwendung, bei der man die erstellten Komponenten immer wieder verwenden kann.

React wurde dabei von bzw. bei Facebook entwickelt und fand 2011 erstmals für Facebooks Newsfeed Anwendung sowie später im Jahre 2012 auch bei Instagram. Ab Oktober 2014 wurde React offiziell zu einem Open-Source-Projekt, jedoch mit einer BSD-Lizenz mit zusätzlicher Patentlizenz. Dies führte zu grossen Diskussionen und wurde ab September doch unter der MIT-Lizenz veröffentlicht.

Installation

Um mit der Entwicklung mit React zu beginnen, sollte zuvor Node.js installiert sein. Wenn Sie eine React erstellen möchten, können Sie zunächst create-react-app installieren. Dies können Sie über das Terminal mit dem folgenden Befehl tun:

npm install -g create-react-app

Wenn die Installation erfolgreich durchgelaufen ist, können Sie innerhalb des Terminals in den Ordner wechseln, in dem Sie Ihre App erstellen möchten. Dort führen Sie anschliessend den nächsten Befehl inklusive des gewünschten App-Namens aus. Dadurch erstellen Sie ein Setup einer React App , mitt der Sie entwicklen können.

npx create-react-app fundamentals-app

Dadurch erhalten Sie folgende Ordner Struktur:

Sobald der Erstellungsvorgang abgeschlossen ist, können Sie mit code . VS Code öffnen, falls dies Ihre gewünschte Entwicklungsumgebung sein sollte.
Zum Schluss müssen Sie nur noch den Server innerhalb des erstellen App Ordners starten.

npm start

JSX

Anstatt die übliche JavaScript-Endung für Files zu nutzen, sollten Sie lieber JSX für alle Files bzw. für Komponenten nutzen. Dabei sieht JSX von der Syntax zwar wie ein Template Sprache aus, kann jedoch auf den vollen Funktionsumfang von JavaScript zurückgreifen. Des Weiteren wird darauf geachtet, dass alle Elemente, die geöffnet werden, auch wieder geschlossen werden müssen.

Dabei kompeliert Babbel bei dem Build-Prozess diese Files dann in React.createElement()-Aufrufe. Dies hat den Vorteil, dass beim Programmieren kontrolliert wird, ob die Eingabe Parameter stimmen. Dies hilft Ihnen, fehlerfrei zu programmieren.

Natürlich gibt es auch dabei einige Dinge zu beachten. Sobald der Code über mehrere Zeilen geht, müssen diese Ausdrücke in Klammer stehen. Möchte man JavaScript Ausdrücke verwenden, werden diese in geschweiften Klammern geschrieben. Dasselbe zählt für CSS-Inline-Style. Auch wichtig zu wissen, dass die Attribute für HTML-Elemente nicht auf die übliche Art geschrieben wird, sondern hier wird auf die Schreibweise des DOM Element Interface zurückgegriffen.

Komponenten

Komponenten sind dafür da, dass Sie ihre Applikation bzw. Ihr User Interface in einzelne kleinere Stücke unterteilen können. Dabei sollten Sie darauf achten, dass diese nur von ihrem Input (den Properties) abhängig sind, damit sie auch an anderen Stellen wieder verwendet werden können. Dabei gibt es zwei verschiedene Arten von Komponenten Function Components und Class Components

Class Components

Wenn Sie solch eine Komponente verwenden, müssen Sie diese Klasse durch Component erweitern. Ein weiterer Unterschied zur Function Component ist die render-Methode. Wenn Sie Ihrer Komponente Properties übergeben wollen, können Sie dies selbstverständlich machen. Jedoch können Sie darauf nur über die Instanz Eigenschaft this.props zugreifen.

import React from "react";

class ClassComponent extends React.Component {
    
    render() {
        return <div>This is my {this.props.name} Component</div>;
    }
};

export default ClassComponent;

Function Components

Diese Komponente wird als eine JavaScript-Funktion erstellt. Bevor React Hooks eingeführt hatte, war es bei dieser Art von Komponente nicht möglich, einen lokalen State zu verwalten. Dadurch erfüllt die Komponente nun alle Bedingungen, da Sie entweder null oder ein React.Element als Rückgabe Wert liefert. Um auf Properties zu zugreifen, können sie in den Klammern entweder die in zusätzlichen geschweiften Klammern den Propertie-Name übergeben oder Sie geben nur props an und greifen über props. und den Propertie-Namen darauf zu.

import React from "react";

const FunctionalComponent = ({ name }) => {
    return (   
        <div>
            This is my {name} Component
        </div>
    )
}

export default FunctionalComponent;

Um diese beiden Komponenten zu verwenden, müssen diese innerhalb des Files App.js zunächst importiert werden. Anschliessend können Sie diese innerhalb des return-Wertes verwenden.

import './App.css';
import ClassComponent from './components/ClassComponent';
import FunctionalComponent from './components/FunctionalComponent';

function App() {
  return (
    <div>
      <ClassComponent name={"Class"}/>
      <FunctionalComponent name={"Functional"}/>
    </div>

  );
}

export default App;

Innerhalb des index.js Files wird dagegen die App.js Komponente aufgerufen, welche im Normal Fall als die oberste Komponente innerhalb einer React Applikation zählt.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Wie Sie oben auf Zeile 11 sehen können, wird hier auf ein Id root innerhalb von document verwiesen.

Diese ID können Sie in dem index.html File finden. Dieses File stellt den endgültigen Inhalt Ihrer Applikation dar. Dabei wird nun Ihre App.js in das div-Element root gerendert.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>React App</title>
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
  </body>
</html>

Event Handling

Natürlich haben Sie auch die Möglichkeit, Events innerhalb von React zu nutzen, wie zum Beispiel das Klicken eines Buttons. Ein Unterschied ist hier im Vergleich zu HTML Event-Attributen, dass die CamelCase-Schreibweise dafür genutzt wird. Dies bedeutet beispielsweise, dass aus onclick innerhalb von HTML onClick in React JSX Files.

Möchten Sie nun beispielsweise auf einem Button ein onClick-Event erstellen, dann müssen Sie via Event-Props eine Referenz zu einer Funktion übergeben. Dafür erstellen wir zunächst eine MyButton-Klassen-Komponente mit dem gewünschten Button. Dieser Button soll bei einem onClick-Event die Funktion onClickHandler innerhalb der eigenen Klasse aufrufen.

class MyButton extends React.Component {
        
    render() {
        return (
            <div>
                <button onClick={this.onClickHandler}>Click!</button>
                <p>{this.state.counter}</p>
            </div>
        )             
        ;
    }
};

export default MyButton;

Deshalb müssen Sie als Nächstes noch die Funktion erstellen. Diese soll bei jedem Click auf dem Button die Variable counter innerhalb des States um eins erhöhen.

onClickHandler() {
  this.setState((state) => ({
    counter: state.counter + 1,
  }));
}

Damit Sie auch den State mit der Variable Counter nutzen können, ist es notwendig, einen Constructor zu erstellen, der den State mit der Variable definiert. Damit der onClickHandler auch auf dieses State zugreifen kann, ist noch das Method-Binding notwendig.

constructor(props) {
    super(props);
    this.state = {
        counter: 0,
    };
    this.onClickHandler = this.onClickHandler.bind(this);
    }

Es gibt jedoch auch noch die Möglichkeit, dass Sie keinen Constructor erstellen müssen, sondern die Class Properties verwenden können. Dabei müssen sie nur den State definieren und die Methode als Arrow Function schreiben.

    state = {
      counter: 0,
    };

    onClickHandler = () => {
      this.setState((state) => ({
        counter: state.counter + 1,
      }));
    }

Styling

Für das Styling von Komponenten innerhalb von React können Sie auf verschiedene Varianten zugreifen.

Inline

Die erste Möglichkeit ist die Style Anpassungen mittels Inline Style vorzunehmen. Dies könnte dann wie folgt aussehen.

<div style={{border: '1px solid black', padding: 10, backgroundColor:'lightgray'}}>
    <div  style={{border: '1px solid black', padding: 10, margin:10}}>
      <ClassComponent name={"Class"}/>
    </div>
</div>

CSS-Klassen

Natürlich können Sie auch einfach ein CSS-File erstellen in dem Sie wie gewohnt ihre Styles festlegen. Dieses File müssen Sie anschliessend in der gewünschten Komponente importieren.

import './App.css';

Innerhalb des CSS-Files können Sie beispielsweise anhand Klassen oder IDs das styling vornehmen.

.myItem {
  background-color: white;
  color: black;
  border: 2px solid red;
  padding: 10px;
  margin:10px;
}

Um dieses Styling nun zu verwenden müssen Sie in diesem Fall der gewünschten Komponente den className übergeben.

<div className="myItem">
  <ClassComponent name={"Class"}/>
</div>

CSS-in-JS

Eine weitere Möglichkeit wäre CSS-in-JS. Dabei wird der übliche Teil von CSS direkt innerhalb von JavaScript geschrieben. Dadurch ist es natürlich möglich, dass diese Komponente immer genau dasselbe Design hat, egal wo sie wiederverwendet wird.
Dabei ist einer der gängigsten Methoden die Verwendung von Styled Components. Dies müssen Sie jedoch zunächst über das Terminal installieren.

npm install styled-components

Anschliessend können Sie in Ihrer Komponente styled-components importieren. Anhand einer Variable können Sie das Styling vornehmen, in dem Sie bestimmen, was für ein HTML-Element es sein soll. Wiederum anhand von CSS-Attributen bestimmen Sie das eigentliche Design.

import styled from 'styled-components';

const MyButton = styled.button` 
    background-color: green;
    color: white;
`; 

Innerhalb ihrer Komponente können Sie den Button nun ganz einfach anhand des Variablennamens verwenden.

<MyButton>This is my Button! Click me!</MyButton >

Nun haben Sie die Grundlagen von React kennengelernt. Sie sind nun auf jeden Fall bereit anhand des nächsten Blog-Artikels auch noch eine ToDo-Liste zu erstellen.

Ricky Elfner – Denker, Überlebenskünstler, Gadget-Sammler. Dabei ist er immer auf der Suche nach neuen Innovationen, sowie Tech News, um immer über aktuelle Themen schreiben zu können.