Richten Sie eine Reaktionsumgebung ein, Teil 2

Wenn Sie mit React noch nicht vertraut sind, möchten Sie verständlicherweise nur die Codierung erhalten und mit ein paar einfachen Komponenten herumspielen, um zu sehen, wie React funktioniert. Sie möchten wirklich nicht erst einen längeren Einrichtungsprozess durchlaufen.

In diesem Tutorial zeige ich Ihnen, wie Sie mit dem Reaktieren in Sekundenschnelle beginnen und den Einrichtungsprozess fast vollständig entfernen! Sie verwenden CodePen, einen Online-Code-Editor, mit dem Sie sofort mit dem Schreiben von React-Code beginnen können.

Ein nützlicher Nebeneffekt bei der Verwendung von Online-Code-Editoren ist, dass Sie Ihre Arbeit ganz einfach über eine eindeutige URL mit anderen teilen können. Alles, was Sie erstellen, kann auch von anderen Entwicklern gesucht werden, die nach reaktbasierten Beispielen suchen.

Werfen wir einen Blick auf CodePen und sehen Sie, wie einfach es ist, React einzurichten und mit dem Codieren Ihrer ersten App zu beginnen!

CodePen

Mit CodePen haben Sie Zugriff auf drei Fenster zum Bearbeiten von HTML, CSS und JavaScript sowie ein weiteres Fenster zum Rendern der Ausgabe. Sie können CodePen vollständig kostenlos nutzen und müssen sich nicht einmal für ein Konto registrieren, um Ihre Arbeit mit anderen zu teilen. Wenn Sie den Dienst jedoch regelmäßig nutzen, sollten Sie ein Konto eröffnen, um ein Profil auszufüllen und mit dem Aufbau eines Portfolios zu beginnen.

Jede neue Kreation in CodePen wird als "Stift" bezeichnet. Gehen Sie zur Homepage und klicken Sie auf die große Erstellen oben rechts auf dem Bildschirm und dann auf Neuer Stift aus dem Dropdown-Menü.

Abhängig von Ihren Standardeinstellungen befinden sich die drei Editoren entweder auf der linken / rechten Seite des Hauptfensters oder sind in einer einzigen Reihe oben angeordnet.

Das CodePen-Ausgabefenster wird bei jeder Eingabe in eines der Editorfenster automatisch aktualisiert. Dies ist optional und kann über die Stifteinstellungen deaktiviert werden.

Einstellungen konfigurieren

Bevor wir einen React-Code schreiben können, müssen wir die erforderlichen Bibliotheksskripts importieren und unseren JavaScript-Prozessor einrichten. Wir verwenden JSX in unseren React-Komponenten sowie einige Funktionen von ES6. Um sicherzustellen, dass der CodePen-JavaScript-Editor unseren Code interpretieren kann, benötigen wir ein Tool, das unseren JSX- und ES6-Code auf den Standard bringt JavaScript, das alle Browser ausführen können.

Wir verwenden Babel als JavaScript-Compiler, sodass Sie die neuesten Funktionen von JavaScript sicher verwenden können, ohne sich um die Browserkompatibilität kümmern zu müssen. Die zusätzliche Unterstützung für die JSX-Kompilierung ist ein echter Bonus, da wir nur ein Werkzeug verwenden müssen.

Um Babel in CodePen zu aktivieren, müssen Sie die Einstellungen für den Stift konfigurieren. Drücke den die Einstellungen Schaltfläche oben rechts und dann weiter JavaScript in dem Stifteinstellungen Dialogfeld, das angezeigt wird. Wir können hier auch die erforderlichen React-Bibliotheken hinzufügen.

Klicke auf das Schnell hinzufügen Dropdown und wählen Sie Reagieren von der Liste. Beachten Sie, dass React mit dem vollständigen Pfad zur angegebenen Bibliothek zum ersten Eingabefeld hinzugefügt wird. Klicken Sie zum Hinzufügen erneut auf die Dropdown-Liste DOM reagieren. Dies ist erforderlich, da wir unsere React-Komponenten für das Browser-DOM rendern.

Schließlich unter der JavaScript-Präprozessor Dropdown auswählen Babel. Ihre Stifteinstellungen Der Dialog sollte jetzt so aussehen:

Die genauen Versionen von React und React DOM-Skripts können auf Ihrem Bildschirm leicht abweichen, da CodePen von Zeit zu Zeit unweigerlich auf die neueste Version aktualisiert wird.

Klicken Schließen um zur Haupt-CodePen-Schnittstelle zurückzukehren. Beachten Sie das neben dem JS Beschriftung im JavaScript-Editor-Fenster, eine zusätzliche (Babel) Label wurde hinzugefügt, um daran zu erinnern, dass das JavaScript vor der Ausführung im Browser durch den Babel-Compiler geleitet wird.

Unsere erste Reaktion App

Fügen Sie im HTML-CodePen-Editorfenster ein einzelnes Element hinzu 

 Element. Dies dient als leerer Platzhalter, den unsere React-App zum Rendern unserer Komponente verwenden kann.

Wir müssen nicht viel HTML manuell hinzufügen, da React das Hinzufügen und Aktualisieren von DOM-Elementen für uns übernimmt. Wir werden unserem Stift auch kein CSS hinzufügen. Sie können also die Fenster neu anordnen, damit im JavaScript-Editor und im Ausgabefenster mehr Platz zur Verfügung steht.

Geben Sie im JavaScript-Editorfenster den folgenden Code ein, um unsere erste Komponente hinzuzufügen.

Klasse MyFirstComponent erweitert React.Component render () return ( 
Hallo von React!
 )

Dies ist so ziemlich die grundlegendste Version einer in React möglichen Komponente. Wir haben eine ES6-Klasse verwendet, um die Kernklasse der React-Komponente zu erweitern, die a implementiert machen() Methode und gibt ein HTML-Element zurück.

Um unsere Komponente anzuzeigen, müssen wir das aufrufen ReactDOM.render () Methode:

ReactDOM.render ( , document.querySelector ('#app'));

Das erste Argument ist die React-Komponente, die Sie rendern möchten, und das zweite gibt an, auf welches DOM-Element gerendert werden soll.

Lassen Sie uns nun ein paar weitere React-Komponenten erstellen. Fügen Sie zunächst dieses Snippet dem HTML-Fenster hinzu:

Fügen Sie dem JavaScript-Fenster jetzt eine weitere Komponentendefinition hinzu:

Klasse MySecondComponent erweitert React.Component render () return ( 
Meine zweite Reaktionskomponente.
 )

Die zweite Komponente ist der ersten sehr ähnlich und wir geben sie an div Element mit Ich würde von app2 mit einem weiteren Anruf an ReactDOM.render ().

ReactDOM.render ( , document.querySelector ('# app2'));

Es ist jedoch nicht sehr effizient, einzelne Komponenten auf diese Weise darzustellen. Der derzeit akzeptierte Ansatz besteht darin, eine Komponente der obersten Ebene wie z , die alle anderen Komponenten in Ihrer React-App enthält. Dann brauchen Sie nur noch einen Anruf bei RenderDOM.render (), statt eines separaten Aufrufs für jede Komponente.

Lassen Sie uns also unsere sehr einfache React-App umgestalten, um diesen Ansatz der Komponenten der obersten Ebene zu nutzen.

Entfernen Sie zuerst die

Nun, was wäre, wenn wir Informationen hinzufügen wollten  und  aber wollte es nicht unbedingt in den Komponentendefinitionen angeben? Wir können dies tun, indem Informationen von übergeordneten Komponenten an untergeordnete Komponenten mit HTML-Attributen wie Syntax übergeben werden. Dies ist als Requisiten in React bekannt.

Lassen Sie uns dies demonstrieren, indem wir die Nummerierungsinformationen an unsere beiden verschachtelten Komponenten übergeben. Ändere das Definition zu sein:

Klasse App erweitert React.Component render () return ( 
 
Meine ersten Reaktionskomponenten!
   
 )

Wir haben zwei hinzugefügt Nummer Requisiten, die an jede untergeordnete Komponente weitergegeben und über ein JavaScript-Objekt verfügbar gemacht werden. Innerhalb der Komponentendefinitionen können wir über das System auf die Requisiten zugreifen Requisiten Objekt wie folgt:

Klasse MyFirstComponent erweitert React.Component render () return ( 
this.props.number: Hallo von React!
 )

Klasse MySecondComponent erweitert React.Component render () return ( 
this.props.number: Meine zweite Reaktionskomponente.
 )

Lassen Sie uns kurz zusammenfassen, wie einfach es war, mit CodePen Code zu codieren.

Zunächst haben wir einen neuen Stift geöffnet und die Einstellungen so konfiguriert, dass die Abhängigkeiten des Skripts "React" und "ReactDOM" hinzugefügt werden. Wir haben auch den JavaScript Babel-Präprozessor hinzugefügt, um unseren JSX- und ES6-Code in Standard-JavaScript zu kompilieren.

Dann war es nur ein einfacher Fall, unsere React-Komponenten zum JavaScript-Editor hinzuzufügen. Damit unsere Komponenten im Ausgabefenster angezeigt werden können, haben wir a eingefügt

Element als Befestigungspunkt für unsere React-App im HTML-Editorfenster.

Fazit

Mit CodePen können Sie innerhalb weniger Minuten eine React-Komponente auf dem Bildschirm anzeigen lassen! Es gibt jedoch einige Einschränkungen.

Die bewährten Vorgehensweisen von React für die React-Entwicklung empfehlen einen modularen Ansatz, wobei sich jede Komponente in einer separaten Datei befindet. Mit der Basisversion von CodePen ist dies nicht möglich.

Da das CodePen-Ausgabefenster in ein iframe-Element eingebettet ist, haben Sie keinen Zugriff auf die Browser-Entwickler-Tools von React. Dies ist eine wichtige Überlegung, da Ihre Apps komplexer werden.

Für Anfänger und für das schnelle Testen neuer Ideen für einfache Apps ist CodePen ein hervorragendes Werkzeug für die React-Entwicklung. Sie können es auch verwenden, um ein Online-Portfolio zu erstellen oder als eigene Mini-Bibliothek von React-Komponenten, die zum Einfügen in andere Projekte bereit sind. Es gibt viele andere Online-Code-Editoren, die CodePen ähneln, wie beispielsweise JSFiddle, JS Bin und viele andere.

Im nächsten Tutorial konzentrieren wir uns darauf, React-Apps lokal einzurichten.

Code