Zeit für mehr Reagieren! Kann nicht aufhören wird nicht aufhören! Dieses Mal werde ich eine einfache React-Kontaktmanager-Anwendung erstellen, die einen Großteil des Arbeitsablaufs von React.js abdecken sollte, von der Weitergabe von Requisiten durch die Komponentenhierarchie bis hin zur Handhabung des Zustands, Komponentenlebenszyklusmethoden, JSX usw .

Dies geschieht mit React auf eigenen und gefälschten APIs. Es ist nicht schwer, ähnliche exemplarische Vorgehensweisen zu finden, aber noch einmal mache ich dies für meine eigene Praxis in React, um diese Konzepte zu vertiefen und mit dem Framework immer vertrauter zu werden.

Wir gehen gleich darauf ein! Bevor Sie jedoch beginnen, müssen Sie eine aktuelle Version von Node.js auf Ihrem Computer installiert haben. Dies ist so einfach wie der Besuch der offiziellen Website, auf der Sie Optionen zum Herunterladen der neuesten Version auf der Startseite erhalten. Wenn Sie Probleme mit der Installation haben, gibt es Videos, um die Probleme zu lösen, die nur eine schnelle Google-Suche entfernt sind.

Lassen Sie uns den Befehl im Terminal ausführen, um die Dateistruktur zu erstellen und die Dinge zu starten:

npx create-react-app contact-app

Nun cd in das Verzeichnis der neu erstellten App. Von hier aus erstellen wir einen Komponentenordner, der die Dateien für die verschiedenen Komponenten enthält. Erstellen Sie in diesem Ordner die Dateien Header.js, ContactCard.js, ContactList.js und AddContact.js. Verschieben Sie auch App.js und App.css in diesen Ordner.

Entfernen des Logo-Imports und alles innerhalb der App-Funktionen div in App.js:

import React from 'react';
import './App.css';
function App() {
  return <div>Hello World</div>;
}
export default App;

import React from 'react';
import './App.css';
import Header from './Header';
import AddContact from './AddContact';
import ContactList from './ContactList';
function App() {
  return (
    <div>
      <Header />
      <AddContact />
      <ContactList />
    </div>
  );
}

import React from 'react'
const Header = () => {
  return (
    <div>
      <div>
        <h2>Contact Manager</h2>
      </div>
    </div>
  );
};
export default Header;

Erstellen Sie eine Klassenkomponente in AddContact.js, die das Formular zum Erstellen eines neuen Kontakts enthält:

import React from 'react'
class AddContact extends React.component {
  render() {
    return (
      <div>
        <h2>Add Contact<h2/>
        <form>
          <div>
            <label>Name</label>
            <input type="text" name="name" placeholder="Name" />
          </div>
          <div>
            <label>Email</label>
            <input type="text" name="email" placeholder="Email" />
          </div>
          <button>Add</button>
        </form>
      </div>
    );
  }
}
export default AddContact;

import React from 'react'
const ContactList = () => {
  return (
    <div>ContactList</div>
  );
}
export default ContactList;

GitHub: