Création d'une application de prise de notes avec React et Flux

React, par Facebook, est une très belle bibliothèque pour créer des interfaces utilisateur. Le seul problème est que React ne se soucie pas de la façon dont votre application gère les données. La plupart des gens utilisent React comme V dans MV *. Ainsi, Facebook a introduit un modèle appelé Flux qui apporte une approche fonctionnelle de la gestion des données dans une application. Ce tutoriel donne une brève introduction sur le modèle de flux et montre comment créer une application de prise de notes à l'aide de React et Flux Architecture.

Les plats clés

• Flux est un modèle introduit par Facebook qui apporte une approche fonctionnelle à la gestion des données dans une application, complétant la création de React des interfaces utilisateur. Il repose sur le flux de données unidirectionnel à travers des composants clés comme les magasins et les actions.
• Le tutoriel fournit un exemple de création d'une application de prise de notes à l'aide de React, Flux et Node.js. L'application est divisée en différents composants tels que NotEApp, NotelistBox, Notelist, Note, NotrecreationBox et TextArea.
• React et le reflux sont utilisés sur le serveur pour rendre les composants du côté client et du serveur. Cette technique permet la création d'applications isomorphes qui rendent sur le serveur et se comportent également comme des applications de page.
• Dans l'architecture de flux, l'état de l'application est stocké dans les magasins. Lorsqu'une action se produit, elle envoie des données au répartiteur, qui envoie ensuite ces données au magasin concerné. Le magasin met à jour son état et émet un événement de changement, provoquant la mise à jour de tous les composants React pour que les modifications dans le magasin se mettent à jour et se renforcent.

une amorce sur le flux

Le flux repose sur le flux de données unidirectionnel. Nous avons deux composants clés dans le motif de flux:

1. Stores: un composant de magasin, comme son nom l'indique, stocke les données d'application.
2. Actions: les nouvelles données se déroulent dans les magasins par le biais d'actions. Les magasins écoutent les actions et effectuent certaines tâches (par exemple, modifiez les données) lorsque les actions sont invoquées. Cela maintient le flux de données unidirectionnel.

pour renforcer le concept, prenons un exemple du monde réel. Par exemple, dans une application de création de notes, vous pouvez avoir l'arrangement suivant:

1. Un magasin appelé Nottore qui stocke une liste de notes.
2. Vous pouvez avoir une action appelée CreenOnote. Le magasin Nottestore écoute l'action CreenOnote et met à jour sa liste avec une nouvelle note chaque fois que l'action est invoquée. Les données se déroulent dans le magasin uniquement par le biais d'actions.
3. Le Nottore déclenche un événement chaque fois que ses données changent. Votre composant React, dites NotElistComponent, écoute cet événement et met à jour la liste des notes présentées sur la vue. C'est ainsi que les données sortent du magasin.

Ainsi, le flux de données peut être visualisé comme suit:

Le plus grand avantage du modèle de flux est qu'il maintient vos données d'application stables. Comme la mutation ne peut être effectuée que par des actions, il est plus facile de comprendre comment le changement de données affecte l'ensemble de l'application.

Remarque:

Si vous avez parcouru le guide de Facebook, vous avez peut-être remarqué le concept d'un répartiteur. Un répartiteur est un registre des rappels dans les magasins. Lorsqu'une action est invoquée, le répartiteur y répond et envoie les données associées à tous les magasins enregistrés. Les magasins vérifient ensuite le type d'action et effectuez des tâches en conséquence.

Le processus ci-dessus a été grandement simplifié par une bibliothèque appelée reflux. Il supprime le concept de répartiteurs en rendant les actions à écouter. Ainsi, dans le reflux, les magasins peuvent écouter directement les actions et répondre à leur invocation.

pour comprendre le motif de flux entièrement, créons une application simple de prise de notes avec reflux, react et node.js.

Configuration d'un environnement de développement

Nous utiliserons Utiliser React et Reflux comme modules de nœud et utiliserons Browserify pour les rendre également disponibles du côté client. Alors, voici comment nous avons configuré l'environnement:

1. Nous utiliserons Browserify pour regrouper nos composants, actions et magasins React dans un package .js côté client.
2. Nous utiliserons Grunt Watch pour détecter les changements dans les composants ci-dessus et réécouter la navigation à chaque fois qu'un changement se produit.
3. Grunt Nodemon est utilisé pour redémarrer le serveur chaque fois que le fichier .jsx ou .js est modifié afin que vous n'ayez pas à le faire manuellement.

Vous pouvez télécharger le code de GitHub et ouvrir GruntFile.js pour en savoir plus sur les tâches. Une fois que vous avez le référentiel sur votre machine, vous pouvez simplement exécuter NPM Installer pour installer les modules de nœud requis. Exécutez les commandes suivantes et démarrez le développement:

grunt watch
grunt nodemon

L'application est accessible sur https: // localhost: 8000 et fonctionne comme suit:

Travailler sur l'application

Commençons par divers composants de l'application. Voici comment nous pouvons diviser notre interface utilisateur en divers composants:

Voici ce que fait chaque composant:

1. NotEAPP: Il s'agit du composant racine qui comprend deux composants enfants: Nothelistbox et NOCREATIONBOX.
2. NotheListbox: a un seul noton de composant enfant. Il récupère une liste de notes de Flux Store et les transmet à Notelist.
3. NOTELIST: Responsable du rendu de chaque composant de note. Passe un objet de note à chaque composant de note.
4. Remarque: Affiche les détails d'un seul élément de note. Dans ce cas, nous affichons simplement le titre. Vous pouvez facilement aller de l'avant et afficher d'autres détails comme la date, le sous-titre, etc.
5. NOSECREATIONBOX: Ce composant rend un composant TextArea et y transmet un ID de note actuellement édité, le cas échéant.
6. TextArea: fournit un TextArea pour accepter la saisie de l'utilisateur. Passe le texte de la note à NOCREATION BOX pour la sauvegarde.

Création d'actions

Utilisons le reflux pour créer certaines actions. Si vous ouvrez des actions / notEACTIONS.js, vous pouvez voir comment les actions sont créées. Voici l'extrait:

grunt watch
grunt nodemon

reflux.CreateActions est utilisé pour créer des actions. Nous exportons ces actions afin de les utiliser dans nos composants.

Création du magasin

Nous avons un seul magasin appelé Nottore qui maintient un tableau de notes. Le code suivant est utilisé pour créer le magasin (Stores / Nottore.js):

<span>var Reflux = require('reflux');
</span>
<span>var NoteActions = Reflux.createActions([
</span>  <span>'createNote',
</span>  <span>'editNote'
</span><span>]);
</span>
module<span>.exports = NoteActions;</span>

Comme vous le voyez, nous écoutons deux actions, Creenote et EditNote, à l'intérieur de la méthode init. Nous enregistrons également des rappels pour exécuter lorsque les actions sont invoquées. Le code pour l'ajout / mise à jour d'une note est assez simple. Nous exposons également les getters pour récupérer la liste des notes. Enfin, le magasin est exporté afin qu'il puisse être utilisé dans notre composant.

Création de composants

Tous nos composants React sont situés dans le répertoire React / Components. J'ai déjà montré la structure globale de l'interface utilisateur. Vous pouvez consulter le code source téléchargé pour en savoir plus sur chaque composant. Ici, je vais vous montrer l'essentiel (c'est-à-dire comment nos composants invoquent les actions et interagissent avec le magasin).

Nothelistbox:

Ce composant obtient une liste de notes de Nottore et les alimente en composant de note qui rend ensuite les notes. Voici à quoi ressemble le composant:

<span>var Reflux = require('reflux');
</span><span>var NoteActions = require('../actions/NoteActions');
</span>
<span>var _notes = []; //This is private notes array
</span>
<span>var NoteStore = Reflux.createStore({
</span>  <span>init: function() {
</span>    <span>// Here we listen to actions and register callbacks
</span>    <span>this.listenTo(NoteActions.createNote, this.onCreate);
</span>    <span>this.listenTo(NoteActions.editNote, this.onEdit);
</span>  <span>},
</span>  <span>onCreate: function(note) {
</span>    _notes<span>.push(note); //create a new note
</span>
    <span>// Trigger an event once done so that our components can update. Also pass the modified list of notes.
</span>    <span>this.trigger(_notes); 
</span>  <span>},
</span>  <span>onEdit: function(note) {
</span>    <span>// Update the particular note item with new text.
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === note._id) {
</span>        _notes<span>[i].text = note.text;
</span>        <span>this.trigger(_notes);
</span>        <span>break;
</span>      <span>}
</span>    <span>}
</span>  <span>},
</span>
  <span>//getter for notes
</span>  <span>getNotes: function() {
</span>    <span>return _notes;
</span>  <span>},
</span>
  <span>//getter for finding a single note by id
</span>  <span>getNote: function(id) {
</span>    <span>for (var i = 0; i < _notes.length; i++) {
</span>      <span>if(_notes[i]._id === id) {
</span>        <span>return _notes[i];
</span>      <span>}
</span>    <span>}
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteStore; //Finally, export the Store</span>

Lorsque le composant monte, nous commençons à écouter l'événement de changement de Nottore. Ceci est diffusé chaque fois qu'il y a une mutation dans la liste des notes. Notre composant écoute cet événement afin qu'il puisse renforcer les notes en cas de changement. La ligne suivante enregistre un auditeur:

<span>var React = require('react');
</span><span>var NoteList = require('./NoteList.jsx');
</span><span>var NoteStore = require('../../stores/NoteStore');
</span>
<span>var NoteListBox = React.createClass({
</span>  <span>getInitialState: function() {
</span>    <span>return { notes: NoteStore.getNotes() };
</span>  <span>},
</span>  <span>onChange: function(notes) {
</span>    <span>this.setState({
</span>      <span>notes: notes
</span>    <span>});
</span>  <span>},
</span>  <span>componentDidMount: function() {
</span>    <span>this.unsubscribe = NoteStore.listen(this.onChange);
</span>  <span>},
</span>  <span>componentWillUnmount: function() {
</span>    <span>this.unsubscribe();
</span>  <span>},
</span>  <span>render: function() {
</span>    <span>return (
</span>        <span><div className="col-md-4">
</span>            <span><div className="centered"><a href="" onClick={this.onAdd}>Add New</a></div>
</span>            <span><NoteList ref="noteList" notes={this.state.notes} onEdit={this.props.onEdit} />
</span>        <span></div>
</span>    <span>);
</span>  <span>}
</span><span>});
</span>
module<span>.exports = NoteListBox;</span>

Ainsi, chaque fois qu'il y a une méthode de changement Onchange du composant. Cette méthode reçoit une liste de notes mise à jour et modifie l'état.

<span>this.unsubscribe = NoteStore.listen(this.onChange);</span>

comme celle-ci.State.Notes est passé comme un accessoire au note de note, chaque fois que l'État change de note de note de note.

Enfin, nous écrivons ce.unSubscribe () à l'intérieur du composantwillunmount pour supprimer l'auditeur.

Donc, c'est ainsi que Nothelist reste toujours à jour en écoutant l'événement de changement du magasin. Voyons maintenant comment une note est créée / modifiée.

NOCREATIONBOX:

Jetez un œil à la méthode suivante de NOCREATIONBOX:

grunt watch
grunt nodemon

Cette méthode est appelée chaque fois que le bouton de sauvegarde est cliqué. Il accepte NOTteText comme son premier paramètre. Si un ID est passé comme deuxième paramètre, nous savons qu'il s'agit d'une opération d'édition et invoquez la notation d'action.editNote (). Sinon, nous générons un ID pour la nouvelle note et appelons NotEACTIONS.CREENTENOTE (). N'oubliez pas que notre Nottore écoute ces actions. Selon l'action, le rappel de magasin approprié est exécuté. Une fois que les données sont mutées, le magasin déclenche un événement de changement et notre notation de composant se met à jour.

C'est ainsi que les données se déroulent dans le système et sort par la suite dans une application basée sur le flux.

Pourquoi utiliser React sur le serveur

Vous vous demandez peut-être pourquoi j'ai utilisé React et Reflux sur le serveur. L'une des fonctionnalités intéressantes de React est que les composants peuvent être rendus à la fois sur le client et le serveur. En utilisant cette technique, vous pouvez créer des applications isomorphes qui rendent sur serveur et également se comporter comme des applications à page unique. Bien que cela ne soit pas nécessaire pour une application de notes, vous pouvez facilement utiliser cette configuration pour créer des applications isomorphes complexes à l'avenir.

Je vous encourage à passer par le code source et à l'améliorer davantage car il y a beaucoup de place pour les améliorations. Si vous avez des questions, faites-le moi savoir dans les commentaires.

Merci d'avoir lu!

Des questions fréquemment posées sur la création d'une application de prise de notes avec React et Flux

Quel est le rôle du flux dans la création d'une application de prise de notes avec React?

Le flux est un modèle de conception que Facebook utilise en interne avec React. Il complète les composants de vue composables de React en utilisant un flux de données unidirectionnel. Dans le contexte de la création d'une application de prise de notes, Flux joue un rôle crucial dans la gestion du flux de données. Il garantit que les données se déplacent dans une seule direction, des actions aux magasins, puis aux vues. Cela rend l'application plus prévisible et plus facile à comprendre, car elle évite la complexité du partage des données entre les composants et la confusion de la liaison des données bidirectionnelle.

Comment réagir le fonctionnement avec le flux dans la création d'une application de prise de notes ?

Réagir et Flux travaillent ensemble pour créer une application de prise de notes en divisant les responsabilités. React est responsable du rendu des vues et de la réponse aux entrées des utilisateurs, tandis que Flux gère le flux de données de l'application. Lorsqu'un utilisateur interagit avec les composants React (comme l'ajout d'une nouvelle note), il déclenche une action. Cette action met à jour le magasin (les données centrales de l'application) via un répartiteur. Le magasin émet alors un événement de changement, provoquant la mise à jour et la réapprovisionnement des composants de React si nécessaire.

Quels sont les composants clés de l'architecture de flux?

L'architecture de flux se compose de quatre composants principaux: actions, répartiteur, magasins et vues (composants de réaction). Les actions sont des charges utiles d'informations qui envoient des données de l'application au répartiteur. Le répartiteur est une sorte de centre central qui gère tous les flux de données dans l'application. Les magasins contiennent l'état d'application et la logique, et ils sont mis à jour par le répartiteur. Enfin, les vues (React Composants) écoutent les changements dans les magasins et se renvoient lorsque ces changements se produisent.

Comment puis-je gérer l'état de mon application de prise de notes en utilisant Flux?

En flux, l'état de votre application est généralement stocké dans les magasins. Lorsqu'une action se produit (comme l'ajout d'une nouvelle note), elle envoie des données au répartiteur. Le répartiteur envoie ensuite ces données au magasin concerné. Le magasin met à jour son état et émet un événement de changement. Tous les composants React qui écoutent les changements dans le magasin se mettront ensuite à jour et se renforceront, reflétant le nouvel état de l'application.

Comment le flux aide-t-il à maintenir l'évolutivité de l'application de prise de notes?

L'architecture de flux aide à maintenir l'évolutivité de l'application de prise de notes en fournissant un flux de données clair et prévisible. Cela rend l'application plus facile à comprendre et à modifier à mesure qu'elle se développe en complexité. Le flux de données unidirectionnel garantit que les changements dans une partie de l'application n'affectent pas de façon inattendue d'autres parties, réduisant la probabilité de bogues et facilitant la test et la débogage de l'application. Application de prise de notes à l'aide de React et Flux?

Les interactions utilisateur dans une application de prise de notes construite avec React et Flux sont généralement gérées par le biais d'actions. Lorsqu'un utilisateur interagit avec un composant React (comme cliquer sur un bouton pour ajouter une nouvelle note), il déclenche une action. Cette action envoie des données au répartiteur, qui met à jour le magasin compétent. Le magasin émet alors un événement de changement, ce qui fait que les composants de réaction d'écoute se mettent à jour et à renvoyer.

Comment puis-je tester mon application de prise de notes construite avec React et Flux?

Tester une note de note -Application créée avec React et Flux peut être effectuée à l'aide de diverses bibliothèques et cadres de test. Pour les composants de réaction des tests unitaires, des bibliothèques comme la plaisanterie ou l'enzyme peuvent être utilisées. Pour tester les actions et les magasins de flux, vous pouvez utiliser la plaisanterie avec des bibliothèques comme Redux-Mock-Store ou Flux-Mock Store. Les tests de bout en bout peuvent être effectués à l'aide d'outils comme Cypress ou Puppeteer.

Comment puis-je déboguer mon application de prise de notes construite avec React et Flux?

Débogage d'une application de prise de notes construite avec React et Flux peuvent être effectués en utilisant divers outils. L'extension React Developer Tools pour Chrome et Firefox vous permet d'inspecter la hiérarchie des composants React, les accessoires et l'état. Pour le flux de débogage, vous pouvez enregistrer les actions et les modifications énoncées de la console, ou utiliser un outil comme Redux Devtools si vous utilisez Redux comme implémentation de flux.

Puis-je utiliser d'autres bibliothèques ou frameworks avec React et Flux lors de la création de mon application de prise de notes?

Oui, vous pouvez utiliser d'autres bibliothèques ou frameworks avec React et Flux lors de la création de votre application de prise de notes. Par exemple, vous pouvez utiliser une bibliothèque de routage comme React Router for Navigation, une bibliothèque de test comme Jest for Test ou une bibliothèque d'interface utilisateur comme Material-UI pour styliser votre application. Le choix des bibliothèques ou des frameworks dépendra de vos besoins et préférences spécifiques.

Comment puis-je optimiser les performances de mon application de prise de notes construite avec React et Flux?

Optimisation des performances d'un L'application de prise de notes construite avec React et Flux peut impliquer diverses stratégies. Une stratégie courante consiste à garantir que les composants ne renforcent que lorsque cela est nécessaire, en gérant soigneusement l'état et les accessoires et en utilisant le purecomposant de React ou devrait composer le cas échéant. D'autres stratégies pourraient inclure l'optimisation du temps de chargement initial de l'application par division du code ou l'optimisation des données en utilisant une bibliothèque comme Relay ou Apollo.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!