Hallo JavaScripter! Ich habe in letzter Zeit viel über React gelernt. Es macht sehr viel Spaß. Es fühlt sich an wie eine großartige Möglichkeit, JavaScript zu schreiben. Es scheint mir fast das gleiche Gefühl zu haben wie jQuery in den frühen Tagen.
Aber eine Beichte vorweg: Ich bin kein Meister darin. Ich zeige euch, wie man etwas in React macht, ohne ein zertifizierter SuperReactPro® zu sein. Aber es funktioniert, also läuft etwas richtig.
Heutzutage würde man wahrscheinlich Funktionskomponenten in React verwenden und einen Hook zum Abrufen der Daten nutzen, was die moderne Art ist, einen „Seiteneffekt“ einer Komponente zu handhaben, und eine moderne Verbesserung gegenüber Lifecycle-Methoden darstellt. Dieser Artikel ist also in diesem Sinne alt. Konzeptionell macht er aber immer noch Sinn. Ich werde ihn an einigen Stellen mit moderneren Dingen aktualisieren, wo ich kann.
State, State, State
Eines der ersten Dinge, die man bei der Arbeit mit React lernt, ist State. Er ist ziemlich grundlegend für React. Er ist im Wesentlichen ein Datenbestand, und er kann alles Mögliche sein!
Stellen Sie sich den Kommentarbereich einer Website vor. Ein Teil des „States“ könnte sein:
- Ist das Kommentarformular sichtbar oder nicht?
- Ist der „Kommentar absenden“-Button deaktiviert oder nicht?
- Der aktuelle Wert des Textbereichs, damit er im Kommentarvorschau-Bereich verwendet werden kann
Aber der State ist auch
- Alle vorhandenen Kommentare!
Das ergibt Sinn, denke ich. Kommentare sind Teil verschiedener Artikel – sie sind auf jeder Seite anders. Sie sind Teil der Daten dieser Seite. Sie sind State.
// Just the state part of creating a React component
var Comments = React.createClass({
getInitialState: function() {
return {
commentForm: {
visible: true,
submitVisible: false
}
comments: {
unique-id-1: {
name: "Chris Coyier",
comment: "Lorem ipsum..."
},
unique-id-2: {
name: "Sammy Sanddollar",
comment: "Lorem ipsum..."
}
}
}
}
});Der Aufbau eines Mock-„Kommentarformulars“ ist genau eine der Übungen, die ich verwendet habe, um React zu lernen. Ich habe ein Video von mir, wie ich mit Sarah Drasner zusammenarbeite, um das zu tun, das Sie sich ansehen können.
Diese Daten abrufen
Im Falle von Kommentaren haben Sie diese Daten wahrscheinlich in Ihrer eigenen App.
Aber Daten müssen nicht von Ihnen selbst kommen, Daten können von überallher kommen. Externe Daten, wenn Sie so wollen. Wie von einer API.
Ajax
Da wir hier ausschließlich im Frontend arbeiten, fällt das Abrufen von Daten aus einer API in das Ajax-Territorium. Ich weiß nicht, wie es Ihnen geht, aber ich stelle mir Ajax so vor:
// jQuery!
$.ajax {
url: "https://api.com/whatever"
}.then(function(data) {
});Aber wie ich gerade in einem aktuellen Artikel gelernt habe, sind jQuery und React nicht gerade beste Freunde. jQuery ist hauptsächlich eine Bibliothek zur DOM-Manipulation, und React hat seine eigenen Wege, diese Dinge zu tun. Die Ajax-Funktionalität, die jQuery bietet, ist praktisch, aber mit anderen, stärker fokussierten Bibliotheken nachbildbar.
Axios ist eine solche Bibliothek mit einer identischen API.
Beispieldaten
Verwenden wir einige einfache, öffentlich verfügbare JSON-Daten
Es handelt sich einfach um einen Datenblock, der alle Stellenangebote auf der CodePen Job Board beschreibt.
Daten abrufen
In Axios, das Abrufen dieser Daten ist wie
axios
.get("https://codepen.io/jobs.json")
.then(function(result) {
// we got it!
});Mit einem React Hook würden wir es so machen...
import React, { useState, useEffect } from 'react';
import axios from 'axios';
function App() {
const [data, setData] = useState({ jobs: [] });
useEffect(async () => {
const result = await axios(
'https://codepen.io/jobs.json',
);
setData(result.data);
});
return (
<p>Loop over jobs data here and show results.</p>
);
}
export default App;State mit externen Daten setzen
Jetzt, da wir die Daten haben, machen wir sie unserer App verfügbar, indem wir den State in React setzen. Das result ist der JSON-Block. Der Hauptteil davon ist ein Array von Jobs, genau das, was unser Datenaufbau erwartet. Wir verwenden setState
var App = React.createClass({
getInitialState: function() {
return {
jobs: []
}
},
componentDidMount: function() {
var _this = this;
this.serverRequest =
axios
.get("http://codepen.io/jobs.json")
.then(function(result) {
_this.setState({
jobs: result.data.jobs
});
})
},
componentWillUnmount: function() {
this.serverRequest.abort();
},
render: function() {
return (
<div>
{/* Render stuff here */}
</div>
)
}
});Hier gibt es ein wenig Fehlerbehandlung. Wenn die Ajax-Anfrage noch läuft, wenn React (oder Sie) beschließt, eine Komponente zu entfernen, wird die Ajax-Anfrage abgebrochen.
Stellen Sie außerdem sicher, dass Sie die Komponente rendern!
React.render(<App />, document.querySelector("#root"));Templating der Daten
Sie benötigen keine zusätzlichen Bibliotheken für das Templating in React. HTML-Templating ist ein ziemlich grundlegender Teil von React, besonders wenn Sie in JSX schreiben (das Zeug, das wie HTML in JavaScript aussieht), was sehr empfehlenswert ist.
Wenn wir HTML ganz allein schreiben würden, um einen einzelnen Job darzustellen, wäre es so:
<div class="job">
<a href="http://link-to-job.com">
Company
is looking for a
Full Time
Web Designer
</a>
</div>Ich denke gerne auf diese Weise: Überlegen Sie sich das HTML, das Sie wollen, und verschieben Sie dann dieses HTML in JSX und ersetzen Sie die dynamischen Teile durch State.
Das wird zu
var App = React.createClass({
getInitialState: function() {
// ...
},
componentDidMount: function() {
// ...
},
componentWillUnmount: function() {
// ...
},
render: function() {
return (
<div>
<h1>Jobs!</h1>
{this.state.jobs.map(function(job) {
return (
<div key={job.id} className="job">
{job.company_name}
is looking for a
{job.term}
{job.title}
</div>
);
})}
</div>
)
}
});Demo
Mit all dem zusammen haben wir eine schöne kleine React-Komponente, die sich selbst mit externen Daten rendert!
Siehe den Pen
Laden externer Daten in React von Chris Coyier (@chriscoyier)
auf CodePen.
Dies fügt sich gut in all die React-Themen ein, die mir im Kopf herumschwirren, wie unsere neueste Serie, das neueste Video und die jüngste Diskussion über Headless CMSs.