Detaillierte Schritte zum Erstellen einer React-Anwendung mit einer Rails-API

[51CTO.com Schnellübersetzung] Was sollten Sie tun, wenn beim Erstellen eines Projekts mit React keine dynamischen Daten gespeichert werden können? Zu diesem Zweck habe ich nach einer Backup-API gesucht, um dieses Problem zu lösen.

In diesem Artikel behandele ich einige der wesentlichen Aspekte zum Einrichten und Erstellen einer Rails-API mit React als Frontend, um denen zu helfen, die sich in der gleichen Situation befinden wie ich.

In diesem Artikel ist die Verwendung der Rails API als Backend und von React als Frontend vorgesehen. Personen, die diesen Artikel lernen möchten, folgen daher demselben Pfad und denselben Schritten.

Backend: Rails API-Teil

Als Voraussetzung vor dem Erstellen einer Rails-API wird empfohlen, die Datenbank mit Postgres zu konfigurieren, da es einfacher bereitzustellen ist als SQLite. Suchen und erstellen Sie dann ein neues Projekt in Ihrem Verzeichnis, indem Sie Folgendes eingeben:

Rails neu <Anwendungsname> --API --Database=postgresql 
cd ` `<Anwendungsname>

Mit dem Flag --database wählen wir unsere Datenbank-Engine aus (hier verwenden wir Postgresql) und mit --api erstellen wir eine Rails-basierte API, um das zu verwenden, was wir benötigen, und die zusätzliche Konfiguration zu überspringen, die wir nicht verwenden werden.

Öffnen Sie das Projekt mit einem Editor. Öffnen Sie dann Gemfile und fügen Sie rack-cors hinzu:

Edelstein 'rack-cors', :require => 'rack/cors'

Führen Sie dann „bundle install“ aus.

Bevor Sie Ihre neue Rails-Anwendung ausführen können, müssen Sie sie zunächst mit einer Datenbank verbinden. Im nächsten Schritt verbinden Sie Ihre neu erstellte Rails-Anwendung mit einer PostgreSQL-Datenbank, damit Sie Rezeptdaten bei Bedarf speichern und abrufen können. Dieser Schritt erfordert die Eingabe: `rails db:create`

Die Ausgabe sieht folgendermaßen aus:

Datenbank „app_name_development“ erstellt
Datenbank „app_name_test“ erstellt

Öffnen Sie ein Terminal und führen Sie die folgenden Befehle aus, um den Controller und das Modell zu erstellen:

Schienen generieren Modell Filmname Bewertung: Integer 
Schienen generieren Controller Filme Index erstellen aktualisieren zerstören 
Schienen db: migrieren

Implementieren Sie als Nächstes die leere Methode im Controller, damit die API ordnungsgemäß funktioniert:

Da wir nun einen Controller zum Verwalten unserer Modelle haben, kopieren wir einige Filme in die Datei seed.rb, um sie im Browser anzuzeigen und zu testen, ob wir die Daten in das JSON-Format konvertieren können. Kopieren Sie die folgenden Filme:

Movie.create(Name: "Titanic", Wertung: 5) 
Movie.create(Name: „Wir waren Soldaten“, Bewertung: 4) 
Movie.create(Name: „L‘amour quand elle nous tient“, Bewertung: 5) 
Movie.create(Name: „Nobody’s Fool“, Wertung: 2)

Fügen Sie anschließend diese vier Elemente in Ihr Projekt ein und führen Sie aus: rails db:seed

Jetzt können Sie mit dem Schreiben von Code beginnen. Beginnen wir mit routes.rb. Wenn Sie diese Datei öffnen, finden Sie automatisch für den Controller generierte Routen. Da wir unsere eigenen Routen für die API definieren werden, werden wir sie entfernen, um die neuen Routen/API zu definieren:

Rails.application.routes.draw macht 
Ressourcen: Filme 
Ende

Um Ihre Anwendung anzuzeigen, öffnen Sie ein Browserfenster und navigieren Sie zu http://localhost:3000. Sie sehen die Standard-Willkommensseite von Rails. Aber nach dem Hinzufügen der Route bedeutet dies, dass http://localhost:3000/movies alle Filme abruft, die wir in der Datenbank haben. Sie können auch eine beliebige JSON-Viewer-Erweiterung in Ihrem Browser installieren, um die formatierten Daten anzuzeigen.

Front-End: React-Teil

Da wir nun über eine grundlegende API verfügen, verwenden wir diese, um eine Front-End-React-Anwendung einzurichten:

npx create_react-app

„Create React App“ ist ein Projekt von Facebook, das Ihnen einen schnellen und ohne Konfiguration erfolgenden Einstieg in React-Anwendungen ermöglicht.

Stellen Sie zunächst sicher, dass Sie Node.js und npm installiert haben. Stellen Sie dann sicher, dass Sie sich außerhalb des Rails-Verzeichnisses befinden, und führen Sie den folgenden Befehl aus, um die React-App zu erstellen:

npx erstellen-reagieren-app my_react

Dadurch wird eine React-Anwendung erstellt, die mit unserer API kommuniziert. Sobald Sie cd my_react im Verzeichnis eingeben und npm start ausführen, wird es unter http://localhost:3000 geöffnet.

React-Komponenten

Einer der Hauptvorteile von React ist das Komponentenkonzept. Daher erstellen wir die Komponenten, die wir benötigen, und löschen die Komponenten, die wir nicht benötigen, wie unten gezeigt.

Im Quellverzeichnis erstellen wir einen neuen Ordner **components** und platzieren dort die Dateien, die wir anzeigen möchten.

Erstellen wir unsere erste Komponente. Erstellen wir eine neue Datei in todo- app/src/components/Movie.js:

importiere React, {Komponente} von „react“; 
Klasse Song erweitert Komponente { 
rendern() { 
zurückkehren ( 
<div> 
<h1>Filme</h1> 
</div> 
); 
} 
} 
Standard-Song exportieren;

Dies ist unsere Komponente. Als nächstes importieren wir es in unsere Anwendungsdatei, damit wir es im Browser anzeigen können.

importiere './App.css'; 
Song aus „./components/Song“ importieren; 
Funktion App() { 
zurückkehren ( 
<div Klassenname="App"> 
<Lied /> 
</div> 
); 
} 
Standard-App exportieren;

API-Daten mit Axios abrufen

Es ist Zeit, Daten aus dem Backend zu laden. Sie können jedes Paket zum Abrufen/Speichern von Daten verwenden. Dieses Mal verwenden wir Axios.

Installieren Sie Axios und importieren Sie es in die Movie-Komponente.

npm installiere axios --save

Initialisieren Sie zunächst den Status im Konstruktor in ein leeres Array:

Konstruktor(Requisiten) { 
super(Requisiten) 
dieser.Zustand = { 
Filme: [] 
} 
}

Da wir den Status in unserer Komponente bereits initialisiert haben, implementieren wir nun die Methode componentDidMount(), um unsere Daten aus der API zu laden:

componentDidMount() { 
axios.get('http://localhost:3000/movies') 
.dann(Antwort => { 
console.log(Antwort) 
dies.setState({Filme: response.data}) 
}) 
.catch(Fehler => console.log(Fehler)) 
} 
 
Axios von „Axios“ importieren

Denken Sie daran, Axios zu importieren:

Axios von „Axios“ importieren

An diesem Punkt werden Sie von CORS blockiert und können nicht auf Ihre Daten zugreifen. Um dies zu vermeiden, müssen Sie die API in config/appcation.rb verwenden:

config.middleware.insert_before 0, Rack::Cors machen 
erlauben 
Ursprünge 'http://localhost:3000' Ressource '*', :headers => :any, :methods => [:get, :post, :put, :delete, :options] 
Ende 
Ende

Da wir nun wissen, dass wir Ideen aus der API erhalten können, verwenden wir sie in unseren React-Komponenten. Wir können die Renderfunktion so ändern, dass sie die Listenideen aus dem Status durchläuft und jede davon anzeigt:

Da wir nun wissen, dass wir Ideen aus der API erhalten können, verwenden wir sie in unseren React-Komponenten. Wir können die Renderfunktion so ändern, dass sie die Listenideen aus dem Status durchläuft und jede davon anzeigt:

rendern() { 
zurückkehren ( 
<div> 
 
{this.state.movies.map((Film) => { 
 
zurückkehren( 
 
<div Klassenname="Kachel" Schlüssel={Film.id} > 
 
<h2>{Filmname}:<span>{Filmbewertung}</span></h2> 
 
</div> 
) 
})} 
</div> 
); 
}

Jetzt können wir unsere Daten im Browser sehen.

Dies ist das Ende dieses Artikels über die Verwendung der Rails API zum Erstellen einer React-Anwendung. Weitere Informationen zur Verwendung der Rails API zum Erstellen von React-Anwendungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!