Der Arbeitgeber lehnt die meisten Lebensläufe einfach ab, indem er sie diagonal ausführt. Das ist ein wenig entmutigend, oder? Daher ist es sehr wichtig, dass er sofort das Wissen und die Fähigkeiten sieht, die er von Ihnen benötigt. Jetzt ist ein guter Zeitpunkt für ein Upgrade, insbesondere wenn Sie in Ihrem Lebenslauf nichts zu prahlen haben. Sie müssen nicht zur Universität gehen, um neue Fähigkeiten zu erlernen: Sie müssen nur in die richtige Richtung gehen und nicht davon abweichen.
Wenn Sie beispielsweise wissen, wie man in ReactJS vorgeht, können Sie so zu einem gefragteren Spezialisten werden. Wenn Sie ein Webentwickler für Anfänger sind und bereits JavaScript und HTML kennen, ist ReactJS der nächste Schritt.
In diesem Artikel werde ich meine Liste der Tools und Bibliotheken teilen, die es wert sind, gelernt zu werden, um ein guter JavaScript-Entwickler zu werden und React zu verwenden.
Was ist Reagieren und warum lohnt es sich zu lernen?
React ist eine js-Bibliothek für die Entwicklung von Benutzeroberflächen, die Facebook im Mai 2013 eingeführt hat (und weiterhin unterstützt). Sie können damit dynamische Benutzeroberflächen in JavaScript erstellen.
Da React eine der leistungsstärksten js-Bibliotheken ist, können Sie viele gute Dinge tun, indem Sie sie lernen. React wird von den Entwicklern Amazon, PayPal, BBC, CNN und vielen anderen Technologiegiganten verwendet. Darüber hinaus ist die Bibliothek flexibel genug, um alle Anforderungen zu erfüllen. Es kann in Verbindung mit Ihrem bevorzugten Tech-Stack verwendet werden. Mit React können Daten-Dashboards, Messaging-Apps, Social-Networking-Apps, einseitige Web-Apps und persönliche Blogs erstellt werden.
Lernreaktionen bei der Arbeit an realen Projekten helfen Ihnen nicht nur, schnell zu lernen, sondern bieten Ihnen auch die Möglichkeit, potenziellen Arbeitgebern zu präsentieren.
1.npm
Es ist klar, dass dieses Tool für niemanden eine Offenbarung sein wird. Ich konnte ihn einfach nicht ignorieren.
Um mit JavaScript (einschließlich der React-Bibliothek) arbeiten zu können, müssen Sie den Node-Paketmanager ( npm ) installieren . Wie der Paketmanager, der mit Ihrer Linux-Distribution (oder Chocolatey für Windows oder Homebrew für MacOS) geliefert wird, bietet npm Befehle zum Abfragen des Software-Repositorys und zum Installieren der erforderlichen Pakete, einschließlich der ReactJS-Komponenten.
Sie können Node.js (und damit auch npm) aus dem Repository Ihrer Linux-Distribution installieren.
Gehen Sie unter Fedora oder Red Hat Enterprise Linux wie folgt vor:
$ sudo dnf install nodejsUnter Ubuntu oder Debian etwas anders:
$ sudo apt install nodejs npmWenn das Repository Ihrer Distribution npm nicht enthält, besuchen Sie Nodejs.org , um zu erfahren, wie Sie in diesem Fall Node.js und npm installieren.
2. Schnellstart
Create React App ist ein Vorlagenprojekt zum schnellen Erstellen von React-Anwendungen. Das Einrichten eines Arbeitsprojekts in React war früher eine mühsame Aufgabe. Mit diesem Tool können Sie jedoch in Sekundenschnelle eine Frontend-Build-Pipeline, eine Projektstruktur, eine Umgebung und eine Anwendungsoptimierung für die Nullkonfiguration einrichten. Sie können dies mit einem Befehl tun. Wenn Sie eine komplexere Konfiguration benötigen, können Sie außerdem die Create React App "extrahieren" und ihre Konfigurationsdateien direkt bearbeiten.
Die Create React App wird Open Source unter der MIT-Lizenz verteilt. Der Quellcode befindet sich im GitHub- Repository .
Installation:
npm start
npm init react-app my-appWenn Sie die Create React App nicht verwenden möchten, können Sie auf React Boilerplate und React Slingshot blicken . Beide sind Open Source unter der MIT-Lizenz.
3. Reagieren Sie auf das Sehen
React Sight ist ein beliebtes Visualisierungstool, mit dem Sie Ihre Anwendung als hierarchischen Komponentenbaum (z. B. als Flussdiagramm) darstellen können. Es kann als Chrome-Erweiterung verbunden werden (Sie benötigen weiterhin React Devtools, um Informationen zu Ihrer Anwendung anzuzeigen). Über die Benutzeroberfläche können Sie Filter hinzufügen, um sich auf die Komponenten zu konzentrieren, mit denen Sie am meisten interagieren müssen. Wenn Sie den Mauszeiger über die Knoten bewegen, werden Informationen zum aktuellen Status und zu den Requisiten der Komponente angezeigt. React Sight ist sehr nützlich zum Debuggen großer und komplexer Projekte.
React Sight wird unter der MIT-Lizenz veröffentlicht und Sie können auf den Quellcode im GitHub- Repository zugreifen . Sie können den Chrome Web Store verwenden, um ihn zu installieren .
4. Reagiere Belle
React Belle ist eine benutzerdefinierte React-Bibliothek mit wiederverwendbaren Komponenten: Umschalten, Bewertung, DatePicker, Schaltfläche, Karte, Auswählen und mehr. Es wurde entwickelt, um eine komfortable Benutzererfahrung zu bieten. Komponenten sind für Mobilgeräte und Desktops optimiert. Sie sind hochgradig anpassbar und unterstützen Barrierefreiheitsstandards für Menschen mit Behinderungen ( WAI-ARIA ). Die Bibliothek unterstützt verschiedene Themen wie Belle und Bootstrap.
Belle wird unter der MIT-Lizenz veröffentlicht und Sie können auf seinen Quellcode im GitHub- Repository zugreifen .
Installation:
npm install belle5. Immergrün
Evergreen basiert auf einem React UI-Grundelement und ist ein UI-Framework mit hochwertigen Komponenten, mit denen Sie Ihr Projekt erstellen können. Entwickler lieben dieses Tool wegen seines einfachen Komponentenimports.
Evergreen wird unter der MIT-Lizenz veröffentlicht und Sie können auf seinen Quellcode im GitHub- Repository zugreifen .
Installation:
npm install --save evergreen-ui6. Bit
Bit ist eine Online-Plattform und ein Befehlszeilentool zum Veröffentlichen und Freigeben von React-Apps. Dies ist eine der besten Optionen, wenn Sie Komponenten erstellen und freigeben. Der Marktplatz ist ein Ort, an dem Benutzer ihre React-Apps veröffentlichen und nach den benötigten Komponenten suchen können. Sie müssen das Rad also nicht jedes Mal neu erfinden, wenn Sie eine neue React-App oder -Komponente benötigen.
Also Bit:
- bietet Code-Wiederverwendung;
- erhöht die Effizienz von Design und Entwicklung;
- behält die Konsistenz von UI und UX bei;
- erhöht die Stabilität des Projekts.
Bit wird unter der Apache 2.0-Lizenz veröffentlicht und Sie können auf den Quellcode im GitHub- Repository zugreifen .
Installation:
$ npm install bit-bin --global7. Märchenbuch
Storybook ist ein Tool zur schnellen Entwicklung von UI-Komponenten. Sie können eine Bibliothek mit Komponenten anzeigen und deren Status verfolgen. Mit StoryBook können Sie Komponenten getrennt von Ihrer Anwendung entwickeln, um die Wiederverwendung und das Testen von UI-Komponenten zu vereinfachen.
Darüber hinaus bietet die Storybook-API viele Funktionen und erleichtert die Anpassung. Unternehmen wie Coursera, Squarespace und Lonely Planet verwenden dieses Tool.
Das Storybook wird unter der MIT-Lizenz veröffentlicht und Sie können auf seinen Quellcode im GitHub- Repository zugreifen .
Installieren Sie zuerst Storybook mit den folgenden Befehlen:
$ cd my-react-app
$ npx -p @storybook/cli sb initFühren Sie als Nächstes den Befehl run aus:
$ npm run storybook8. Formik
Mit Formik können Sie Formulare beim Debuggen, Testen und Analysieren erstellen und validieren. Sie können damit dynamische Formulare erstellen, sodass Sie den Status und die Requisiten der Komponenten nicht manuell ändern oder aktualisieren müssen. Dies macht die Entwicklung schneller und angenehmer.
Formik wird unter der MIT-Lizenz veröffentlicht und Sie können auf den Quellcode im GitHub- Repository zugreifen .
Installation:
$ npm install formik --save9. Immer
Immer ist eine js-Bibliothek, mit der Sie die Unveränderlichkeit beibehalten und gleichzeitig die Komplexität der Projektstruktur erhöhen können. Genauer gesagt macht es die Bibliothek einfach, Ihren Code unveränderlich zu halten.
Einige der Hauptmerkmale von Immer sind:
- Immer ist stark typisiert: Dies ist nützlich, wenn Ihr Statusobjekt vom Typ ist.
- Immer verkleinert Boilerplate: Bei den meisten State-Management-Tools müssen Sie viel Boilerplate-Code schreiben. Mit Immer können Sie weniger Code schreiben.
- Immer ermöglicht die Verwendung von JS-Datenstrukturen: Sie können unveränderliche Zustände in Immer mithilfe grundlegender JS-Datenstrukturen erstellen.
Immer wird unter der MIT-Lizenz veröffentlicht und Sie können auf den Quellcode im GitHub- Repository zugreifen .
Installation:
$ npm install immer10. Reagiere auf Proto
React Proto ist ein App-Prototyping-Tool für Entwickler und Designer. Es hilft Ihnen bei der Planung Ihrer Projektstruktur, damit Sie Entscheidungen im Voraus treffen können. Daher verschwenden Sie keine Zeit damit, während der Entwicklung Änderungen vorzunehmen. Dieses Tool ist besonders hilfreich für Personen, die Design dem Codieren vorziehen: Sie können beispielsweise Elemente ziehen und ablegen, anstatt dafür Code zu schreiben. Mit dem Tool können Sie alle ausgewählten Komponenten markieren und ihnen Namen, Eigenschaften und Hierarchien geben.
React Proto wird unter der MIT-Lizenz veröffentlicht und Sie können auf den Quellcode im GitHub- Repository zugreifen .
Um es zu installieren, gabeln Sie zuerst das Repository . Installieren Sie dann die Abhängigkeiten mit:
$ npm installDann renne:
$ npm start
$ npm run devEin neuer Schritt in Ihrer Karriere
Grundsätzlich können Sie selbst viel JavaScript- und React-Material finden. Weitere Informationen zu den in diesem Artikel erwähnten Tools (und vielen anderen) finden Sie im GitHub-Repository von Awesome React .
Durch das Studium und die Implementierung dieser Tools steigern Sie die Produktivität und machen Ihren Lebenslauf für den Arbeitgeber attraktiver.
Werbung
Benötigen Sie einen Server für Ihre ReactJS-App oder einen anderen Zweck? Unsere epischen Server mit modernen und leistungsstarken AMD-Prozessoren funktionieren einwandfrei. Eine breite Palette von Konfigurationen mit Tageslohn.
