Wie benutzt man das neue "rails new myapp --api" mit einem clientseitigen JavaScript-Framework?

Question

ich entschuldige mich, wenn dies eine dumme Frage, aber ich verstehe nicht, die Grundlagen der JSON in accordance with a JavaScript framework in Rails 5.0 mit:

Rails ist nicht nur eine gute Wahl, wenn Sie einen Full-Stack Anwendung erstellen möchten, der Server verwendet -Seiten-Rendering von HTML-Vorlagen, aber auch ein guter Begleiter für die neue Ernte von clientseitigen JavaScript oder native Anwendungen, die nur das Backend benötigt, um JSON zu sprechen. Wir haben gemacht dies jetzt noch deutlicher mit dem neuen -api-Modus. Wenn Sie eine neue Rails-Anwendung mit dem neuen Backend --api von rails erstellen, erhalten Sie ein abgespecktes down skeleton und eine Konfiguration, die davon ausgeht, dass Sie mit JSON und nicht HTML arbeiten werden.

React scheint von vielen bevorzugt zu sein, also möchte ich lernen, wie man es mit einem Rails-Backend verwendet. Um die Hashes zu bauen, lese ich mit Jbuilder.

Meine Haupt Verwirrung ist, wie man ein Layout ohne eine .html.erb Ansicht erstellt. Wenn ich nur zwei Dateien habe, eine .json.jbuilder, eine .js.jsx - wie rufe ich die React-Komponenten auf? Oder benötigt jede Controller-Methode drei entsprechende Ansichten? Oder verpasse ich gerade den Punkt --api ganz?

Answer 1

Ihre .json.jbuilder Dateien werden zum Formatieren der Antwort vom Server verwendet. In einer API-Anwendung erfüllen sie genau denselben Zweck wie die Ansichten in einer Standard-MVC-Anwendung - sie stellen Daten offen. Im Fall von API-Apps sind die Daten im JSON-Format und können über den Endpunkt abgerufen werden.

Mit API-Apps haben Sie eine klare Trennung zwischen Back-End-Logik und Front-End-Logik. Sie sind zwei separate Apps, die über eine Schnittstelle verfügen, über die sie kommunizieren. Sie benötigen keine React-App oder eine andere Front-End-App, um die Daten zu sehen. Sie können mit einem Tool wie Postman auf einen Endpunkt zugreifen, um zu sehen, was jeder Endpunkt in Ihrer Rails-App zurückgibt.

Reagieren Sie, wenn Sie eine Schnittstelle erstellen möchten, die die Endpunkte Ihrer API-Anwendung verwendet und die Daten anzeigt. Hier tritt React mit seinen .js.jsx Komponenten ein.

Have a look at the source code of a React-Rails app I've built. Es ist kein Standard-API-Anwendung, aber es auf der gleichen Idee gebaut ist:

Here Sie können sehen, wie die componentDidMount() Funktion ein $ HTTP-Anforderung, um die Elemente macht Endpunkt in React

React.createClass({ 
getInitialState() { 
    return { items: [] } 
}, 


componentDidMount() { 
    $.getJSON('/api/v1/items.json', (response) => { this.setState({ items: response }) }); 
}, 

Und here Sie können sehen, was der Server zu diesem Endpunkt zurückgibt.

def index 
    respond_with Item.all 
    end 

Mit einer Standard-API-Anwendung, könnte die Controller Syntax ein wenig anders, und es gäbe eine .json.jbuilder Dateien sein, die ich die Antwort formatieren lassen würden, aber die allgemeine Idee ist das gleiche.

Wenn Sie eine bessere Vorstellung von dem Konzept bekommen möchten, schauen Sie sich meine tutorial zum Thema an.