React Quickstart

Lesezeit: 3 Minuten

Aktuell wird React gerne genutzt, um Web-Apps zu entwickeln. Für Einsteiger gibt es die Create React App, die alles enthält, was du zum Arbeiten mit React benötigst.

Create React App installieren

Zur globalen Installation gibst du im Terminal folgenden Zeile ein (Sollte das nicht funktionieren, benötigst du vorher noch npm):

npm install -g create-react-app

Nun kannst du in ein beliebiges Verzeichnis navigieren und dort

create-react-app test

ausführen, um eine funktionsfähige App zu erhalten. Nach dem Ausführen gibt es einen Ordner „test“. Navigiere mit der Kommandozeile in diesen Ordner und führe

npm start

aus. Es wird nun ein lokaler Server gestartet und in deinem Browser sollte sich automatisch die App unter der URL http://localhost:3000/ öffnen:

create-react-app-startseite
Die Startseite von create-react-app Bild Vergrößern

Ordnerstruktur

Der neue Ordner mit dem Titel test enthält nun folgenden Struktur:

|_ node_modulse
|_ package-lock.json
|_ package.json
|_ public
   |_ index.html
|_ README.md
|_ src
   |_ Index.js
   |_ Index.css
   |_ App.js
   |_ App.css

Was dir hier zunächst bekannt vorkommen dürfte, ist die index.html. Sie enthält wie bei einer gewöhnlichen Websites den Rumpf, bestehend aus html, head und body. Auf dieser Seite ist also Platz für eine Metadescription, den Einbau von Google Analytics etc.

Die React App wird erst innerhalb des Divs root platziert – es gibt also die Möglichkeit, noch HTML davor oder dahinter einzufügen.

  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>

Damit in der index.html auch wirklich die App ausgespielt wird, muss das div root allerdings auch angesteuert werden. Dies passiert aus index.js heraus mit Hilfe von document.getElementById(‚root‘)):

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

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

Die Datei app.js enthält dann den eigentlichen Code oder verweist auf weitere Elemente, die sogenannten Components.

Components

Components sind kleine, in sich jeweils funktionierende Bestandteile, die zusammen die App bilden. Jedes Component sollte dabei eine einzige Funktion übernehmen. Gibt es auf deiner Website beispielsweise eine Box mit einer einfachen Newsletteranmeldung, wäre das eine Komponente. Im Beitrag Break the UI into a component hierarchy beschreiben die React-Entwickler außerdem ganz ausführlich, wie man solche Components festlegen kann.

Ich erstelle nun zwei neue Components und binde diese in app.js ein. Dazu erstelle ich zunächst einen neuen, gleichnamigen Ordner mit zwei Javascript-Dateien, wie im Folgenden markiert:

|_ node_modulse
|_ package-lock.json
|_ package.json
|_ public
   |_ index.html
|_ README.md
|_ src
   |_ Index.js
   |_ Index.css
   |_ App.js
   |_ App.css
   |_ components
      |_ List.js
      |_ Map.js

Die Components enthalten zunächst nur ein Div mit Text:

List.js

import React, { Component } from 'react';

class List extends Component {

	render() {
		return (
			<div className="list">
        Hier wird eine Liste eingebunden
      </div>
		);
	}
}

export default List

Map.js

import React, { Component } from 'react';

class Map extends Component {

	render() {
		return (
			<div className="map">
        Hier wird die Karte eingebunden
      </div>
		);
	}
}

export default Map

Die app.js als die Datei, in der die beiden Komponenten eingebunden sind, enthält nun zuerst einen Verweis auf die Dateien in Zeile 3 und 4. Dann werden diese ganz einfach über die Tags List/Map eingebunden:

import React, { Component } from 'react';

import List from './components/List'
import Map from './components/Map'

class App extends Component {
  render() {
    return (
      <div className="App">
        <List />
        <Map />
      </div>
    );
  }
}

export default App;

Daten mit Props ausgeben

Daten können strukturiert innerhalb eines Components ausgegeben werden. In diesem Beispiel ist der Array mit Personen im Component selbst enthalten. Er wird vor der Return-Function platziert. Anschließend kann wie von Javascript bekannt auf die Elemente des Arrays zugegriffen werden. Die Werte stehen in diesem Fall in geschwungenen Klammern.

import React, { Component } from 'react';
class PersonList extends Component {

  render() {
        const persons = [
            {
                name: 'Yoko Ono',
                favoriteColor: 'black', 
                age: 18
            },
            {
                name: 'Hiro Yamaguchi,
                favoriteColor: 'blue', 
                age: 49
            },
            {
                name: 'Keiko Abe',
                favoriteColor: 'yellow', 
                age: 35
            }
        ];
      
    return (
          <div className="list-persons">
                <ol className="books-grid">
                {persons.map(person => (
                    <li key={person.name}>
                         <div className="allpersons">
                             {person.name}, ({person.age}<br />
                             Favorite Color: {person.favoriteColor}
                         </div>
                    </li>
                ))}
                </ol>
          </div>
        );
  }
}

export default PersonList
Profilbild
Autorin: Friederike

Hallo, ich bin Friederike. Ich entwickle Websites und schreibe auf krempin.it darüber. Außerdem mag ich Japanische Literatur und Retro-Videospiele.