Fermer

mai 21, 2018

Toutes choses réagissent


Découvrez tout, des bases à la pointe de React – Render Props, API Context, Suspense, CSS-in-JS, Progressive Web Apps, bibliothèques d'interface utilisateur et plus encore.

 Line__Blue 2.3 "title =" Line__Blue 2.3 "/></p data-recalc-dims=

React Roadmap to Success

React est l'un des frameworks JavaScript les plus populaires actuellement utilisés, et même si vous ne l'utilisez pas vous-même, vous êtes sans doute au moins raisonnablement familier avec son existence. React est une bibliothèque open-source utilisée pour le développement web, principalement pour le développement d'applications de pages individuelles (React), et beaucoup d'autres développements ont été faits pour augmenter l'offre de base de React, et l'écosystème est assez grand. De nombreux tutoriels, sites et autres ressources qui vous emmèneront des éléments de base aux sujets avancés pour React.En fait, il y a tellement de ressources et de nouveaux développements disponibles qu'il peut être difficile de les suivre tous. assemblé un ensemble de ressources et d'informations clés sur React qui sera utile aussi bien aux débutants qu'aux développeurs expérimentés.

 Line__Blue 2.3 "title =" Ligne__Blue 2.3 "/></p data-recalc-dims=

Table des matières

  1. Réagir sur la Toile
  2. Qu'est ce que React?
  3. D'où vient la réaction?
  4. What's the Latest et le plus grand avec React?
  5. Réagit le bon choix pour mon application?
  6. Ça sonne bien Maintenant que dois-je faire?
  7. Création de l'expérience utilisateur
  8. Ressources pour rester à jour avec React

 Line__Blue 2.3 "title =" Line__Blue 2.3 "/></p data-recalc-dims=

 Réagissez Hot Topics" title = "Réagissez Hot Topics" style = "float: right; margin-left: 20px; "/> 1. Réagir sur les sujets brûlants</h2 data-recalc-dims=

Voici les dernières nouvelles sur React, les plus récentes et les plus intéressantes, et nous avons commencé par jeter un coup d'œil sur les sujets actuels et particuliers. N'oubliez pas de revenir ici souvent: le développement Web est un environnement dynamique et les nouveautés et les nouveautés peuvent changer fréquemment: nous énumérons ici quelques sujets d'actualité clés, mais nous les mettrons à jour si nécessaire! 19659018] Render Props

Lorsque vous utilisez des composants dans React, vous pouvez réutiliser votre code, mais il n'est peut-être pas clair comment partager les données entre ces composants Un argument de rendu est un accessoire dont la valeur est une fonction. qui permet de partager du code entre composants Un composant avec une fonction de rendu appellera un prop de rendu, qui prend une fonction qui retourne un élément React, puis le composant utilise ceci au lieu d'utiliser sa propre logique de rendu. les deux utilisent des accessoires de rendu. documentation sur les actes vous pouvez voir un excellent exemple de code de en utilisant les accessoires de rendu sur un composant pour décider dynamiquement quoi rendre. Voici un extrait de ce à quoi cela ressemble:


 class MouseTracker extends React.Component {
render () {
revenir (

!

( )} />
) } }

Vous n'avez pas besoin d'utiliser un accessoire spécifiquement appelé "render". En principe, toute fonction qui indique à un composant ce qu'il doit rendre sera considérée comme un accessoire de rendu. Sachez que lorsque vous utilisez les accessoires de rendu à l'intérieur d'un React.PureComponent la comparaison des props peu profondes renvoie false pour les nouveaux accessoires, ce qui signifie que chaque rendu générera une nouvelle valeur pour votre prop de rendu.

API de contexte

La transmission de données entre composants est un obstacle courant lors de l'utilisation de composants dans n'importe quelle structure. L'une des solutions de React est de tirer parti de l'API Context. Habituellement, il faudrait transférer les données de haut en bas des composants parents vers les composants enfants. Plus vos composants deviennent gros et imbriqués, plus cela sera compliqué. En utilisant createContext vous pouvez passer une valeur en profondeur dans l'arborescence des composants sans avoir à explorer explicitement les composants. La documentation React conseille aux utilisateurs de n'utiliser cette approche que lorsque vous avez besoin des mêmes données accessibles dans de nombreux composants à plusieurs niveaux. Lorsque profitant de l'API Context vous utiliserez d'abord React.createContext (const {Provider, Consumer} = React.createContext (defaultValue);), un fournisseur et un consommateur.

Rendu Asynchrone & Suspense

In a tldr; version, la nouvelle fonction Suspense de React vous donne le pouvoir de retarder le rendu d'une partie de votre application jusqu'à ce qu'une certaine condition soit remplie. Cela a été introduit par Dan Abramov de l'étape JSConf.is avec un avertissement que l'API va changer mais qu'elle utilisait une vraie version de React. En plus de suspendre le rendu, afin de donner aux utilisateurs une meilleure expérience, quelle que soit leur vitesse de calcul ou leur connexion réseau, React a maintenant un moyen de rendre les mises à jour plus asynchrones. Avec la nouvelle API, React peut lancer le rendu mais frapper le serveur pour voir s'il y a un événement de priorité supérieure qu'il devrait gérer en premier. Comme Dan le décrit, ils ont "construit une manière générique de s'assurer que les mises à jour prioritaires comme les entrées des utilisateurs ne soient pas bloquées par des mises à jour de basse priorité." Pour voir tout cela, regardez les démos de Dan CSS-in-JS

CSS-in-JS ressemble exactement à ce qu'il est – au lieu de créer des fichiers séparés pour le style, le CSS est placé dans les fichiers JS du composant. L'écriture de CSS à l'intérieur de vos fichiers JS peut vous sembler erronée et contraire à vos normes habituelles de code propre, mais certains pensent que cela est bénéfique car cela permet de garder tout ce dont vous avez besoin pour un composant au même endroit. CSS réel est généré lorsque vous utilisez des bibliothèques CSS-in-JS et certains ajoutent même le support pour les fonctionnalités CSS non-natives comme l'imbrication. Cette approche vous permet de rester dans le contexte de vos composants, d'ajouter de l'isolation, des sélecteurs de portée, des préfixes de fournisseurs, des tests unitaires, etc. Voici quelques-unes des bibliothèques CSS-in-JS les plus populaires: Composants stylés JSS-React glamourous Aphrodite et Styletron .

Progressive Web Apps

Progressive Web Apps (PWA) représente une nouvelle façon d'aborder le développement web, en particulier pour les applications Web mobiles et réactives. En suivant quelques nouvelles API Web et un certain nombre de pratiques et de directives de développement les PWA ont pour but de permettre aux développeurs de créer des applications web mobiles qui se comportent beaucoup plus comme des applications installées de manière native.

matière? Parce que, en réalité, les utilisateurs utilisent principalement des applications natives, et non des applications Web, sur leurs téléphones. Selon comScore, les utilisateurs passent 87% de leur temps sur les appareils dans les applications natives et seulement 13% sur le Web mobile.

Et bien que nous ne puissions généraliser complètement pourquoi, les applications natives ont un certain nombre de des avantages qui rendent les utilisateurs plus enclins à interagir avec eux sur une expérience Web mobile, y compris les icônes de lancement de l'écran d'accueil, les notifications push, le support hors ligne et les meilleures performances. De manière générale, aux yeux des consommateurs, les applications natives sont plus fiables.

Mais l'autre aspect de cette pièce est que l'utilisation native des applications est très concentrée sur quelques applications, pour la plupart des consommateurs. De nombreuses études ont montré que les utilisateurs ont tendance à n'utiliser que quelques applications installées régulièrement, ce qui signifie que tout ce temps et tout l'argent que vous souhaitez dépenser pour créer une application entièrement native imitant ce que fait déjà votre application web pourrait être un gâchis. Heureusement, les PVA permettent aux développeurs Web de créer facilement des applications Web mobiles qui présentent de nombreux avantages des applications natives, y compris l'installation et la prise en charge hors ligne, sans avoir à créer une application complète. application mobile native.

En pratique, les PWA se concentrent sur un nouveau niveau de soin pour les expériences que vos utilisateurs ont lors de l'utilisation de votre application. Selon Google, l'un des principaux moteurs des PWA, les PWA ont pour but de fournir des expériences utilisateur fiables, rapides et engageantes. Ce sont des expériences qui ont la portée du Web, et qui:

Pour plus d'informations sur les PWA, consultez page PWA de Google . Pour plus d'informations sur la création d'un PWA ou l'adaptation d'une application existante au modèle PWA, vous pouvez suivre cette liste de contrôle de Google .

De bonnes ressources sont disponibles pour vous aider à créer un PWA, et vous pouvez trouver une grande série de tutoriel ici avec des exemples de code que vous pouvez télécharger. Enfin, vous aurez besoin d'une interface utilisateur pour votre PWA, et quoi de mieux que UI Kendo avec le soutien des PWA ! Pour plus d'informations sur la création d'un PWA avec React et Kendo UI, vous pouvez lire ce guide GIF .

Travailleurs de services

L'une des technologies clés dans le cadre de la PWA est les travailleurs des services. Un technicien de maintenance est essentiellement un proxy réseau programmable dans le navigateur, ce qui vous permet de "capturer" lorsque le navigateur doit effectuer une demande réseau et soit envoyer la demande, soit récupérer les informations demandées depuis un cache ou un magasin local. Cela signifie que les techniciens de maintenance permettent aux développeurs d'offrir une expérience hors connexion en détectant les conditions hors ligne ou à haute latence dans une application et en y réagissant. Pour une introduction en profondeur aux travailleurs de service, consultez cet article de Matt Gaunt chez Google.

Angular a un support intégré pour les techniciens de service et c'est quelque chose que vous devriez envisager ]même si vous n'optez pas pour l'approche PWA complète.

Les techniciens de maintenance ont une prise en charge dans Chrome et Firefox, mais ne sont pas encore pris en charge dans Safari ou Edge. C'est sur le point de changer, cependant. À partir de la version 11.1 pour les ordinateurs de bureau et 11.3 pour iOS, Safari prendra en charge les techniciens de maintenance, ce qui représente un énorme avantage pour les développeurs Web mobiles qui créent des PWA. La version Edge 17 devrait également prendre en charge les techniciens de maintenance

 Line__Blue 2.3 "title =" Line__Blue 2.3 "/></p data-recalc-dims=

2. Qu'est-ce que React?  React Logo" title = "React Logo" style = "float: left; margin-right: 20px;" /></h2 data-recalc-dims=

React est très populaire dans le monde du développement web, et à moins que vous ayez vécu dans une grotte sur une île éloignée, vous ne pouvez pas avoir manqué d'entendre parler de il. Et même là, si vous aviez un bon internet dans la grotte, vous en aurez toujours entendu parler. Jetons un coup d'œil à React, c'est l'histoire, et les concepts de base dans React qui le font réagir.

React a été créé à l'origine sur Facebook et, autre que la brève bosse sur la route en 2017 sur les termes de licence, a connu une croissance solide depuis son introduction. Selon les statistiques que vous regardez, React peut effectivement être appelé le framework JavaScript le plus populaire aujourd'hui. Quelles sont les principales caractéristiques de React? Ceux-ci incluent:

  1. DOM virtuel
  2. JSX
  3. Composants
  4. Props
  5. État
  6. Cycle de vie

DOM virtuel

Nous allons passer un peu de temps ici parce que c'est très concept important. Comme le DOM (Document Object Model) réel, le DOM virtuel React est un arbre de nœuds, sauf qu'il est virtuel – il ne s'affiche pas directement. Le DOM virtuel contient également une liste d'éléments, de contenu et d'attributs représentés par des objets JavaScript ayant diverses propriétés.

Chaque composant React possède une fonction de rendu, et lorsque nous appelons cette fonction de rendu, un arbre de nœuds est créé à partir de ce composant React particulier. Il peut s'agir d'un composant unique ou de composants de rendu enfants. Quoi qu'il en soit, tout l'arbre est répertorié. Ce même arbre est également mis à jour lorsque les modèles de données dans les composants changent. Cela inclut les mises à jour d'état ou toute autre donnée dans les composants.

C'est le DOM virtuel. Maintenant, plongons dans la façon dont le vrai DOM est mis à jour. Les mises à jour comportent trois étapes. Tout d'abord, chaque fois que quelque chose change dans une arborescence de composants, le DOM virtuel sera mis à jour et rendu. Après la mise à jour du DOM virtuel, la différence peut être déterminée entre le nouveau DOM virtuel et l'ancien DOM virtuel, nous savons donc ce qui a réellement changé. L'étape suivante consiste à mettre à jour le DOM réel avec la liste des modifications dérivées des modifications DOM virtuelles.

C'est un gros problème car la mise à jour du DOM réel peut être très coûteuse en temps et en ressources. De cette façon, nous effectuons tous nos changements un par un sur le DOM virtuel d'abord, et les modifications finales sont apportées au DOM réel (et coûteux) seulement une fois à la fin.

JSX

JSX est le mélange d'un peu de JavaScript avec un peu de HTML – vraiment une extension de JavaScript. Il vous permet de rationaliser votre code en mélangeant les deux le cas échéant et est utilisé par React.createElement pour produire des éléments React d'une manière plus efficace.

Composants

L'un des concepts clés dans React et d'autres frameworks est le composant. Pour avoir une idée de la façon dont les composants varient entre les frameworks, vous pouvez lire cette comparaison de composants dans différents frameworks pour plus d'informations.

Le concept de base derrière les composants est qu'ils ressemblent beaucoup aux fonctions JavaScript, et ils vous permettent de diviser l'interface utilisateur en éléments indépendants réutilisables. Chaque composant a une structure de base qui inclut un ensemble d'entrées et un ensemble d'accessoires, puis il renvoie des éléments React. Les composants retourneront toujours une fonction de rendu qui inclut les éléments que nous voulons afficher. Les composants sont très basiques à leur base mais ils peuvent devenir très complexes si nécessaire. Chaque composant a une fonction de rendu et c'est un élément clé pour chaque composant dans React.

Props

Les attributs et composants obtiennent leurs propriétés globales à partir des accessoires. C'est ainsi que nous traitons différents attributs et comment nous transmettons des données à un composant. Lorsque nous passons un nom par son nom, nous pouvons facilement l'utiliser lors du rendu d'un composant particulier en utilisant this.props.name .

Lifecycle

React nous donne un ensemble complet de hooks de cycle de vie qui nous pouvons nous abonner et utiliser pour contrôler chaque composant. Ceux-ci incluent des fonctions pour monter, démonter et mettre à jour. Ils nous permettent d'avoir un contrôle complet sur le cycle de vie de chaque composant individuel. Par exemple, le constructeur peut être utilisé pour définir un état initial pour un composant, et ensuite nous pouvons utiliser d'autres événements auxquels nous pouvons nous connecter.

State

Last but not least, les composants ont chacun un état qu'ils gèrent aussi bien. L'état peut être extrait du composant et défini dans le composant. La mise à jour et le traitement de l'état du composant relèvent de la responsabilité du développeur.

 Line__Blue 2.3 "title =" Ligne__Blue 2.3 "/></p data-recalc-dims=

 Où est-ce que React est venu de" title = "Où est-ce que React vient" style = "float: right; margin-left: 20px;" / > 3. D'où vient la réaction?</h2 data-recalc-dims=

Comme Angular et Vue, React est un framework JavaScript populaire. Ces frameworks sont conçus pour faciliter la vie des développeurs lorsqu'ils créent des applications. React inclut un certain nombre de fonctionnalités qui facilitent le développement d'applications modernes et facilitent les tâches complexes. À la fin, en utilisant React vous pouvez être plus productif et même créer une meilleure expérience utilisateur car le développement de fonctionnalités complexes sera plus facile.

React a été créé par Jordan Walke sur Facebook, et il est toujours dirigé par Facebook, bien qu'il existe une communauté open source active. Il a été inspiré par XHP, qui est un système basé sur PHP, ainsi que d'autres sources. Peter Hunt voulait utiliser React sur Instagram et a contribué à créer une version plus neutre (non-Facebook). Facebook a ajouté des ressources à l'équipe de développement et a décidé d'ouvrir le projet.

Il a été publié en version open source au JSConf en mai 2013. La version 3 a été publiée en juillet 2013, la version 12 en novembre 2014, la version 14 en octobre 2015, la version 15 en avril 2016, la version 16 en septembre 2017. Vous remarquerez peut-être que j'ai ignoré quelques versions de ma liste parce que je n'ai répertorié qu'une version majeure par an, et vous pouvez voir que cela s'est déplacé assez rapidement au début lorsque de nouvelles fonctionnalités majeures ont été ajoutées. À mesure que le produit mûrit, le rythme des principales versions ralentit.

React n'essaie pas d'être un cadre d'application complet, et certaines personnes vont se demander s'il s'agit bien d'un «framework» (nous le pensons). React se concentre sur l'aide à la construction de l'interface utilisateur.

Il est à noter que React a eu sa part de controverse. La version publique initiale utilisait une licence standard Apache 2.0. En 2014, Facebook l'a remplacé par une licence BSD à trois clauses, associée à une clause de brevet distincte. Il y a eu beaucoup de discussions pour savoir si cela a réellement donné à Facebook un contrôle inacceptable. En réponse aux préoccupations des utilisateurs, Facebook a modifié la clause de brevet en 2015 pour être plus clair et plus permissif. Cependant, Apache a considéré cela incompatible avec leur licence et la controverse a continué. Facebook a refusé de reconsidérer et les projets de plusieurs entreprises de haut niveau, comme WordPress, ont annoncé qu'ils s'éloignaient de React. En septembre 2017, Facebook a annoncé qu'il passerait à une licence MIT pour répondre aux préoccupations des utilisateurs. React version 16 a été publié à la fin de Septembre 2017 sous la licence MIT.

Aujourd'hui, plus de 1000 personnes sont répertoriées comme auteurs React sur les pages Github React .

 Ligne__Blue 2.3 "title =" Ligne__Blue 2.3 "/></p data-recalc-dims=

 Dernière et plus grande avec React" title = "Dernière et plus grande avec React" style = "float: left; margin-right: 20px;" / > 4. Quel est le dernier et le meilleur avec React?</h2 data-recalc-dims=

Au moment d'écrire ces lignes, la version majeure actuelle de React est la version 16.3.2 (publiée le 16 avril 2018). Cette version et la version précédente 16.3.1 (publiée le 3 avril 2018) étaient des correctifs de bogues et des versions d'amélioration mineures. Cependant, un certain nombre de nouvelles fonctionnalités ont été ajoutées en 16.3.0 (publié le 29 mars 2018). Cette version inclut de nouvelles API, notamment une API ref forwarding, une meilleure API ref et une API de contexte officielle. Il existe également de nouvelles méthodes de cycle de vie pour vous aider à modifier les méthodes de cycle de vie héritées et vous pouvez en apprendre plus à leur sujet dans la brève présentation ci-dessous. Au cours des années, il a été étendu avec le soutien de fonctionnalités plus avancées de manière à ce qu'il n'était pas prévu à l'origine, et cela a causé des complications dans d'autres domaines. Plusieurs méthodes sont obsolètes, notamment componentWillMount, componentWillReceiveProps et componentWillUpdate. Afin de minimiser les perturbations, le changement sera progressif. Les avertissements de dépréciation seront activés dans une future version de 16.x mais ils continueront à fonctionner normalement jusqu'à la version 17. Dans la version 17, il sera toujours possible de les utiliser, mais ils recevront un préfixe UNSAFE_ . Un script automatisé pour les renommer sera également fourni. Dans le même temps, plusieurs nouveaux cycles de vie sont ajoutés . Ceux-ci incluent:

  • getDerivedStateFromProps – une alternative plus sûre à l'ancien composant componentWillReceiveProps.
  • getSnapshotBeforeUpdate – supporte en toute sécurité la lecture des propriétés du DOM avant la mise à jour.
        
        

Nouvelles API

  • API ForwardRef : cette fonctionnalité permet à certains composants de transmettre (refiler) une ref à ses enfants. Cela aidera à résoudre les problèmes d'encapsulation des composants qui peuvent survenir.
  • API CreateRef : Dans le passé, l'API callback était la méthode recommandée pour gérer les refs sur la chaîne ref SAPI. L'API ref de chaîne, cependant, était plus facile à utiliser mais avait quelques inconvénients. Maintenant, avec la version 16.3, il y a une nouvelle option pour gérer les refs qui offre la commodité de l'API de chaîne ref sans les inconvénients. Les références de rappel seront toujours prises en charge
  • API de contexte officiel : Une nouvelle API de contexte a été incluse dans cette version qui prend en charge la vérification de type statique et les mises à jour approfondies. Alors que l'ancienne API de contexte expérimental continuera de fonctionner dans toute la version 16.x, une nouvelle version est maintenant disponible.

Pour une liste détaillée et plus d'informations sur ce qui est inclus dans la dernière version de React, vous pouvez consultez la page de release officielle .

 Line__Blue 2.3 "title =" Ligne__Blue 2.3 "/></p data-recalc-dims=

 Angulaire vs Réagir contre Vue" title = "Angulaire vs Réagir contre Vue" style = "float: droite; marge-gauche: 20px;" / ></p data-recalc-dims=

5. Est-ce que Réagir le bon choix pour mon application?

Pour être juste, il existe différents cadres, car ils résolvent différents problèmes de différentes manières. Une partie de la raison de choisir un cadre plutôt qu'un autre concerne l'environnement, l'expérience et la préférence. Mais il existe des différences très réelles qui peuvent rendre plus ou moins approprié en fonction de vos objectifs spécifiques. Il y a un certain nombre de raisons de choisir React, y compris ces 5 principales raisons . Mais finalement, il y a quelques questions que vous devez considérer:

  • React est-il toujours populaire?
  • Réagir? Angulaire? Vue?
  • Quelles sont les perspectives à long terme de React?

Jetons un coup d'œil à ces questions.

React Still Popular?

Les technologies vont et viennent rapidement dans le monde JavaScript. Ce qui est chaud cette année pourrait être oublié l'année prochaine, et les nouvelles technologies apparaîtront pour prendre leur place. Si nous voulons adopter une nouvelle technologie, nous voulons nous assurer qu'elle sera disponible pendant un certain temps et qu'elle bénéficiera d'un soutien. Alors, où React s'inscrit-il dans le cycle de vie de la nouvelle technologie? Tout d'abord, il y a un effort de développement très actif autour de React et une feuille de route claire. Si nous regardons toutes les statistiques disponibles, nous voyons aussi que React continue de croître rapidement. Les enquêtes 2017 State of JavaScript et 2018 StackOverflow developer par exemple, le montrent clairement. Réagir est là pour rester.

Réagir? Angulaire? Vue?

Si vous regardez React, vous réfléchissez probablement à la façon dont React se compare aux autres frameworks couramment utilisés. Concrètement, cela signifie regarder Angular et Vue. Les informations sur cette page sont principalement axées sur React mais il vaut la peine de jeter un coup d'œil à Angular et Vue pour voir comment elles se comparent à React pour votre application. Ces derniers mots sont importants: pour votre application. L'un n'est pas meilleur ou pire que les autres, mais ils sont différents et ces différences peuvent les rendre meilleurs ou pires pour un environnement spécifique et une application spécifique. Il y a un certain nombre de facteurs à prendre en compte lors de ce choix.

Peut-être encore plus important, vous devez examiner ces facteurs tels qu'ils s'appliquent dans votre propre organisation. Quelles compétences votre équipe a-t-elle? Quelles exigences futures devrez-vous prendre en compte? Quelle sera la disposition à long terme de cette application? Aurez-vous besoin de partager du code avec d'autres équipes à l'avenir? Les considérations pratiques peuvent souvent l'emporter sur les préoccupations techniques. Cela dit, voici quelques points à considérer lorsque vous décidez d'un cadre:

  • Si vous voulez un cadre qui se penche sur l'interface utilisateur qui fonctionne bien avec un écosystème d'outils et de bibliothèques, Réagissez est probablement votre meilleur choix
  • Si vous cherchez une solution tout-en-un pour une application complexe, Angular est un choix solide
  • Si vous cherchez une solution qui vous sente comme Angular à bien des égards, inclut des valeurs par défaut simples et peut être étendu à mesure que votre application devient plus complexe, l'approche progressive de Vue en fait un choix solide
  • Si vous avez besoin de quelque chose backing, Angular et React fournissent juste cela
  • Si votre équipe de développement parle couramment C # ou Java et préfère les langages statiques, ils seront plus à l'aise avec Angulaire et TypeScript
  • Si votre équipe est composée d'expe Réagir sera un lieu de travail confortable
  • Si votre équipe insiste sur la séparation de HTML, JS et CSS, ou opère dans un Vue est un bon choix
  • Si votre organisation a besoin d'un soutien à long terme et d'un objectif de sécurité, Angular est le meilleur choix.

Comme pour la plupart des choses, votre contexte est la clé, ici. Il n'y a pas de choix incorrect entre Angular, React et Vue, tant qu'il est informé par vos besoins. Lorsque vous considérez votre choix, nous recommandons ce livre blanc pour une comparaison approfondie ainsi que la vidéo suivante, qui fournit un aperçu de quelques autres frameworks web populaires. Ce blog donne aussi une belle liste de style de table comparant les caractéristiques angulaires directement à React.

Déplacer vers des applications d'une seule page (SPA)

Un autre mot à la mode populaire pour les applications Web est l'application de page unique (SPA). C'est, bien sûr, exactement ce qu'il dit. Une application qui consiste en une seule page – une seule URL. Alors pourquoi est-ce quelque chose qui vaut la peine d'en parler? Cela vient vraiment avec les applications web devenant plus complexes et plus modulaires dans leur structure. À un certain point, il est plus facile de recharger des parties de la page que de charger une nouvelle page, de relire la date, d'initialiser des choses, etc. Donc, vous initialisez votre environnement une fois, puis permutez des parties de la page changez la fonction de la page. Plus vite, plus facile, plus mince. Certains utilisateurs les détestent – pas d'URL à mettre en signet. Et c'est quelque chose à penser.

Pourquoi suis-je même en train de le mentionner ici? Si vous regardez React, vous travaillez avec une application web d'une complexité raisonnable. Si votre application est toujours répartie sur plusieurs pages, pensez à la placer sur une seule page. Vous économiserez en temps système ce qui se traduira par des temps de chargement et de réponse plus rapides pour vos utilisateurs. Inversement, si vous commencez à utiliser une application d'une seule page, déterminez si vos utilisateurs bénéficieront effectivement de plusieurs pages (et de plusieurs URL compatibles avec les signets). Aussi – examinez si votre équipe SEO serait plus heureuse avec plusieurs pages. Peut-être pas si vous affichez simplement des enregistrements de données tirés d'une base de données, ou si vous êtes derrière un pare-feu et que Google ne peut pas vous voir de toute façon. Ce qui est bien et mal dépend de votre situation unique, mais assurez-vous de vous déplacer ou non vers un SPA basé sur les bonnes raisons.

 Line__Blue 2.3 "title =" Line__Blue 2.3 "/></p data-recalc-dims=

 Démarrer avec React "title =" Premiers pas avec React "style =" float: left; margin-right: 20px; "/> 6. Super! Que dois-je faire?</h2 data-recalc-dims=

Vous avez choisi React comme cadre pour votre prochain projet. Génial! Mais la vie est plus compliquée que le simple codage et vous devriez vraiment prendre du recul et considérer votre environnement de développement avec certaines des décisions clés que vous devez prendre lorsque vous planifiez votre application React . Un peu de planification à l'avance vous permettra d'économiser beaucoup de travail plus tard.

  • Vos outils de développement logiciel, y compris les suiveurs de bogues, le contrôle de version, la communication et la gestion des tâches
  • Les gestionnaires de paquets ou les outils qui aident à suivre et gérer les dépendances de sources externes
  • Linters et vérificateurs de style, pour maintenir la cohérence au sein de votre équipe
  • Composants de l'interface utilisateur comme Material, Bootstrap et Kendo UI
  • Outils de test pour les unités de code et même la fin test de navigateur de bout en bout
  • Vos cibles et votre stratégie de distribution – construisez-vous une application mobile, un PWA?
  • Guides de style, gestion de l'état et performance

Une fois que vous avez considéré ces facteurs et plus encore, vous êtes prêt à rouler avec React. Heureusement, il y a un grand tutoriel et quelques docs géniaux sur le site web de React lui-même.

Vous voulez approfondir certains sujets spécifiques? Voici un blog qui se penche sur les trois meilleurs conseils sur la gestion de l'état dans React et un sur les trois meilleurs conseils de performance pour l'utilisation de React .

 Line__Blue 2.3 "title =" Ligne__Blue 2.3 "/></p data-recalc-dims=

 Construire l'interface utilisateur de votre application React" title = "Construire l'interface utilisateur de votre application React" style = "float: droite; Marge-gauche: 20px;" /> 7. Création de l'expérience utilisateur</h2 data-recalc-dims=

Aujourd'hui, vos applications Web forment le visage de votre entreprise et ne sont plus simplement un outil. Cela signifie que la simple fourniture de fonctionnalités de base ne suffit pas, vous devez fournir une expérience utilisateur exceptionnelle. Certains outils de base peuvent vous aider à y parvenir, comme Bootstrap et Material, mais les applications modernes ont besoin de beaucoup plus de fonctionnalités. Heureusement, nous avons l'interface utilisateur de Kendo.

Utilisation de l'interface utilisateur de Kendo pour construire votre interface utilisateur

Que vous ayez décidé d'utiliser Material, Bootstrap ou une autre bibliothèque d'interface utilisateur, vos besoins fonctionnels et d'interface vont bien au-delà des composants HTML intégrés. Au lieu de créer vos propres composants ou de les assembler à partir d'un désordre non coordonné de bibliothèques et de composants à une seule entité, l'approche la plus rapide consiste à utiliser une bibliothèque robuste de composants d'interface utilisateur. Kendo UI fournit la bibliothèque d'interface utilisateur la plus populaire des composants d'interface utilisateur native et spécifique, et mérite d'être considérée pour votre prochaine application. Voici quelques-unes des caractéristiques stellaires de Kendo UI pour React:

  • Performance et vitesse: les composants sont conçus spécifiquement pour React, et construits à partir de la base pour React. Cela leur permet de tirer pleinement parti des capacités de performances natives du framework.
  • Installation et mises à jour: L'interface utilisateur de Kendo pour React est installée en tant que paquets npm discrets. Il est facile et discret d'obtenir les derniers bits: pas besoin d'installations longues. Cela signifie également que le dernier code est toujours disponible immédiatement.
  • Nous faisons cela depuis longtemps. Progress a créé des composants d'interface utilisateur pendant 15 ans. Kendo UI a été utilisé dans des tonnes d'applications afin que vous obteniez toute cette expérience et les commentaires des utilisateurs pliés dans les composants Kendo UI React.

Check out Kendo UI for React yourself by downloading a free trial today.

Line__Blue 2.3" title="Line__Blue 2.3"/></p data-recalc-dims=

React Resources" title="React Resources" style="float: left; margin-right: 20px;"/>8. Resources for Staying Current with React</h2 data-recalc-dims=

Web technology is a fast-paced environment and it is important to stay on top of new developments and changes. In addition to the information provided on these pages, we have included a list of other resources you can use to stay on top.

And, of course, you can keep an eye on what people are saying about React. Here are a few suggestions (some of the React team members) for who to follow on Twitter, and there are lots of other people who are contributors to the React community that you will find: 

Line__Blue 2.3" title="Line__Blue 2.3"/></p data-recalc-dims=

Authors

Thank you for reading our React resource created by John Willoughby and Tara Z. Manicsic. We hope you have found it useful. Questions or comments? Leave a comment below – we love to hear from you! 

Back to Top


Comments are disabled in preview mode.


[ad_2]
Source link