modern js

Straße zum modernen JavaScript und reagieren

Der Zweck dieses Leitfadens besteht darin, eine Liste mehrerer kostenloser Ressourcen (Artikel, Bücher, Videos?) Bereitzustellen, die Ihnen helfen, moderne JavaScript und die React -Bibliothek zu lernen.

Euen Dieser Leitfaden soll nicht alles auflisten, was Sie über JavaScript oder React wissen müssen. Ich habe versucht aufzulisten, was nützlich sein könnte, wenn Sie auf dieser Welt völlig neu wären, basierend auf meinen Erfahrungen und den Menschen, die ich getroffen habe. Wenn Ihre Lieblingssache dort nicht aufgeführt ist, heißt das nicht, dass ich sie nicht mag oder missbilligt. Zum Beispiel sind TypeScript oder GraphQL großartig, aber ich denke nicht, dass es obligatorisch ist, das als Anfänger zuerst zu lernen.

1) Modernes JavaScript?

Tutorials, die alles abdecken:

• Lernen Sie die Webentwicklung unterrichtet Ihnen auch HTML und CSS.
• Eloquent JavaScript ist perfekt, um JS und allgemeine Programmierkonzepte zu lernen.
• Das moderne JavaScript -Tutorial, wie es jetzt gemacht wird. Von den Grundlagen bis hin zu fortgeschrittenen Themen mit einfachen, aber detaillierten Erklärungen.
• ES6 lernen (ECMascript 2015)? Wenn Sie vor einiger Zeit JavaScript geschrieben haben und sich mit modernen Syntaxen treffen möchten.

Artikel und Videos, die ich mochte:

• Modernes JavaScript, das für Dinosaurier erklärt wurde, lernen Sie Grundlagen über NPM, Babel, Webpack usw. und die Geschichte dahinter.
• Wenn Sie aus einer anderen Programmiersprache stammen, können Sie sich in JavaScript verstehen, wenn Sie aus einer anderen Programmiersprache stammen, möglicherweise unwohl mit der Art und Weise, wie wir Variablen in JS deklarieren können. Dieser Artikel wird Ihnen helfen, sich besser zu fühlen!
• JavaScript debuggen? Firefox oder Edge haben auch ihre eigenen Devtools, aber ich persönlich bevorzuge Chrome, wenn ich codieren kann.
• Funktionale Programmierung in JavaScript? Diese Videos werden von einem ehemaligen Spotify JS -Entwickler gemacht. Er wird Ihnen wesentliche Konzepte wie Versprechen, Schließungen oder Funktionen höherer Ordnung beibringen. Diese Dinge sind wesentlich in React.
• Komposition über Erbschaft? In der Schule musste ich eine Menge objektorientierter Programmierung machen. Dieses Video hat mir geholfen zu verstehen, warum es nicht immer notwendig ist.

Dokumentation

Manchmal müssen Sie nach einer Dokumentation suchen. Wenn Sie beispielsweise kein bestimmtes Schlüsselwort in einer Codebasis kennen oder lernen möchten, wie Sie eine native Funktion verwenden. Natürlich können Sie jede Suchmaschine oder einen Stackoverflow verwenden, aber ich würde empfehlen, die MDN -Webdokumente zu verwenden.

2) reagieren ⚛️

• Was ist React: Eine visuelle Einführung für Anfänger
• JavaScript für React zu wissen
• Der offizielle Dokument ist der beste Ort, um Reaktionen zu lernen.
• Der Anfängerleitfaden zum Reagieren?
• Progressive React -Tipps, um Ihre React -Site leistungsfähig zu machen. Web.dev hat auch viele Artikel wie diese.
• Lernmustermuster zum Erstellen leistungsstarker Web -Apps mit Vanille -JavaScript und React.

Haken? Klassenkomponenten

Die Haken sind sehr reagiert spezifisch. Ich schlage vor, Sie überprüfen, warum Haken reagieren? ? Um mehr über React History und oder warum wir jetzt Hooks verwenden. Möglicherweise möchten Sie auch über Klassenkomponenten und einige Muster erfahren, mit denen die Logik zwischen Komponenten (vor der Ankunft der Hooks) verwendet wird, da in vielen Codebasen noch immer vorhanden ist:

• Vergleichen Sie das Hakenflussdiagramm mit dem Diagramm der Klassenkomponenten -Lebenszyklus -Methoden
• Komponenten höherer Ordnung: Ein React -Anwendungsmuster
• Requisiten rendern

Staatsmanagement und andere Bibliotheken

Irgendwann denken Sie vielleicht, dass es schön wäre, in jeder React -Komponente Zugang zu einem globalen Zustand zu haben, um immer wieder die Down -Down -Requisiten zu vermeiden ... die Leute könnten Ihnen sagen, dass Sie Redux oder MOBX oder Apollo oder Xstate oder [den beliebten Bibliotheksnamen einfügen], um dies zu erreichen, aber möglicherweise übergeschosert werden! Ich würde empfehlen, den Artikel React State Management -Bibliotheken zu lesen und einen schönen Überblick zu erhalten. React -Bibliotheken für 2023 werden auch dieses Thema und vieles mehr angehen!

3) Was kommt als nächstes? ?

• Bleiben Sie auf dem neuesten Stand und entdecken Sie neue Dinge mit React Newsletter und Bytes Newsletter.
• Üben Sie die Reaktion mit erstellungsreaktions-App oder direkt in Ihrem Browser auf Codesandbox
• Erstellen Sie Produktionsbereitschafts -Apps mit: vite, next.js, gatsby, reagieren nativ über Expo;

Was ist mit dem Styling? ?

Einige Grundlagen

• Lernen Sie CSS einen immergrünen CSS -Kurs und Verweise, um Ihr Web -Styling -Expertise zu verbessern.
• Moderne CSS für Dinosaurier erklärt
• CSS-in-JS oder CSS-and-JS
• Styling- und CSS -offizieller Reaktionsdokument

Somne Bibliotheken, mit denen Sie Ihren Stil verwalten können:

• Rückenwind
• CSS -Module
• Vanilla-Extract
• Emotion
• Ich denke, sie sind die besten zwischen der Auswahl für diejenigen, die verwendet werden, um "klassische" CSS zu schreiben und es aus dem Mischen mit JavaScript auszunutzen.

Designsysteme

Vielleicht möchten Sie nur eine App erstellen und vermeiden, viel Zeit damit zu verbringen, CSS und HTML zu schreiben. Ich schlage vor, Sie verwenden Bibliotheken wie Material-UI, Ameisendesign oder Polaris. Wenn Sie Ihr eigenes Designsystem erstellen möchten, empfehle ich Ihnen, Atomdesign zu lesen.

Was ist mit Tests? ?

• Aber was ist ein JavaScript -Test?
• So verwenden Sie das Tutorial für React Testing Library Tutorial verstehen und lernen, wie man automatisierte Tests über die React -Testbibliothek schreibt (es gibt andere Testbibliotheken, aber RTL ist eine großartige, die vom offiziellen Dokument empfohlen wird).
• Das Verständnis von Schockspottungen ist eine Technik, um Testpersonen zu isolieren, indem Abhängigkeiten durch Objekte ersetzt werden, die Sie kontrollieren und überprüfen können.
• Warum Zypresse? ? eine Bibliothek zum Schreiben von End-to-End-Tests und mehr;

Andere Tools, zu denen ich standardmäßig bin

• Code Editor: VS Code;
• Autocode -Formatierer: schöner;
• Linter: Eslint;
• Verwalten Sie Git über eine Benutzeroberfläche anstelle von Befehlen: Sourcetree oder VS Code;
• Erstellen und Bereitstellen Ihrer App: netlify;
• Kontinuierliche Integration: Travis CI;
• Domain -Namen kaufen: Google Domains;

Andere Bibliotheken, zu denen ich standardmäßig bin

• Routing: React-Router;
• Internationalisierung: Linguijs;
• Entwickeln Sie Ihre Komponenten isoliert und teilen Sie sie über ein Storybook an Ihr Team. Stellen Sie Ihr Storybook bereit und führen Sie Screenshot -Tests in jeder Geschichte über Chromatic aus.
• API -Verspottung beim Testen: Mock Service Worker;

Bezahlte Kurse?

Die, die ich nach dem Abschluss empfehle:

• Wes Bos -Kurse? JavaScript, React, CSS und mehr; Einige sind sogar frei !
• Kent C. Dodds Kurse? Reagieren, testen;