wd2-react

Übung für Klausur: Einkaufsliste mit React aus Class Components.

Aufgabe

Erstellen Sie eine Einkaufsliste mit React. Hierbei sollen Class Components verwendet werden. Die Lösung der Aufgabe finden Sie in diesem Repository.

Die Liste soll im State gespeichert werden. Die Elemente der Liste sollen gemappt und an eine Komponente Artikel zusammen mit den Props name und menge übergeben werden.

this.state.liste.map((element) => <Artikel key={element.id} name={element.name} menge={element.menge}>)

Zum Styling soll Bootstrap eingesetzt werden.

Durchführung

Vorlage

React-App aus Template erstellen
```
npx create-react-app <app-name>
```

unnötige Datein in /src entfernen: App.test.js, setupTest.js

src/
├── App.css
├── App.js
├── index.css
├── index.js
├── logo.svg
└── reportWebVitals.js

Bootstrap in /public/index.html einbinden:

<html lang="de">
   <head>
      ...
      <title>Einkaufsliste</title>
      <link
         href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
         rel="stylesheet"
         integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD"
         crossorigin="anonymous"
      />
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div id="root"></div>
      <script
         src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
         integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN"
         crossorigin="anonymous"
      ></script>
   </body>
</html>

App.js in Class Component konvertieren:

import React from "react";
import "./App.css";

export default class App extends React.Component {
   render() {
      return <div>App</div>;
   }
}

Umsetzung

State in App.js festlegen:

constructor(props) {
   super(props);
   this.state = {
      liste: [],
      eingabe: {name: "", menge: ""}
   }
}

Formular zum Hinzufügen eines Artikels:

<form className="d-flex gap-2" onSubmit={this.addItem.bind(this)}>
   <input
      type="text"
      name="name"
      placeholder="Name"
      value={this.state.eingabe.name}
      onChange={this.setInput.bind(this)}
   />
   <input
      type="number"
      name="menge"
      placeholder="Menge"
      value={this.state.eingabe.menge}
      onChange={this.setInput.bind(this)}
   />
   <button
      className="bg-success border border-success text-white"
      type="submit"
      title="hinzufügen"
   >
      +
   </button>
</form>

addItem(e) {
   e.preventDefault();

   const newItem = {
      ...this.state.eingabe,    // name: this.state.eingabe.name, menge: this.state.eingabe.menge
      id: this.state.liste.length + 1,
   };

   this.setState({
      liste: [...this.state.liste, newItem],
   });
}

setInput(e) {
   const { name, value } = e.target;
   this.setState({
      eingabe: {
         ...this.state.eingabe,
         [name]: value,
      },
   });
}

Komponente Artikel in /src/Artikel.jsx implementieren:

import React from "react";

export default class Artikel extends React.Component {
   render() {
      return (
         <li>
            {this.props.name} ({this.props.menge})
         </li>
      );
   }
}

Liste mit map() ausgeben:

<ul>
   {this.state.liste.map((element) => (
      <Artikel key={element.id} name={element.name} menge={element.menge} />
   ))}
</ul>

(key wird benötigt, um Elemente in Maps identifizieren zu können; für uns nicht relevant)

riedadr / wd2-react Goto Github PK

wd2-react's Introduction

wd2-react

Aufgabe

Durchführung

Vorlage

Umsetzung

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent