React.js oder einfach React ist eine beliebte JavaScript-Bibliothek zum Erstellen von Front-End- oder grafischen Benutzeroberflächen für Online-Anwendungen. Für Full-Stack-Java-Ingenieure ist dies auch eine der wichtigsten Fähigkeiten. React JS, manchmal einfach als React bekannt, hat sich in den letzten Jahren sprunghaft weiterentwickelt und ist zum De-facto-Toolkit für die komponentenbasierte GUI-Entwicklung geworden. Es wird von Facebook unterstützt. Obwohl es alternative Frontend-Frameworks wie Angular und Vue.js gibt, sticht React hervor, da es sich nur auf die komponentenbasierte GUI-Entwicklung konzentriert und nicht in andere Bereiche abschweift. Lesen Sie weiter, um mehr über React-Entwickler zu erfahren.
Zum Beispiel ist Angular ein vollständiges Framework, das ein Dependency Injection-System, ein Routing-System, Forms-Handling, HTTP-Anforderungen, Animationen, i18n-Unterstützung und eine leistungsstarke Modulstruktur mit einfachem Lazy-Loading umfasst.
React ist eine wunderbare Option, wenn Sie bereits Bibliotheken haben, um diese Dinge auszuführen, oder wenn Sie sie nicht alle auf einmal benötigen. Das Verständnis von React ist jedoch nicht einfach, insbesondere wenn Sie neu in der Webentwicklung sind.
Schauen wir uns die RoadMap Schritt für Schritt an, um zu sehen, wie Sie die Fähigkeiten erwerben können, die Sie benötigen, um 2022 ein React-Entwickler zu werden:
1. Die Grundlagen
Sie müssen die Grundlagen unabhängig von Frameworks oder Bibliotheken kennen, die Sie für die Webprogrammierung studieren, und mit Grundlagen meine ich HTML, CSS und JavaScript, die die drei Grundlagen der Webentwicklung sind.
HTML
Da es den Rahmen für eine Webseite bereitstellt, ist es eine der Hauptsäulen und das wichtigste Talent für Webentwickler. Wenn Sie daran interessiert sind, HTML zu lernen, werfen Sie einen Blick auf meine Sammlung kostenloser HTML-Kurse.
CSS
Es ist die zweite Säule der Webentwicklung und wird verwendet, um Online-Seiten schön aussehen zu lassen. Wenn Sie CSS studieren möchten, enthält meine Liste der kostenlosen Webentwicklungskurse eine Handvoll kostenloser CSS-Kurse.
JavaScript
Dies ist die dritte Säule der Webentwicklung und ermöglicht es Ihnen, Ihre Websites interaktiv zu gestalten. Das ist auch der Grund, warum das React-Framework existiert; Daher sollten Sie mit JavaScript vertraut sein und es gut verstehen, bevor Sie versuchen, React JS zu beherrschen. Werfen Sie einen Blick auf meine Auswahl an kostenlosen JavaScript-Kursen, um loszulegen.
2. Entwicklungsfähigkeiten im Allgemeinen
Ob Sie ein Frontend-Entwickler, ein Backend-Entwickler oder ein Full-Stack-Softwareentwickler sind, spielt keine Rolle. Um es in der Programmierbranche zu schaffen, müssen Sie einige grundlegende Entwicklungstalente kennen, und hier ist eine Liste mit einigen davon.
Lernen Sie GIT kennen
Im Jahr 2022 müssen Sie ein gründliches Verständnis von Git haben. Erstellen Sie einige GitHub-Repositories, teilen Sie Ihren Code mit anderen und erfahren Sie, wie Sie GitHub-Code in Ihre ausgewählte IDE integrieren können. Git Complete: Die vollständige Schritt-für-Schritt-Anleitung zu Git ist ein wunderbarer Kurs, wenn Sie es lernen möchten.
Verstehen Sie das HTTP(S)-Protokoll
Wenn Sie als Webentwickler arbeiten möchten, müssen Sie ein gründliches Verständnis von HTTP haben. Ich erwarte nicht, dass Sie die Spezifikation studieren, aber Sie sollten wissen, wie man typische HTTP-Anforderungsmethoden wie GET, POST, PUT, PATCH, DELETE und OPTIONS verwendet und wie HTTP/HTTPS im Allgemeinen funktioniert.
Machen Sie sich mit dem Terminal vertraut
Obwohl ein Front-End-Entwickler keine Kenntnisse über Linux oder das Terminal haben muss, rate ich Ihnen dringend, sich mit dem Terminal vertraut zu machen und unter anderem Ihre Shell (bash, zsh, csh) einzurichten. Wenn Sie lernen möchten, wie Sie Terminal und Bash verwenden, empfehle ich Ihnen, diesen Udemy Shell Scripting-Kurs zu belegen.
Datenstrukturen und Algorithmen
Dies ist eine weitere allgemeine Programmierfähigkeit, die nicht erforderlich ist, um ein React-Entwickler zu werden, aber wesentlich ist, um überhaupt Programmierer zu werden.
Machen Sie sich mit Entwurfsmustern und Softwarearchitektur vertraut.
Das Verständnis von Entwurfsmustern wie Lernalgorithmen und Datenstrukturen ist nicht erforderlich, um ein React-Entwickler zu werden, aber es wird Ihnen sehr zugute kommen. Entwurfsmuster sind erprobte Lösungen für Probleme, die in der Softwareentwicklung regelmäßig auftreten.
3. Lernen Sie React.js kennen
Dies ist der wesentliche Punkt. Um ein React-Entwickler zu werden, müssen Sie React zuerst studieren und beherrschen. Die offizielle Website ist der beste Ort, um React zu lernen, aber als Neuling kann es ein wenig einschüchternd sein.
4. Verstehen Sie, wie man Konstruktionswerkzeuge verwendet
Wenn Sie als professioneller React-Entwickler arbeiten möchten, müssen Sie sich mit den Tools vertraut machen, die Sie als Webentwickler verwenden, z. B. Build-Tools, Unit-Testing-Tools und Debugging-Tools.
Hier sind zunächst einige der Entwicklungstools, die in dieser Roadmap angegeben sind:
Manager von Paketen
- npm
- Garn
- npm
Läufer von Aufgaben
- Programme, die mit npm geschrieben wurden
- Schluck
- Webpaket
- Aufrollen
- Paket
Außerdem ist es nicht erforderlich, all diese Technologien zu verstehen; Für Anfänger sollte das einfache Erlernen von npm und Webpack ausreichen. Sie können mit weiteren Technologien fortfahren, nachdem Sie ein besseres Verständnis für die Webentwicklung und das React-Ökosystem erlangt haben.
5. Gestaltung
Ein wenig Styling zu kennen, schadet nicht, wenn Sie ein Frontend-Entwickler wie ein React-Entwickler werden möchten. Trotz der Tatsache, dass die RoadMap CSS-Präprozessoren, CSS-Frameworks, CSS-Architektur und CSS in JS spezifiziert,
Ich empfehle, dass Sie zumindest Bootstrap verstehen, das wichtigste CSS-Framework, dem Sie von Zeit zu Zeit begegnen können.
Sie können auch Materialise oder Material UI studieren, wenn Sie noch einen Schritt weiter gehen und Bootstrap verstehen möchten.
6. Staatsverwaltung
Ein weiteres wichtiges Thema, auf das sich ein React-Entwickler konzentrieren sollte, ist Folgendes. Die folgenden Ideen und Rahmenbedingungen sind gemäß der Roadmap zu verstehen:
- API für Komponentenstatus und -kontext
- Redux
- Asynchrone Aktionen (Nebenwirkungen)
- Thunk-Redux
- Better Promise Redux
- Saga von Redux
- Beobachtbarer Redux
- Helfer
- Rückkampf
- Neu auswählen
- Persistenz von Daten
- Bleiben Sie im Redux
- Phönix ist auferstanden
- Redux bilden
- MobX
- Haken in Reaktion
Wem das alles zu viel ist, dem empfehle ich, sich auf Redux zu konzentrieren.
7. Geben Sie Dame ein
Da JavaScript keine stark typisierte Sprache ist, können Sie keinen Compiler verwenden, um typbezogene Probleme zu erkennen.
Die Typprüfung kann Ihnen dabei helfen, viele Fehler zu erkennen, wenn Ihre App erweitert wird, insbesondere wenn Sie JavaScript-Erweiterungen wie Flow oder TypeScript verwenden, um Ihr gesamtes Projekt zu prüfen.
Selbst wenn Sie sie nicht verwenden, verfügt React über integrierte Typüberprüfungsfunktionen, und wenn Sie wissen, wie man sie verwendet, können Sie Fehler frühzeitig erkennen.
Da Angular auch TypeScript verwendet, halte ich es für sinnvoll, TypeScript zusätzlich zu JavaScript zu studieren, und wenn Sie damit einverstanden sind, können Sie sich für den Ultimate TypeScript-Kurs auf Udemy anmelden.
8. Formularassistenten
Abgesehen von Type Checkern sind auch Formularhilfen wie Redux Form von Vorteil, die den besten Ansatz zur Verwaltung Ihres Formularstatus in Redux bieten. Sie können sich neben Redux Form auch Formik, Formsy und Final Form ansehen.
9. Terminplanung
Routing-Komponenten sind ein wichtiges Merkmal jeder Anwendung, da sie den Kern des starken deklarativen Programmieransatzes von React bilden.
React Router ist eine Reihe von Navigationskomponenten, die Sie verwenden können, um Ihre Anwendung deklarativ zu erstellen.
React Router funktioniert überall dort, wo React rendert, ob Sie lesezeichenfähige URLs für Ihre Web-App oder eine zusammensetzbare Methode zum Durchsuchen in React Native wünschen.
Sie können sich neben React-Router auch Router 5, Redux-First Router und React Router ansehen.
10. API-Clients
In der heutigen Welt werden Sie selten eine isolierte GUI finden. Stattdessen entwerfen Sie eher etwas, das APIs wie REST und GraphQL verwendet, um sich mit anderen Apps zu verbinden. Zum Glück haben React-Entwickler Zugriff auf eine Vielzahl von API-Clients; hier ist eine Liste von einigen von ihnen:
- SICH AUSRUHEN
- Bringen
- Superagent
- Axios
- GraphQL
- Apollo
- Relais
- URL
Apollo Client ist mein Favorit, da es die Entwicklung von Client-Apps mit GraphQL vereinfacht. Der Client soll Sie beim schnellen Erstellen einer GraphQL-basierten Benutzeroberfläche unterstützen, die mit jedem JavaScript-Front-End verwendet werden kann.
11. Hilfsbibliotheken
Dies sind die Bibliotheken, die Ihnen Ihre Arbeit erleichtern. Es gibt eine Reihe nützlicher Bibliotheken für React-Entwickler, wie unten dargestellt:
Lodash
Moment
Klassennamen
Ziffer
RxJS
Ramda
Ich empfehle weder, alle zu lernen, noch die RoadMap. Nur Lodash-, Moment- und Klassennamen können gelernt werden.
12. Überprüfung
Nun, dies ist eine der wichtigsten Fähigkeiten für React-Entwickler, die manchmal vernachlässigt wird, aber wenn Sie immer einen Schritt voraus sein wollen, sollten Sie sich darauf konzentrieren, Bibliotheken zu lernen, die Sie beim Testen unterstützen. Hier finden Sie auch Bibliotheken für Komponententests, Integrationstests und End-to-End-Tests.
Eine Liste der in der Roadmap aufgeführten Bibliotheken finden Sie hier:
Testen auf Einheitsebene
- Scherz
- Enzym
- Sinon
- Mokka
- Tschai
- AVA
- Band
Testen von Anfang bis Ende
- Webdriver, Selenium
- Zypresse
- Puppenspieler
- Gurke.js
- Nightwatch.js
- Integritätsprüfung
- Karma
Sie können jede Bibliothek lernen, die Sie möchten, aber Jest und Enzyme sind zwei, die sehr zu empfehlen sind.
13. Internationalisierung
Ein weiteres wichtiges Thema für die Gestaltung des Frontends, das auf der ganzen Welt verwendet wird, ist dies. Für Japan, China, Spanien und andere europäische Länder müssen Sie möglicherweise die lokale GUI-Version unterstützen.
Die folgenden Technologien werden von der RoadMap empfohlen, obwohl sie alle nützlich zu wissen sind:
- Intl. Reagieren
- i18nächste Reaktion
Beide Bibliotheken enthalten React-Komponenten und eine API zum Formatieren von Datumsangaben, Ganzzahlen und Zeichenfolgen sowie Pluralisierungs- und Übersetzungsunterstützung.
14. Rendern auf dem Server
Sie fragen sich vielleicht, was der Unterschied zwischen serverseitigem Rendering und clientseitigem Rendering ist, also lassen Sie uns das aus dem Weg räumen, bevor wir die Bibliothek besprechen, die serverseitiges Rendering mit React ermöglicht.
Ihr Browser lädt eine einfache HTML-Seite im clientseitigen Rendering herunter. Das JavaScript wird dann gerendert und der Inhalt hinzugefügt.
React-Komponenten werden auf dem Server gerendert und der resultierende HTML-Inhalt wird im Fall von serverseitigem Rendering an den Client oder Browser übergeben.
Das folgende serverseitige Rendering wird von der RoadMap empfohlen:
- Next.js
- Nach.js
- Schurke
Ich empfehle jedoch, nur Next zu lernen.
15. Site-Generator (statisch)
Der statische Site-Generator Gatsby.js ist ein zeitgemäßer statischer Site-Generator. Gatsby kann verwendet werden, um eine Website mit angepassten, eingeloggten Erfahrungen zu entwickeln. Sie verwenden JavaScript, um Ihre Eingaben zu integrieren und wohlgeformte HTML-Ausgaben zu generieren.
16. Integration eines Backend-Frameworks
React on Rails kombiniert Rails mit dem Frontend-Framework React von Facebook (Server-Rendering). Es bietet Server-Rendering, das für SEO-Crawler-Crawling und UX-Geschwindigkeit nützlich ist und in Rails/Webpacker nicht verfügbar ist.
17. Mobile-App
React Native wird schnell zum bevorzugten Ansatz, um eine mobile Anwendung in JavaScript mit einem nativen Look-and-Feel zu erstellen, was ein weiterer Bereich ist, in dem die Beherrschung von React wirklich vorteilhaft sein kann.
Folgende Bibliotheken werden empfohlen:
- Native Reaktion
- Cordova/PhoneGap
Ich glaube jedoch, dass es ausreicht, nur React Native zu studieren.
18. Arbeitsplatz
Es gibt andere React-basierte Frameworks für die Entwicklung von Desktop-GUIs, z. B. React Native Windows, mit dem Sie mithilfe von React native UWP- und WPF-Programme erstellen können.
Folgende Bibliotheken werden empfohlen:
- In Proton beheimatet
- Elektron
- Windows mit React Native
Sie sind jedoch alle für fortgeschrittene Erkundungen gedacht. Sie können sich diese ansehen, wenn Sie React bereits beherrschen. Wenn Sie nach Kursen suchen, habe ich eine Liste mit 10 kostenlosen React-Kursen zusammengestellt, die Ihnen alles beibringen, was Sie über React wissen müssen, einschließlich Hooks.
19. Virtuelle Realität
Wenn Sie Virtual-Reality-Apps erstellen möchten, können Sie Frameworks wie React 360 verwenden, mit denen Sie interessante 360- und VR-Erlebnisse mit React erstellen können. Sie können mehr über React 360 erfahren, wenn Sie an diesem Bereich interessiert sind.
Obwohl es sehr umfangreich ist, besteht eine erhebliche Wahrscheinlichkeit, dass Sie viele Informationen bereits kennen. Sie müssen sich von dieser Roadmap nicht einschüchtern oder überwältigen lassen, wenn Sie nicht wissen, was Sie tun; Du kannst klein anfangen und dich hocharbeiten.
Um ein React-Entwickler zu werden, können Sie verschiedene Wege einschlagen. Und wenn Sie React bereits kennen, werden Sie mit ziemlicher Sicherheit einige neue Tools und Technologien entdecken können, die Sie Ihrem Toolkit im Jahr 2022 hinzufügen können, um ein noch besserer React-Entwickler zu werden.
