Get best of the week

ReactJS: Schnellstart

Der React.js-Entwicklerkurs steht kurz vor dem Start , daher wurde eine weitere offene Lektion innerhalb der Mauern von OTUS abgehalten. Folgende Punkte wurden dabei berücksichtigt:

  • Was ist im Standardfunktionssatz von React.js enthalten?
  • ist es möglich, damit eine komplexe Anwendung zu erstellen;
  • Zusammensetzung gegen Vererbung;
  • funktionale Programmierung - ist es einfach oder schwierig?
  • Was ist Redux und warum wird es benötigt?



Am Ende der Lektion haben wir eine kleine ReactJS-Webanwendung entwickelt. Das Webinar wurde von Nikita Ovchinnikov , einem Softwareentwickler mit über 8 Jahren Erfahrung in der kommerziellen Entwicklung, moderiert.

Was ist reagieren?


Sie finden die Antwort auf diese Frage, indem Sie die offizielle Website öffnen, auf der geschrieben steht, dass React eine JavaScript-Bibliothek zum Erstellen von Benutzeroberflächen ist.



Hier finden Sie ein wunderbares Tutorial, nach dem Sie dieses Framework sofort nach dem Lesen verwenden können. Wenn Sie möchten, lesen Sie das Tutorial auf Russisch, dies wird jedoch nicht empfohlen. Wenn Englisch wirklich schlecht ist, öffnen Sie trotzdem die englische Originalversion und verwenden Sie den Google-Übersetzer. Tatsache ist, dass offizielle russischsprachige Quellen in Bezug auf die Übersetzung manchmal hinterherhinken (es kommt vor, dass die Dokumentation aktualisiert wird, die Übersetzung jedoch noch nicht).

Warum ist React so beliebt?


Zum Beispiel zeugen die Statistiken der letzten 6 Monate ohne Berücksichtigung der charakteristischen Absenkung während der Winterferien von der Popularität von React : Die folgenden Statistiken



zeigen ebenfalls gute Ergebnisse : Natürlich sind Statistiken weit von allem entfernt, aber dennoch können wir anhand der Stichprobe diese Popularität erkennen hoch, und es nimmt nur zu. Warum ist React so beliebt? Dafür gibt es eine Reihe von Gründen:







  • es ist wirklich sehr gut dokumentiert :
    - hier ist ein Tutorial ;
    - Hier ist eine Anleitung für Anfänger .
    Heute wird das Framework jedoch nicht populär, wenn es schlecht dokumentiert ist.
  • React . , . ;
  • , — . JSX, , ;
  • . - , , , , , , , ;
  • . . , , , . React Angular;
  • (react-developer-tools, redux-dev-tools);
  • React , , .

React?


Machen Sie sich also mit Schwäche 1 vertraut: Reagieren ist nicht leicht zu lernen . Und hier ist der Grund:

1. Reagieren ist eine völlig andere Denkweise. Wenn Sie mit ihm arbeiten, müssen Sie wirklich wieder aufbauen. In React gibt es im Gegensatz zu anderen Frameworks nur das Konzept der Komposition. Die Jungs von Facebook haben ihr Framework so gestaltet, dass es keine Vererbung hat . Dieselben Leute von Facebook haben diesen Zustand ganz logisch erklärt :

"Bei Facebook verwenden wir React in Tausenden von Komponenten, und wir haben keine Anwendungsfälle gefunden, in denen wir empfehlen würden, Hierarchien zur Vererbung von Komponenten zu erstellen . "

Tatsächlich ist diese Aussage nicht unbegründet, da es in der OOP natürlich viele bekannte Probleme gibt, zum Beispiel eine übermäßige Anzahl von Abstraktionen. Darüber hinaus sind nicht alle Entwickler dafür, unglaubliche Vererbungsketten aufzubauen, und das ist alles, obwohl Vererbung natürlich irgendwo notwendig und nützlich ist.

2. Der zweite Punkt, der das Studium von React erschwert, ist, dass es nur Empfehlungen enthält und es keine starren Regeln gibt. Nicht nur das, während Sie das Framework studieren, ist es immer noch erträglich, aber wenn Sie zu einem echten Projekt kommen, werden Sie sehr überrascht sein. Tatsache ist, dass es in React keine zwei identischen Projekte gibt und in jedem Unternehmen ein Projekt mit React völlig individuell ist. Man gewöhnt sich an eine Situation und wechselt dann zu einem anderen Team und sieht, dass dort alles anders ist: andere Bibliotheken, andere Regeln ... Und wieder muss man sich anpassen und anpassen. Wie sie sagen, muss man für Flexibilität bezahlen.

3. Die dritte Schwierigkeit des Lernens - um React erfolgreich zu meistern, muss ein Entwickler ein hohes Niveau haben. Nein, React selbst ist einfach und leicht zu schreiben. Aber um etwas mehr oder weniger kompliziertes zu machen, müssen Sie über gute Programmierkenntnisse verfügen. Wenn es Lücken im Grundwissen von JS und TS gibt, wird es für Sie ziemlich schwierig sein und Sie werden nicht alles verstehen.

Problem der Wahl


Lassen Sie uns nun über die Schwäche Nummer 2 sprechen - das Problem der Wahl . Es ist eine Sorte, in der es leicht ist, sich zu verirren. Es gibt wirklich viele Dinge. Vor kurzem sind Hooks aufgetaucht - ein Gespräch über die Tatsache, dass Klassen nicht mehr benötigt werden, hat begonnen. Die Kämpfe zwischen React Hooks und React Class haben begonnen ... Alle beeilten sich, Hooks zu verwenden, und dann sagten sie, dass nicht alles klar sei und kehrten zur Verwendung von Klassen usw. usw. zurück. p ...

Tatsächlich existiert die richtige Antwort auf die Frage " React Hooks oder React Class " nicht. Genauer gesagt hängt die richtige Antwort von den Bedingungen ab, unter denen Sie diese Frage stellen.

Eine andere Frage stellt sich: "Wie prüfe ich Typen?" Sehen Sie, wir haben:


Und hier haben wir wieder das Problem der Wahl, das, um ehrlich zu sein, manchmal beunruhigt. Natürlich ist alles sehr unterschiedlich, und während Sie mit einigen Entscheidungen arbeiten, werden Sie sich treffen, aber einige werden Sie nie „sehen“. Es hängt alles von der Situation ab.

Wieder gibt es Create React App , Webpack.js und Babel . Sobald Sie anfangen, werden Sie hier eine Frage haben, was Sie verwenden sollen.

Die folgende Qual der Wahl ist mit dem Staat verbunden . Es gibt Redux und es gibt MobX , und in Redux gibt es auch Redux-Saga und Redux-Thunk . Und es ist schwierig, ohne es zu versuchen, zu erkennen, was in einer bestimmten Situation besser zu verwenden ist.

Außerdem:

1. Router . Es gibt ungefähr fünf, hier sind die beliebtesten:


2. CSS-IN-JS . Im Rahmen dieses sehr guten Ansatzes gibt es übrigens auch eine Wahl:


Zusammenfassend können Sie die folgenden React-Nachteile auflisten :

  1. Hohe Eintrittsschwelle. Nehmen wir an, es ist schwer, React zu lernen, ohne etwas vorzutäuschen. Einschließlich wegen der sehr großen Infrastruktur.
  2. Viel Zeit zum Lernen. Wenn es nicht einfach zu lernen ist, seien Sie bereit, Zeit damit zu verbringen - sonst auf keinen Fall. Sie müssen verstehen, was was ist.
  3. Eine sehr große Vielfalt, die leicht verloren gehen kann. Es gibt nichts hinzuzufügen.

Was bedeutet "viel Lernzeit"? In der Tat, wenn Sie eine Technologie nehmen, egal wie sanft Sie aus Sicht des Marketings ausgelegt sind, glauben Sie nicht den Worten im Stil von "Sie werden in nur zwei kurzen Lektionen lernen" - das ist alles Unsinn und funktioniert nicht in der realen Welt . Trite, aber wahr: Um ein wirklich guter Spezialist zu werden, muss man viel Zeit verbringen. Und um einfach etwas zu tun, wird nicht viel Zeit benötigt.

Was ist die Stärke, Bruder?


Trotz alledem ist React eine sehr leistungsfähige Technologie. Erstens, wenn Sie ein Profi sind, wird die Arbeit sehr leicht zu finden sein. Vielmehr wird es schwierig sein, dies abzulehnen, da es so viele Angebote auf dem Markt gibt:



Das nächste Plus sind viele vorgefertigte Bibliotheken und Lösungen. Dies wird durch denselben Screenshot von GitHub angezeigt (es gibt mehr als eine Million Repositories):



Wenn Sie nur denken, dass es schön wäre, dieses Ding zu „zerschlagen“, stellt sich heraus, dass es bereits von jemandem erstellt wurde. Die Technologie ist wirklich sehr beliebt.

Außerdem:

  1. Vielfalt ist ein Problem für Anfänger, aber für einen Profi ist es ein Plus!
  2. React enthält eine große Menge guter Lösungen.
  3. Sie können Anwendungen beliebiger Komplexität entwickeln.
  4. Sie können in jedem Stil schreiben.

Typoskript-Unterstützung


React bietet einfach großartige Typescript-Unterstützung. Diese Sprache ist schon deshalb gut, weil sie zum Schreiben von Typen verwendet werden kann, die wirklich funktionieren und wirklich helfen. Und mit Typescript können Sie ein wirklich starkes Typensystem schreiben. Im Wesentlichen ist Typescript jetzt ein Standard, und dieser Standard befindet sich in React. Natürlich können Sie es nicht verwenden und bevorzugen JavaScript. Ohne Typoskript ist es jedoch sehr schwierig, etwas wirklich Schwieriges zu tun, da es ohne strenge Typen sehr schwierig ist, zu arbeiten. Es ist auch schwer vorherzusagen, wie sich Ihre Entscheidung ohne strenge Typen verhalten wird. Dies ist selbst mit Typen schwierig und ohne sie ist es wirklich traurig ...

Arbeiten Sie im Allgemeinen unbedingt mit Typescript, da dies eine sehr notwendige Technologie ist:

- https://www.typescriptlang.org/docs/handbook/react-&- webpack.html.



Ein paar Tipps


Abschließend möchte ich einige Empfehlungen geben. Heute wird viel über OOP gesprochen, und Sie können leicht eine große Menge an Informationen zu diesem Thema finden. Und überall werden Sie zum millionsten Mal über die Basisklasse Tier und daraus geschrieben - über Katze und Hund. Oder über das Basisklasse-Auto und daraus - Ferrari und BMW. Und das ist alles, was sie Ihnen von Zeit zu Zeit und von einem Lehrbuch zum anderen zeigen, während Ihr Entwicklerlevel gleichzeitig mit den Schnecken wächst.

Gleichzeitig wird der funktionalen Programmierung eindeutig nicht genügend Aufmerksamkeit geschenkt, deren Verständnis Ihre Fähigkeiten wirklich verbessern wird. Wenn Sie wirklich lernen, es richtig und richtig zu benutzen. Eines der am besten geeigneten Bücher bisher ist frei verfügbar hier und ist stark zum Lesen empfohlen:



Warum ist es schwierig, funktionale Programmierung zu lernen? Weil Bücher sehr oft mit Mathematik, akademischer Komplexität usw. überladen sind. Nach demselben Buch werden Sie Erfolg haben, weil es einfach wunderbar ist.

Warum ist funktionale Programmierung wichtig? Denn so etwas wie Redux basiert auf den Grundlagen der funktionalen Programmierung. Und wenn Sie zumindest die grundlegende funktionale Programmierung beherrschen, werden Sie wirklich anfangen, Code viel besser zu schreiben. Die Hauptsache ist, alles richtig zu verstehen.

Der zweite Punkt, über den ich sprechen möchte, ist Architektur. Unsere Architektur ist alles ! Es gibt ein sehr gutes architektonisches Paradigma namens Enten. Hier erfahren Sie, wie Sie React- und Redux-Anwendungen erstellen. Diese Architektur ist für den praktischen Gebrauch empfehlenswert.

Die Idee selbst ist sehr interessant und stellt eine Reihe strenger und gleichzeitig cooler Regeln dar, die Ihre Entscheidungsstruktur verständlich und lesbar machen. Dies ist kein Longrid, daher reicht es aus, nur den Inhalt zu lesen und zu verstehen. Danach können Sie Ihre Anwendungen ordnungsgemäß organisieren. Der Link ist beigefügt.



Gesamt


  1. Wer etwas sagt, hat eine hohe Einstiegsschwelle. Bereiten Sie sich trotz mehrjähriger Erfahrung in der JavaScript-Programmierung auf das vor, was schwierig sein wird, und es werden viele Fragen auftauchen.
  2. React bietet sehr gute Möglichkeiten. Aber es wurde bereits viel über die Profis gesagt, deshalb werden wir uns nicht wiederholen.
  3. Wenn Sie sich für die Geschichte der Entwicklung von React interessieren, finden Sie hier eine gute Roadmap .

Das ist alles. Wenn Sie sich für den praktischen Teil der Lektion interessieren, schauen Sie sich ab sofort das Webinar an . Auf ReactJS wird eine kleine Test-Webanwendung entwickelt, deren Code auf GitHub verfügbar ist .

More articles:


All Articles