Einführung
Unabhängig davon, ob Sie neu in der Programmierung sind oder bereits ein erfahrener Entwickler sind, ist das Erlernen neuer Konzepte und Sprachen/Frameworks in dieser Branche ein Muss, um mit den Trends Schritt zu halten.
Nehmen wir zum Beispiel React, das vor vier Jahren von Facebook nur als Open Source bereitgestellt wurde und bereits zur ersten Wahl für JavaScript-Entwickler auf der ganzen Welt geworden ist.
Vue und Angular haben natürlich auch ihre legitime Fangemeinde. Und dann gibt es noch Svelte und andere Allzweck-Frameworks wie Next.js oder Nuxt.js. Und Gatsby und Gridsome und Quasar ... und vieles mehr.
Wer sich als erfahrener JavaScript-Entwickler beweisen möchte, muss – neben der guten alten JS-Arbeit – zumindest etwas Erfahrung mit verschiedenen Frameworks und Bibliotheken mitbringen.
Um Ihnen zu helfen, im Jahr 2020 ein Front-End-Meister zu werden, habe ich neun verschiedene Projekte zusammengestellt, die sich jeweils auf unterschiedliche JavaScript-Frameworks und -Bibliotheken als Tech-Stack konzentrieren, den Sie erstellen und Ihrem Portfolio hinzufügen können. Denken Sie daran, dass Ihnen nichts mehr hilft, als die Dinge in die Tat umzusetzen. Machen Sie also weiter, schalten Sie Ihren Verstand ein und machen Sie es möglich.
Der Artikel wurde mit Unterstützung von EDISON Software übersetzt , und auch .
Filmsuch-App mit React (mit Hooks)
Das erste, womit Sie beginnen könnten, wäre die Entwicklung einer Filmsuch-App mit React. Unten sehen Sie ein Bild davon, wie die endgültige App aussehen wird:
Was wirst du lernen
Durch die Erstellung dieser Anwendung verbessern Sie Ihre React-Fähigkeiten mithilfe der relativ neuen Hooks-API. Das Beispielprojekt verwendet React-Komponenten, viele Hooks, eine externe API und natürlich etwas CSS-Stil.
Tech-Stack und Funktionen
- Reagieren Sie mit Haken
- Erstellen-Reagieren-App
- Jsx
- CSS
Ohne den Einsatz von Klassen bieten Ihnen diese Projekte den perfekten Einstieg in das funktionale React und werden Ihnen im Jahr 2020 auf jeden Fall weiterhelfen. Sie können finden . Befolgen Sie die Anweisungen oder machen Sie es selbst.
Chat-App mit Vue
Ein weiteres großartiges Projekt für Sie ist die Erstellung einer Chat-App mit meiner Lieblings-JavaScript-Bibliothek: VueJS. Die Bewerbung sieht etwa so aus:
Was wirst du lernen
In diesem Tutorial erfahren Sie, wie Sie eine Vue-App von Grund auf erstellen – Komponenten erstellen, Zustände verwalten, Routen erstellen, eine Verbindung zu Diensten von Drittanbietern herstellen und sogar die Authentifizierung durchführen.
Tech-Stack und Funktionen
- Vue
- vuex
- Vue-Router
- CLI-Ansicht
- Pusher
- CSS
Dies ist ein wirklich großartiges Projekt, um mit Vue zu beginnen oder Ihre vorhandenen Fähigkeiten zu verbessern, um 2020 in die Entwicklung einzusteigen. Sie können finden .
Schöne Wetter-App mit Angular 8
Dieses Beispiel hilft Ihnen beim Erstellen einer schönen Wetter-App mit Angular 8:
Was wirst du lernen
Dieses Projekt vermittelt Ihnen wertvolle Fähigkeiten beim Erstellen von Anwendungen von Grund auf – vom Entwurf über die Entwicklung bis hin zu einer einsatzbereiten Anwendung.
Tech-Stack und Funktionen
- Angular 8
- Firebase
- Serverseitiges Rendering
- CSS mit Grid und Flexbox
- Mobilfreundlich und anpassungsfähig
- Dunkler Modus
- Schöne Schnittstelle
Was mir an diesem umfassenden Projekt wirklich gefällt, ist, dass man die Dinge nicht isoliert betrachtet. Stattdessen lernen Sie den gesamten Entwicklungsprozess vom Entwurf bis zur endgültigen Bereitstellung kennen.
To-Do-App mit Svelte
Svelte ist so etwas wie der Neuling im Komponentenansatz – zumindest ähnlich wie React, Vue und Angular. Und dies ist eines der heißesten neuen Produkte für 2020.
To-Do-Apps sind nicht unbedingt das heißeste Thema, aber sie helfen Ihnen wirklich dabei, Ihre Svelte-Fähigkeiten zu verbessern. Es wird so aussehen:
Was wirst du lernen
Dieses Tutorial zeigt Ihnen von Anfang bis Ende, wie Sie eine Anwendung mit Svelte 3 erstellen. Sie verwenden Komponenten, Stile und Event-Handler
Tech-Stack und Funktionen
- Schlanke 3
- Komponenten
- Styling mit CSS
- Syntax ES6
Ich habe festgestellt, dass es nicht viele gute Svelte-Starterprojekte gibt .
E-Commerce-App mit Next.js
Next.js ist das beliebteste Framework zum Erstellen von React-Apps, die serverseitiges Rendering sofort unterstützen.
Dieses Projekt zeigt Ihnen, wie Sie eine E-Commerce-Anwendung erstellen, die wie folgt aussieht:
Was wirst du lernen
In diesem Projekt erfahren Sie, wie Sie mit Next.js entwickeln – neue Seiten und Komponenten erstellen, Daten abrufen sowie eine Next-Anwendung formatieren und bereitstellen.
Tech-Stack und Funktionen
- Next.js
- Komponenten und Seiten
- Datenerfassung
- Stilisierung
- Projektbereitstellung
- SSR und SPA
Es ist immer toll, ein reales Beispiel wie eine E-Commerce-App zu haben, um etwas Neues zu lernen. Sie können .
Vollständiger mehrsprachiger Blog mit Nuxt.js
Nuxt.js ist für Vue, wie Next.js für React: ein großartiges Framework, um serverseitiges Rendering und Single-Page-Anwendungen zu kombinieren
Die letzte Anwendung, die Sie erstellen können, sieht folgendermaßen aus:
Was wirst du lernen
In diesem Beispielprojekt erfahren Sie, wie Sie mit Nuxt.js eine vollständige Website erstellen, von der Ersteinrichtung bis zur endgültigen Bereitstellung.
Es nutzt viele der coolen Funktionen, die Nuxt zu bieten hat, wie z. B. Seiten und Komponenten sowie Styling mit SCSS.
Tech-Stack und Funktionen
- Nuxt.js
- Komponenten und Seiten
- Storyblock-Modul
- Mixins
- Vuex für die Staatsverwaltung
- SCSS für das Styling
- Nuxt-Middleware
, das viele der großartigen Funktionen von Nuxt.js enthält. Ich persönlich liebe es, mit Nuxt zu arbeiten, also sollten Sie es ausprobieren, denn es macht Sie auch zu einem großartigen Vue-Entwickler.
Bloggen Sie mit Gatsby
Gatsby ist ein großartiger statischer Site-Generator, der React und GraphQL verwendet. Das ist das Ergebnis des Projekts:
Was wirst du lernen
In diesem Tutorial erfahren Sie, wie Sie mit Gatsby einen Blog erstellen, den Sie zum Schreiben Ihrer eigenen Artikel mit React und GraphQL verwenden.
Tech-Stack und Funktionen
- Gatsby
- Reagieren
- GraphQL
- Plugins und Themes
- MDX/Markdown
- Bootstrap-CSS
- Patterns
Wenn Sie jemals einen Blog starten wollten, wie man es mit React und GraphQL macht.
Ich sage nicht, dass WordPress eine schlechte Wahl ist, aber mit Gatsby können Sie mithilfe von React leistungsstarke Websites erstellen – eine erstaunliche Kombination.
Bloggen Sie mit Gridsome
Gridsome für Vue… Okay, das hatten wir schon mit Next/Nuxt.
Aber das Gleiche gilt auch für Gridsome und Gatsby. Beide verwenden GraphQL als Datenschicht, Gridsome verwendet jedoch VueJS. Es ist auch ein großartiger Generator für statische Websites, der Ihnen beim Erstellen großartiger Blogs hilft:
Was wirst du lernen
In diesem Projekt erfahren Sie, wie Sie einen einfachen Blog erstellen, um mit Gridsome, GraphQL und Markdown zu beginnen. Außerdem wird erläutert, wie eine Anwendung über Netlify bereitgestellt wird.
Tech-Stack und Funktionen
- Grimmig
- Vue
- GraphQL
- Markdown
- Netlify
Dies ist sicherlich nicht das umfassendste Tutorial, aber es behandelt die Grundkonzepte von Gridsome und .
SoundCloud ähnlicher Audioplayer mit Quasar
Quasar ist ein weiteres Vue-Framework, mit dem mobile Apps erstellt werden können. In diesem Projekt erstellen Sie eine Audioplayer-Anwendung, zum Beispiel:
Was wirst du lernen
Während sich andere Projekte hauptsächlich auf Web-Apps konzentrieren, zeigt Ihnen dieses, wie Sie mit Vue und dem Quasar-Framework eine mobile App erstellen.
Sie sollten bereits ein funktionierendes Cordova mit Android Studio/Xcode eingerichtet haben. Wenn nicht, enthält das Handbuch einen Link zur Quasar-Website, auf der Sie erfahren, wie Sie alles einrichten.
Tech-Stack und Funktionen
- Quasar
- Vue
- Cordova
- Wellensurfer
- UI-Komponenten
, was die Fähigkeiten von Quasar zum Erstellen mobiler Anwendungen demonstriert.
Source: habr.com