Kategorie: React Beispiele

Posted on

React Library Beispiel mit mehreren Components

Im vorherigen Beispiel wurde die Grundstruktur von React erklärt. Hier nun ein Beispiel, in dem mehrere Components gerendert werden.

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>App Layout Demo</title>
</head>

<body>
  <div id="root"></div>
  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/babel-standalone"></script>

  <script src="Hello.js" type="text/jsx"></script>
  <script src="NumPicker.js" type="text/jsx"></script>
  <script src="index.js" type="text/jsx"></script>

</body>

</html>

Hello.js

class Hello extends React.Component {
  render() {
    return <h1>Hello There!!!</h1>
  }
}

NumPicker.js

function getNum() {
  return Math.floor(Math.random() * 10) + 1;
}
class NumPicker extends React.Component {
  render() {
    const num = getNum();
    let msg;
    if (num === 7) {
      msg = <h2>CONGRATS YOU WIN!</h2>
    } else {
      msg = <p>Sorry, you lose!</p>
    }
    return (
      <div>
        <h1>Your number is: {num} </h1>
        {msg}
      </div>
    );
  }
}

index.js

class App extends React.Component {
  render() {
    return (
      <div>
        <Hello />
        <NumPicker />
      </div>
    )
  }
}

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

Gestartet wird alles zusammen über die letzte Zeile in der index.js

Hier wird die Component <App /> in das Element mit der ID „root“ gerendert.

Die Component <App /> beinhaltet aber sowohl die <Hello /> als auch die <NumPicker /> Component. Diese müssen vorher definiert sein bevor das rendern der Components durchgeführt werden kann. Daher die Reihenfolge der JS Dateien in der index.html

Damit erhalten wir folgenden Output:

Bzw. bei der Zahl 7

Posted on

Simples React Library Beispiel

React kann über ein paar JS Dateien von CDNs relativ einfach lokal ohne eine lokal laufende Node.js Instanz laufen.

Dateien

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>First Component</title>
</head>
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/babel-standalone"></script>
  <script src="index.js" type="text/jsx"></script>
</body>
</html>

Wie hier zu sehen beinhaltet die index.html nicht sehr viele aufregende Elemente:

  • Der <head> beinhaltet nur standard HTML5 Meta-Tags und den Title der Seite, nichts React spezifisches.
  • Direkt nach dem <body> sehen wir unser „root“ Element über den wir unsere React-App aufbauen werden.
  • Vor dem </body> sehen wir einige JS Dateien die extern und eine Datei die lokal eingebunden wird:
    • react.development.js: Basis React-Library
    • react-dom.development.js: React-DOM Erweiterung um mit dem DOM interagieren zu können
    • babel-standalone: Babel ist für die JSX und damit die Javascript-Umwandlung verantwortlich
    • index.js: unsere React-App

index.js

class Hello extends React.Component {
	render() {
		return (
			<div>
				<h1>Hello there!</h1>
				<p>I am a React Component!</p>
			</div>
		);
	}
}

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

Hier definieren wir eine Component mit dem Namen „Hello„.
D.h. sie kann über „<Hello />“ gerenderd werden.
In dieser Component beinhaltet sich nur eine render() Funktion, die definiert, was beim rendern dieser Component an DOM ausgegeben wird.

Am Ende wird lediglich definiert, dass die Componente „<Hello />“ in das Element mit der ID „root“ gerendered wird.

Dadurch erhalten wir beim Aufruf der index.html folgenden Output

Wichtig hierbei ist, dass die index.html wirklich über einen Web-Server aufgerufen wird da wegen CORS Einschränkungen das lokale einbinden von weiteren JS-Dateien nicht erlaubt ist.

Alternativ kann natürlich der JS React Code direkt in die index.html geschrieben werden, jedoch wird dies bei größeren und komplexeren Projekten mit mehreren Components nicht wartbar. Tipp hier von mir wäre z.B. der „Live Server“ vom Visual Studio Code Editor.