16 Reagieren Sie Werkzeuge, die für Schnittstellenentwickler nützlich sind.

Published on July 03, 2018

16 Reagieren Sie Werkzeuge, die für Schnittstellenentwickler nützlich sind.



    Um Benutzeroberflächen zu erstellen, gibt es eine Vielzahl von Tools (Ihre KO, ich danke nicht). Eines der effektivsten ist React. Bei Habré ist es wahrscheinlich nicht nötig, darüber zu sprechen, was es ist und warum.

    Heute haben wir uns entschlossen, eine Auswahl an coolen Support-Elementen für Entwickler zu veröffentlichen, die React verwenden. Wahrscheinlich ist die Auswahl nicht erschöpfend, aber Sie können Werkzeuge hinzufügen. Wenn Sie etwas anderes verwenden, das nicht in der Auswahl enthalten ist, teilen Sie die Kommentare mit, und wir werden uns gemeinsam bedanken und der Auswahl coole Vorschläge hinzufügen. Achtung - es gibt einige Gifs unter dem Schnitt, die den Traffic bezahlt haben - sei vorsichtig, Jungs.

    Also stürzen wir uns mit dem Kopf in den Pool und verschieben ihn nicht für später:

    Datenblatt bearbeiten


    Ähnlich wie das Excel-Tool, das in React in Ihre Anwendungen eingebettet werden kann. Ermöglicht die Verwendung mathematischer Formeln (base - math.js). Sie können Dropdown-Menüs und Schaltflächen zu Tabellenzellen hinzufügen.

    Reaktiv für das Web


    Mit dieser Komponente können Sie Aktivitätsanzeigen, Schaltflächen, Fortschrittsbalken (Fortschrittsbalken), Schalter und vieles mehr hinzufügen.

    Reagieren


    Reactide wird als erstes spezialisiertes IDE-Tool für die Entwicklung von Anwendungen mit React beschrieben. Und wirklich - dies ist eine plattformübergreifende Desktop-Anwendung, mit der Sie Projekte ohne Serverkonfiguration schnell rendern können, was die Komplexität der Entwicklung reduziert und Zeit spart.

    Märchenbuch




    Dieses Tool ist eines der mächtigsten und berühmtesten. Mit seiner Hilfe werden Komponenten gesammelt. Entwickler bezeichnen es als eine interaktive Benutzeroberflächen-Entwicklungskomponente. Es unterstützt React, React-native, Vue und Angular. Mit dem Tool können Sie alle Komponenten des Projekts anzeigen. Inklusive - eine Vielzahl von Ergänzungen für die Entwicklung von Dokumenten, Komponenten und Tests.

    Reagieren Sie Styleguidist




    Styleguidist ist eine Umgebung zum Entwickeln von Komponenten mit einem Dev-Server (mit der Möglichkeit eines heißen Neustarts) und hervorragender Dokumentation. Das Tool bietet die Möglichkeit, Beispiele für die Verwendung verschiedener Komponenten zu sehen.

    Katalog




    Nun, hier haben wir ein Werkzeug, mit dem Sie eine freistehende Anleitung für digitale Produkte erstellen können. Dadurch können Dokumentation und Assets mit relevanten Komponenten kombiniert werden. Es sollte verwendet werden, wenn die visuellen Elemente des Systems angezeigt werden müssen.

    Studio reagieren


    Dies ist ein Entwurfstool, mit dem Sie ein Qualitätsreaktionsprojekt ohne Codierung erhalten können. Die Anwendung ist mit Sketch kompatibel, was dem Entwickler mehr Freude und Freude bereiten wird. Wenn Sie kein Programmierer sind, lohnt sich ein Blick.

    Reagiere Kosmos




    Cosmos scannt das gesamte Projekt und teilt es in Komponenten auf, sodass Sie sie in einer beliebigen Kombination aus Requisiten, Kontext und Zustand darstellen können. Dies ist notwendig, wenn das Projekt bereits läuft, Sie müssen jedoch den Komponenten neue Funktionen hinzufügen. In diesem Fall kann der Entwickler Änderungen in Echtzeit verfolgen.

    ORY-Editor


    Basierend auf dem Editor für mobile Inhalte von React und Redux. Sie kann jederzeit zur Funktionalität der entwickelten Site hinzugefügt werden. Ursprünglich wurde das Tool für eine große offene Bildungsplattform aus Deutschland erstellt. Nun, die Deutschen sind für ihre Genauigkeit bekannt, das Werkzeug war einfach großartig.

    Anblick reagieren



    Ein großartiges Visualisierungstool, mit dem Sie schnell alles einrichten können, was ein Entwickler benötigt.

    Wählen Sie Devtools erneut aus




    Und ein weiteres Visualisierungstool, mit dem Caching-Layer verfolgt werden. Keine Probleme und Sorgen - alles wird sehr übersichtlich dargestellt.

    Redux DevTools Profiler Monitor




    Ein großartiges Tool zum Starten und Stoppen des Javascript-Profils. Erstelltes Tool basierend auf Redux.

    Periskop




    Überwachen Sie Redux-Ereignisse anhand einer Zeitleiste.

    redux-Versprechen-Middleware-Zeiten


    import { createStore, applyMiddleware } from 'redux';
    import thunk from 'redux-thunk';
    import promiseMiddleware from 'redux-promise-middleware';
    import logTimes from 'redux-promise-middleware-times';
    const store = createStore(thunk, promiseMiddleware(), logTimes());


    Kleines Addon zur Redux-Versprechen-Middleware. Es zeichnet die Zeit auf, während der ein bestimmtes Ereignis ausgeführt wird.

    Monokel reagieren




    Ein leistungsstarkes Visualisierungstool, das die einzelnen Komponenten, ihren Status und den Redux-Status anzeigt und diese in einer klaren Gliederung kombiniert.

    Hygen




    Ein Code-Generator-Framework, das in fast jedem Projekt verwendet werden kann, um die Größe einer Vorlage zu reduzieren. Ein solcher Rahmen ist für diejenigen, die mit React und Redux arbeiten, ein ziemlicher Hof. Die Anzahl der Vorlagen kann hier sehr groß sein, da sie fast in jedem Arbeitsschritt erstellt werden.

    Im Allgemeinen glauben wir, dass dies keine vollständige Sammlung ist, die bei der schwierigen Arbeit der Entwickleroberfläche eine gute Hilfe sein kann. Nun, um die Arbeit noch effektiver zu gestalten, können Sie ein paar Kurse Skillbox nehmen.