introduction
Que vous soyez nouveau dans la programmation ou développeur chevronné, l'apprentissage de nouveaux concepts et langages/frameworks est indispensable dans ce secteur pour suivre les tendances.
Prenez React, par exemple, que Facebook a rendu public il y a à peine quatre ans et qui est déjà devenu le choix numéro un des développeurs JavaScript du monde entier.
Bien entendu, Vue et Angular ont également leur propre base de fans légitimes. Et puis il y a Svelte et d’autres frameworks universels comme Next.js ou Nuxt.js. Et Gatsby, et Gridsome, et Quasar... et bien plus encore.
Si vous souhaitez faire vos preuves en tant que développeur JavaScript expérimenté, vous devez avoir au moins une certaine expérience avec divers frameworks et bibliothèques - en plus de travailler avec le bon vieux JS.
Pour vous aider à devenir un maître du front-end en 2020, j'ai rassemblé neuf projets différents, chacun se concentrant sur un framework et une bibliothèque JavaScript différents en tant que pile technologique que vous pouvez créer et ajouter à votre portefeuille. N'oubliez pas que rien ne vous aide plus que de créer des choses, alors avancez, utilisez votre esprit et réalisez-le.
L'article a été traduit avec le soutien d'EDISON Software, qui et .
Application de recherche de films utilisant React (avec hooks)
La première chose par laquelle vous pouvez commencer est de créer une application de recherche de films à l’aide de React. Vous trouverez ci-dessous une image de ce à quoi ressemblera la candidature finale :
Qu'allez-vous apprendre
En créant cette application, vous améliorerez vos compétences React en utilisant l'API Hooks relativement nouvelle. L'exemple de projet utilise des composants React, de nombreux hooks, une API externe et bien sûr du style CSS.
Pile technologique et fonctionnalités
- Réagissez avec des crochets
- créer-réagir-app
- Jsx
- CSS
Sans utiliser de classes, ces projets vous offrent le point d'entrée idéal dans React fonctionnel et vous aideront certainement en 2020. tu peux trouver . Suivez les instructions ou personnalisez-le.
Application de chat avec Vue
Un autre projet intéressant à réaliser est de créer une application de chat en utilisant ma bibliothèque JavaScript préférée : VueJS. L'application ressemblera à ceci :
Qu'allez-vous apprendre
Dans ce didacticiel, vous apprendrez à créer une application Vue à partir de zéro : création de composants, gestion de l'état, création de routes, connexion à des services tiers et même gestion de l'authentification.
Pile technologique et fonctionnalités
- Vue
- vuex
- Routeur Vue
- Vue CLI
- Pusher
- CSS
C'est un très bon projet pour démarrer avec Vue ou améliorer vos compétences existantes pour vous lancer dans le développement en 2020. tu peux trouver .
Belle application météo avec Angular 8
Cet exemple vous aidera à créer une belle application météo en utilisant Angular 8 :
Qu'allez-vous apprendre
Ce projet vous apprendra des compétences précieuses dans la création d'applications à partir de zéro, de la conception au développement, jusqu'à une application prête à être déployée.
Pile technologique et fonctionnalités
- 8 angulaire
- Firebase
- Rendu côté serveur
- CSS avec grille et Flexbox
- Adaptabilité mobile et adaptabilité
- Mode sombre
- Belle interface
Ce que j’aime vraiment dans ce projet global, c’est qu’on n’étudie pas les choses de manière isolée. Au lieu de cela, vous apprenez l’intégralité du processus de développement, de la conception au déploiement final.
Application To-Do utilisant Svelte
Svelte est comme le petit nouveau de l'approche basée sur les composants - au moins similaire à React, Vue et Angular. Et c’est l’une des nouveautés les plus en vogue pour 2020.
Les applications To-Do ne sont pas nécessairement le sujet le plus brûlant, mais elles vous aideront vraiment à perfectionner vos compétences Svelte. Il ressemblera à ceci:
Qu'allez-vous apprendre
Ce tutoriel vous montrera comment créer une application à l'aide de Svelte 3, du début à la fin. Vous utiliserez des composants, des styles et des gestionnaires d'événements
Pile technologique et fonctionnalités
- Svelte 3
- Composants
- Styliser avec CSS
- Syntaxe ES 6
Il n'y a pas beaucoup de bons projets de démarrage Svelte, alors j'ai trouvé .
Application de commerce électronique utilisant Next.js
Next.js est le framework le plus populaire pour créer des applications React prenant en charge le rendu côté serveur prêt à l'emploi.
Ce projet va vous montrer comment créer une application e-commerce qui ressemble à ceci :
Qu'allez-vous apprendre
Dans ce projet, vous apprendrez à développer avec Next.js : créer de nouvelles pages et composants, extraire des données, styliser et déployer une application Next.
Pile technologique et fonctionnalités
- Next.js
- Composants et pages
- Échantillonnage des données
- Style
- Déploiement du projet
- RSS et SPA
C'est toujours formidable d'avoir un exemple concret, comme une application de commerce électronique, pour apprendre quelque chose de nouveau. Tu peux .
Blog multilingue à part entière avec Nuxt.js
Nuxt.js est pour Vue, ce que Next.js est pour React : un excellent framework pour combiner la puissance du rendu côté serveur et des applications monopage
L'application finale que vous pourrez créer ressemblera à ceci :
Qu'allez-vous apprendre
Dans cet exemple de projet, vous apprendrez à créer un site Web complet à l'aide de Nuxt.js, de la configuration initiale au déploiement final.
Il profite de nombreuses fonctionnalités intéressantes que Nuxt a à offrir, telles que les pages et les composants, ainsi que le style avec SCSS.
Pile technologique et fonctionnalités
- Nuxt.js
- Composants et pages
- Module Storyblock
- Myxine
- Vuex pour la gestion de l'état
- SCSS pour le style
- Intergiciels Nuxt
, qui inclut de nombreuses fonctionnalités intéressantes de Nuxt.js. Personnellement, j'aime travailler avec Nuxt, vous devriez donc l'essayer car cela fera également de vous un excellent développeur Vue.
Bloguer avec Gatsby
Gatsby est un excellent générateur de sites statiques utilisant React et GraphQL. Voici le résultat du projet :
Qu'allez-vous apprendre
Dans ce didacticiel, vous apprendrez à utiliser Gatsby pour créer un blog que vous utiliserez pour rédiger vos propres articles à l'aide de React et GraphQL.
Pile technologique et fonctionnalités
- Gatsby
- Réagir
- GraphQL
- Plugins et thèmes
- MDX/Marquage
- CSS d'amorçage
- Modèles
Si vous avez toujours voulu créer un blog, sur la façon de le réaliser en utilisant React et GraphQL.
Je ne dis pas que WordPress est un mauvais choix, mais avec Gatsby, vous pouvez créer des sites Web performants en utilisant React, ce qui est une combinaison étonnante.
Bloguer avec Gridsome
Gridsome pour Vue... D'accord, nous avions déjà ça avec Next/Nuxt.
Mais il en va de même pour Gridsome et Gatsby. Les deux utilisent GraphQL comme couche de données, mais Gridsome utilise VueJS. Il s'agit également d'un incroyable générateur de sites statiques qui vous aidera à créer de superbes blogs :
Qu'allez-vous apprendre
Ce projet vous apprendra à créer un blog simple pour démarrer avec Gridsome, GraphQL et Markdown. Il explique également comment déployer une application via Netlify.
Pile technologique et fonctionnalités
- grinçant
- Vue
- GraphQL
- Markdown
- Netlify
Ce n'est certainement pas le tutoriel le plus complet, mais il couvre les concepts de base de Gridsome et .
Lecteur audio de type SoundCloud utilisant Quasar
Quasar est un autre framework Vue qui peut être utilisé pour créer des applications mobiles. Dans ce projet, vous allez créer une application de lecture audio, par exemple :
Qu'allez-vous apprendre
Alors que d'autres projets se concentrent principalement sur les applications Web, celui-ci vous montrera comment créer une application mobile à l'aide de Vue et du framework Quasar.
Cordova devrait déjà fonctionner avec Android Studio/Xcode configuré. Sinon, le manuel contient un lien vers le site Web de Quasar où ils vous montrent comment tout configurer.
Pile technologique et fonctionnalités
- Quasar
- Vue
- Cordova
- Surfeur de vague
- Composants de l'interface utilisateur
, démontrant les capacités de Quasar pour créer des applications mobiles.
Source: habr.com