Léon  Peltier

Léon Peltier

1657555200

Créer Un Outil De Suivi Des Tâches Avec SolidJS Et TypeScript

SolidJS devient rapidement le centre d'attention de la communauté du développement Web. Avec sa gestion d'état simple, sa réactivité fine et ses hautes performances, SolidJS s'est placé sur un piédestal pour d'autres frameworks JavaScript.

SolidJS est tout ce que les développeurs de React ont demandé, et dans cet article, je vais vous guider dans la création d'un outil de suivi des tâches avec SolidJS

Conditions préalables

Pour suivre ce didacticiel, vous aurez besoin de connaissances sur JavaScript et TypeScript, les modules Node.js et les composants des frameworks frontend.

Pourquoi SolidJS ?

Si vous avez déjà travaillé avec React, SolidJS vous semblera très familier. Lorsque React Hooks a été annoncé pour la première fois, j'étais si heureux parce que je pensais que cela résoudrait notre crise de gestion de l'État . Les crochets ont facilité la gestion locale des états dans les composants, mais la gestion globale des états est restée complexe.

Il était encore difficile pour les composants déconnectés de partager des données et de nombreuses bibliothèques se sont présentées pour essayer de résoudre le problème de gestion d'état, ce qui a accru la fatigue du développement et ajouté une complexité inutile à notre base de code.

J'ai également vu le même problème se produire dans d'autres frameworks frontend; c'est comme si la gestion globale de l'état était une réflexion après coup, plutôt que quelque chose qui était prévu depuis le début.

Avec SolidJS, les choses sont différentes. La gestion globale des états est aussi simple que de créer un état et de l'exporter. Il n'y a pas besoin de configuration complexe ou de bibliothèque tierce.

SolidJS utilise également JSX, l'extension de syntaxe populaire de type HTML pour JavaScript. Cela facilite la gestion de la logique de l'interface utilisateur, des événements et des changements d'état. Couplé à cela, SolidJS compile en JavaScript brut, il n'y a donc pas besoin d'un DOM virtuel, ce qui le rend relativement plus rapide que des frameworks comme React et Angular.

SolidJS a également un flux de travail simple. Les composants ne s'affichent qu'une seule fois, comme en JavaScript, il est donc plus facile de prédire le résultat de votre code.

Un autre énorme avantage de SolidJS est qu'il s'appuie sur d'autres frameworks Web, il émule donc fièrement les bonnes parties et améliore les moins bonnes parties.

 

Allons-y et configurons notre application SolidJS pour apprendre à créer une application Web avec SolidJS étape par étape.

Configurer une application SolidJS avec TypeScript

Pour configurer une application SolidJS sur votre ordinateur local, vous devez installer Node.js . Si vous l'avez déjà installé, l'exécution de la commande suivante sur votre terminal devrait renvoyer votre version actuelle de Node.js :

node --version

Ensuite, créons une nouvelle application SolidJS en exécutant la commande suivante sur notre terminal :

npx degit solidjs/templates/ts task-tracker

L'utilisation solidjs/templates/tsgénère une application Solid/TypeScript. Pour JavaScript, vous devrez changer la commande en solidjs/templates/js.

Après avoir exécuté la commande, vous devriez voir un message de réussite qui ressemble à ceci :

> cloned solidjs/templates#HEAD to task-tracker

Maintenant, allez-y et ouvrez l'application générée dans l'éditeur de code ou l'IDE de votre choix. Voici à quoi devrait ressembler la structure de l'application :

Vue de la structure de l'application générée

Notez que notre application SolidJS utilise Vite comme outil de construction par défaut et pnpm comme gestionnaire de packages par défaut. Ces outils combinés offrent une excellente expérience de développement pour le rendu des composants, le temps de démarrage des applications et la gestion des packages.

Notre composant d'application vit actuellement à l'intérieur du ./src/App.tsxfichier :

import type { Component } from 'solid-js'
...
const App: Component = () => {
  return (
    <div>
      ...
    </div>
  );
}

export default App

Tout d'abord, nous importons le Componenttype à partir solid-jsduquel est ensuite utilisé comme type pour notre Appcomposant.

Les composants de SolidJS sont des fonctions JavaScript. Ils sont réutilisables et peuvent être personnalisés à l'aide d'accessoires, qui sont similaires aux paramètres/arguments de fonction.

À l'intérieur du ./src/index.tsxfichier, nous rendons notre Appcomposant :

import { render } from 'solid-js/web'
import App from './App'

render(() => <App />, document.getElementById('root') as HTMLElement)

La render()méthode from solid-js/webattend deux arguments :

  1. Une fonction qui renvoie notre <App />composant
  2. Un élément HTML

Lorsque vous naviguez vers le ./index.htmlfichier, vous verrez la racine divet l'utilisation de notre ./src/index.tsxfichier via la <script />balise :

...
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="/src/index.tsx" type="module"></script>
</body>

Pour exécuter notre application SolidJS, nous devrons d'abord installer nos packages en exécutant la commande pnpm installsur notre terminal, puis pnpm devdémarrer notre application en mode développement. Vous devriez voir un message de réussite qui ressemble à ceci :

 vite v2.9.9 dev server running at:

 > Local: http://localhost:3001/
 > Network: use `--host` to expose

 ready in 378ms.

Lorsque vous naviguez vers http://localhost:3001ou l'URL affichée sur votre terminal, vous devriez voir une page semblable à celle-ci :

Modifiez src/App.tsx et enregistrez pour recharger.

Installation de Bootstrap pour styliser notre application SolidJS

Maintenant que nous avons configuré avec succès notre application SolidJS, installons Bootstrap pour le style afin que nous n'ayons pas à nous soucier de CSS.

Pour installer Bootstrap, exécutez la commande suivante sur votre terminal :

pnpm install bootstrap

Ensuite, nous utiliserons la ligne de code suivante pour importer Bootstrap dans notre ./src/index.tsxfichier :

import 'bootstrap/dist/css/bootstrap.min.css'

Nous pouvons également supprimer l' ./index.cssimportation actuelle car nous n'en aurons pas besoin. Notre index.tsxfichier devrait maintenant ressembler à ceci :

import { render } from 'solid-js/web'
import App from './App'
import 'bootstrap/dist/css/bootstrap.min.css'

render(() => <App />, document.getElementById('root') as HTMLElement)

Utilisation de JSX pour structurer notre suivi des tâches

Utilisons JSX pour structurer notre suivi des tâches. Dans le ./src/App.tsxfichier, remplacez ce que vous avez actuellement par ceci :

import type { Component } from 'solid-js'

const App: Component = () => {
  return (
    <div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>

      <form class="mb-5 row row-cols-2 justify-content-center">
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />

        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>

      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <div class="row row-cols-3 mb-3 justify-content-center">
          <button class="btn btn-danger w-auto">X</button>
          <div class="bg-light p-2 mx-2">Push code to GitHub</div>
          <input type="checkbox" role="button" class="form-check-input h-auto px-3" />
        </div>
      </div>
    </div>
  )
}
export default App

Notre code JSX contient le formulaire de saisie de nouvelles tâches et la section des tâches. Pour l'instant, nous utilisons des données codées en dur, mais nous apprendrons comment rendre notre application dynamique afin que lorsqu'un utilisateur saisit une nouvelle tâche dans le formulaire et clique sur le bouton Soumettre , notre application SolidJS se met à jour avec les nouvelles données. .

Lorsque vous revenez dans votre navigateur, votre page devrait maintenant ressembler à ceci :

Application SolidJS dans le navigateur

Ensuite, apprenons à créer et à gérer l'état dans SolidJS. Nous le ferons en créant un taskListétat et nous créerons également des fonctions pour ajouter de nouvelles tâches à notre état, les supprimer et mettre à jour leur état d'achèvement.

Création et mise à jour de l'état dans SolidJS

SolidJS a un createSignalcrochet pour créer un état. Par exemple, créons un taskListétat pour héberger nos tâches. Dans le ./src/App.tsxfichier, nous allons commencer par créer un type pour chaque tâche :

const App: Component = () => {
  type Task = {
    text: string
    text: string
    completed: boolean
  }

  return (...)
}

Ensuite, nous allons créer notre taskListétat :

import { Component, createSignal } from 'solid-js'

...
const [taskList, setTaskList] = createSignal([] as Task[])
...

Le createSignal()crochet renvoie un tableau contenant deux variables, taskListet setTaskList. Contrairement à ce que vous verrez avec React Hooks , les deux variables sont des fonctions. Nous appelons la taskList()fonction pour accéder à nos données de tâche et la setTaskList()fonction pour mettre à jour notre taskListétat.

Ajouter des tâches à notre état

Maintenant que nous avons créé notre taskListétat, créons une fonction pour ajouter des tâches à notre état. Nous le nommerons addTask:

const [taskList, setTaskList] = createSignal([] as Task[])

const addTask = (e: Event) => {
  e.preventDefault()

  const taskInput = document.querySelector('#taskInput') as HTMLInputElement

  const newTask: Task = {
    id: Math.random().toString(36).substring(2),
    text: taskInput.value,
    completed: false,
  }

  setTaskList([newTask, ...taskList()])
  taskInput.value = ''
}

Dans notre addTask()fonction, nous avons commencé par utiliser la e.preventDefault()méthode pour empêcher le comportement de rechargement par défaut lorsque nous soumettons notre formulaire. Nous obtenons également notre taskInputde l' <input />élément avec un ID de "taskInput".

Pour chaque nouvelle tâche, nous créons un objet nommé newTaskavec les propriétés id, textet completed. Lorsqu'une nouvelle tâche est créée, notre fonction utilise la Math.random()méthode pour générer une chaîne aléatoire pour notre ID de tâche et définit la completedvaleur par défaut sur false.

Enfin, la setTaskList()fonction sera appelée avec un tableau comme argument, en ajoutant l' état newTaskactuel taskList.

Créons également une fonction pour supprimer des tâches :

...
const deleteTask = (taskId: string) => {
  const newTaskList = taskList().filter((task) => task.id !== taskId)
  setTaskList(newTaskList)
}

Lorsque nous appelons notre deleteTask()fonction avec l'ID de tâche comme argument, elle filtrera notre taskListétat et renverra toutes les tâches sauf celle avec l'ID que nous voulons supprimer. Ensuite, la setTaskList()méthode sera appelée avec la nouvelle liste de tâches comme argument.

Pour addTask()utiliser notre fonction, nous ajouterons un onSubmitécouteur d'événement à notre <form />balise dans le code JSX, qui appellera notre fonction chaque fois que le bouton d'envoi sera cliqué.

...
return (
 <div class="container mt-5 text-center">
    <h1 class="mb-4">Whattodo!</h1>
    <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
     ...
    </form>
  </div>
)

Voyons ensuite comment nous pouvons afficher nos taskListdonnées dans notre application chaque fois qu'un utilisateur ajoute une nouvelle tâche.

Contrôler le flux et parcourir les données en boucle dans SolidJS

SolidJS a un <For />composant pour parcourir les données en boucle. Bien que la méthode JavaScript Array.map()fonctionne, notre composant mappera toujours l' taskListétat lors de sa mise à jour. Avec le <For />composant, notre application ne mettra à jour que la partie exacte du DOM qui doit être mise à jour.

Remplaçons ce que nous avons actuellement dans les Tâches divpar ceci :

...
<div>
  <h4 class="text-muted mb-4">Tasks</h4>
  <For each={taskList()}>
    {(task: Task) => (
      <div class="row row-cols-3 mb-3 justify-content-center">
        <button class="btn btn-danger w-auto">X</button>
        <div class="bg-light p-2 mx-2">{task.text}</div>
        <input type="checkbox" checked={task.completed} role="button" class="form-check-input h-auto px-3" />
      </div>
    )}
  </For>
</div>
...

Remarquez comment nous enveloppons notre taskListdans le <For />composant. Nous avons également mis à jour le texte de la tâche de "Pousser le code vers GitHub" à task.textpartir de notre taskparamètre.

Nous pouvons maintenant continuer et utiliser la deleteTask()méthode que nous avons créée précédemment. Nous allons ajouter un onClickécouteur d'événement au bouton Supprimer :

...
<button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
  X
</button>
...

Si nous passons à notre navigateur, notre application SolidJS devrait maintenant fonctionner comme ceci :

Ajouter des tâches en tapant dans la barre des tâches

Mise à jour du statut des tâches dans notre état imbriqué

SolidJS a un createStore()crochet pour créer et gérer des états imbriqués. Mais avant d'en parler, voyons comment nous pouvons mettre à jour des tâches préexistantes dans notre createSignal()état. Nous allons créer une nouvelle fonction nommée toggleStatusjuste sous la deleteTask()fonction :

...
const toggleStatus = (taskId: string) => {
  const newTaskList = taskList().map((task) => {
    if (task.id === taskId) {
      return { ...task, completed: !task.completed }
    }
    return task
  })
  setTaskList(newTaskList)
}

Notre toggleStatus()fonction attend un taskIdargument, que nous utiliserons pour obtenir la tâche particulière que nous voulons marquer comme terminée ou non terminée. Nous utilisons également la map()méthode pour parcourir notre taskListétat, et si nous trouvons la tâche qui a le même ID que le paramètre taskId, nous changerons sa completedpropriété à l'opposé de ce qui est actuellement là. Donc, si true, on y arrivera false, et si false, true.

Enfin, nous utilisons la setTaskList()méthode pour mettre à jour l' taskListétat avec nos nouvelles taskListdonnées.

Avant d'utiliser notre toggleStatus()fonction, ajoutons une distinction entre les tâches terminées et les tâches non terminées dans notre code JSX. Nous ajouterons la classe Bootstrap "text-decoration-line-through text-success" au texte de la tâche si sa completedpropriété est true. Dans notre code JSX, juste en dessous du bouton Supprimer , mettons à jour le texte divde la tâche comme suit :

<div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
  {task.text}
</div>

Ensuite, nous ajouterons un onClickécouteur d'événement à la balise d'entrée de la case à cocher, où nous appellerons la toggleStatus()méthode à chaque clic :

<input
  type="checkbox"
  checked={task.completed}
  role="button"
  class="form-check-input h-auto px-3"
  onClick={() => {
    toggleStatus(task.id)
  }}
/>

Le code JSX <App />renvoyé par notre composant devrait maintenant ressembler à ceci :

<div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>
      <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />
        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>
      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <For each={taskList()}>
          {(task: Task) => (
            <div class="row row-cols-3 mb-3 justify-content-center">
              <button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
                X
              </button>
              <div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
                {task.text}
              </div>
              <input
                type="checkbox"
                checked={task.completed}
                role="button"
                class="form-check-input h-auto px-3"
                onClick={() => {
                  toggleStatus(task.id)
                }}
              />
            </div>
          )}
        </For>
      </div>
    </div>

Lorsque nous passons à notre navigateur, notre application SolidJS devrait pouvoir fonctionner comme ceci :

Ajouter des tâches, les cocher et les supprimer dans l'application Web

Utilisation createStorepour la réactivité imbriquée dans SolidJS

Avant de conclure, voyons comment nous pouvons utiliser le createStoreHook dans SolidJS pour créer et mettre à jour l'état imbriqué. Au lieu de cartographier notre état, de créer une nouvelle liste de tâches et de remplacer toutes nos données d'état par la nouvelle liste, nous pouvons à la place mettre à jour directement la tâche qui doit être mise à jour à l'aide de son ID.

Pour utiliser le createStoreHook, nous allons d'abord l'importer depuis solid-js/store:

import { createStore } from 'solid-js/store'

Notez que createSignala été importé de solid-js, tandis que createStoreest importé de solid-js/store.

Ensuite, nous mettrons à jour notre taskListcréation d'état à ceci :

const [taskList, setTaskList] = createStore([] as Task[])

La boutique que nous créons avec le createStore()Hook n'est pas une fonction, contrairement à celle créée avec le createSignal()Hook. Nous allons donc modifier toutes les instances de taskListdans notre code en juste taskListau lieu de taskList(). La deuxième variable, setTaskList, reste une fonction, et nous l'utiliserons pour mettre à jour notre boutique.

Continuons et utilisons la setTaskList()méthode pour modifier la toggleStatus()fonction :

const toggleStatus = (taskId: string) => {
  setTaskList(
    (task) => task.id === taskId,
    'completed',
    (completed) => !completed,
  )
}

Dans la toggleStatus()fonction, nous passons trois arguments à la setTaskList()méthode :

  1. Une fonction pour obtenir la tâche particulière que nous voulons mettre à jour. Dans notre cas, nous renvoyons la tâche qui a le même identifiant que le taskIdparamètre
  2. La propriété que nous voulons modifier —completed
  3. Pour le troisième argument, nous passons une autre fonction qui prend la valeur actuelle de notre propriété choisie et renvoie une nouvelle valeur. Ici, on revient à l'opposé de ce qu'il est actuellement

Lorsque nous revenons au navigateur, notre application devrait toujours fonctionner comme prévu :

L'application de suivi des tâches fonctionne toujours

Conclusion

Dans cet article, nous avons couvert les bases de SolidJS en créant un outil de suivi des tâches. L'approche de Solid pour créer des applications Web est assez impressionnante et relativement simple par rapport à d'autres frameworks frontaux comme Angular et React. Avec une compilation directe vers de vrais nœuds DOM et sans avoir besoin d'un DOM virtuel, les applications Web construites avec SolidJS ont l'avantage peu commun d'être rapides.

Cela dit, SolidJS est encore nouveau, et son écosystème et sa communauté sont petits comparés à ceux de frameworks comme React, Vue et Angular, il y a donc de fortes chances que vous soyez le premier à rencontrer des problèmes ou à avoir besoin de fonctionnalités spécifiques , des bibliothèques ou des intégrations. Mais SolidJS se développe rapidement et de nombreuses personnes ont déjà commencé à migrer des applications existantes vers le framework. La communauté SolidJS est assez réactive et vous ne devriez avoir aucun problème pour obtenir de l'aide lorsque vous en avez besoin.

Source : https://blog.logrocket.com/build-task-tracker-solidjs-typescript/

#solidjs #typescript

What is GEEK

Buddha Community

Créer Un Outil De Suivi Des Tâches Avec SolidJS Et TypeScript
Léon  Peltier

Léon Peltier

1657555200

Créer Un Outil De Suivi Des Tâches Avec SolidJS Et TypeScript

SolidJS devient rapidement le centre d'attention de la communauté du développement Web. Avec sa gestion d'état simple, sa réactivité fine et ses hautes performances, SolidJS s'est placé sur un piédestal pour d'autres frameworks JavaScript.

SolidJS est tout ce que les développeurs de React ont demandé, et dans cet article, je vais vous guider dans la création d'un outil de suivi des tâches avec SolidJS

Conditions préalables

Pour suivre ce didacticiel, vous aurez besoin de connaissances sur JavaScript et TypeScript, les modules Node.js et les composants des frameworks frontend.

Pourquoi SolidJS ?

Si vous avez déjà travaillé avec React, SolidJS vous semblera très familier. Lorsque React Hooks a été annoncé pour la première fois, j'étais si heureux parce que je pensais que cela résoudrait notre crise de gestion de l'État . Les crochets ont facilité la gestion locale des états dans les composants, mais la gestion globale des états est restée complexe.

Il était encore difficile pour les composants déconnectés de partager des données et de nombreuses bibliothèques se sont présentées pour essayer de résoudre le problème de gestion d'état, ce qui a accru la fatigue du développement et ajouté une complexité inutile à notre base de code.

J'ai également vu le même problème se produire dans d'autres frameworks frontend; c'est comme si la gestion globale de l'état était une réflexion après coup, plutôt que quelque chose qui était prévu depuis le début.

Avec SolidJS, les choses sont différentes. La gestion globale des états est aussi simple que de créer un état et de l'exporter. Il n'y a pas besoin de configuration complexe ou de bibliothèque tierce.

SolidJS utilise également JSX, l'extension de syntaxe populaire de type HTML pour JavaScript. Cela facilite la gestion de la logique de l'interface utilisateur, des événements et des changements d'état. Couplé à cela, SolidJS compile en JavaScript brut, il n'y a donc pas besoin d'un DOM virtuel, ce qui le rend relativement plus rapide que des frameworks comme React et Angular.

SolidJS a également un flux de travail simple. Les composants ne s'affichent qu'une seule fois, comme en JavaScript, il est donc plus facile de prédire le résultat de votre code.

Un autre énorme avantage de SolidJS est qu'il s'appuie sur d'autres frameworks Web, il émule donc fièrement les bonnes parties et améliore les moins bonnes parties.

 

Allons-y et configurons notre application SolidJS pour apprendre à créer une application Web avec SolidJS étape par étape.

Configurer une application SolidJS avec TypeScript

Pour configurer une application SolidJS sur votre ordinateur local, vous devez installer Node.js . Si vous l'avez déjà installé, l'exécution de la commande suivante sur votre terminal devrait renvoyer votre version actuelle de Node.js :

node --version

Ensuite, créons une nouvelle application SolidJS en exécutant la commande suivante sur notre terminal :

npx degit solidjs/templates/ts task-tracker

L'utilisation solidjs/templates/tsgénère une application Solid/TypeScript. Pour JavaScript, vous devrez changer la commande en solidjs/templates/js.

Après avoir exécuté la commande, vous devriez voir un message de réussite qui ressemble à ceci :

> cloned solidjs/templates#HEAD to task-tracker

Maintenant, allez-y et ouvrez l'application générée dans l'éditeur de code ou l'IDE de votre choix. Voici à quoi devrait ressembler la structure de l'application :

Vue de la structure de l'application générée

Notez que notre application SolidJS utilise Vite comme outil de construction par défaut et pnpm comme gestionnaire de packages par défaut. Ces outils combinés offrent une excellente expérience de développement pour le rendu des composants, le temps de démarrage des applications et la gestion des packages.

Notre composant d'application vit actuellement à l'intérieur du ./src/App.tsxfichier :

import type { Component } from 'solid-js'
...
const App: Component = () => {
  return (
    <div>
      ...
    </div>
  );
}

export default App

Tout d'abord, nous importons le Componenttype à partir solid-jsduquel est ensuite utilisé comme type pour notre Appcomposant.

Les composants de SolidJS sont des fonctions JavaScript. Ils sont réutilisables et peuvent être personnalisés à l'aide d'accessoires, qui sont similaires aux paramètres/arguments de fonction.

À l'intérieur du ./src/index.tsxfichier, nous rendons notre Appcomposant :

import { render } from 'solid-js/web'
import App from './App'

render(() => <App />, document.getElementById('root') as HTMLElement)

La render()méthode from solid-js/webattend deux arguments :

  1. Une fonction qui renvoie notre <App />composant
  2. Un élément HTML

Lorsque vous naviguez vers le ./index.htmlfichier, vous verrez la racine divet l'utilisation de notre ./src/index.tsxfichier via la <script />balise :

...
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="/src/index.tsx" type="module"></script>
</body>

Pour exécuter notre application SolidJS, nous devrons d'abord installer nos packages en exécutant la commande pnpm installsur notre terminal, puis pnpm devdémarrer notre application en mode développement. Vous devriez voir un message de réussite qui ressemble à ceci :

 vite v2.9.9 dev server running at:

 > Local: http://localhost:3001/
 > Network: use `--host` to expose

 ready in 378ms.

Lorsque vous naviguez vers http://localhost:3001ou l'URL affichée sur votre terminal, vous devriez voir une page semblable à celle-ci :

Modifiez src/App.tsx et enregistrez pour recharger.

Installation de Bootstrap pour styliser notre application SolidJS

Maintenant que nous avons configuré avec succès notre application SolidJS, installons Bootstrap pour le style afin que nous n'ayons pas à nous soucier de CSS.

Pour installer Bootstrap, exécutez la commande suivante sur votre terminal :

pnpm install bootstrap

Ensuite, nous utiliserons la ligne de code suivante pour importer Bootstrap dans notre ./src/index.tsxfichier :

import 'bootstrap/dist/css/bootstrap.min.css'

Nous pouvons également supprimer l' ./index.cssimportation actuelle car nous n'en aurons pas besoin. Notre index.tsxfichier devrait maintenant ressembler à ceci :

import { render } from 'solid-js/web'
import App from './App'
import 'bootstrap/dist/css/bootstrap.min.css'

render(() => <App />, document.getElementById('root') as HTMLElement)

Utilisation de JSX pour structurer notre suivi des tâches

Utilisons JSX pour structurer notre suivi des tâches. Dans le ./src/App.tsxfichier, remplacez ce que vous avez actuellement par ceci :

import type { Component } from 'solid-js'

const App: Component = () => {
  return (
    <div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>

      <form class="mb-5 row row-cols-2 justify-content-center">
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />

        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>

      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <div class="row row-cols-3 mb-3 justify-content-center">
          <button class="btn btn-danger w-auto">X</button>
          <div class="bg-light p-2 mx-2">Push code to GitHub</div>
          <input type="checkbox" role="button" class="form-check-input h-auto px-3" />
        </div>
      </div>
    </div>
  )
}
export default App

Notre code JSX contient le formulaire de saisie de nouvelles tâches et la section des tâches. Pour l'instant, nous utilisons des données codées en dur, mais nous apprendrons comment rendre notre application dynamique afin que lorsqu'un utilisateur saisit une nouvelle tâche dans le formulaire et clique sur le bouton Soumettre , notre application SolidJS se met à jour avec les nouvelles données. .

Lorsque vous revenez dans votre navigateur, votre page devrait maintenant ressembler à ceci :

Application SolidJS dans le navigateur

Ensuite, apprenons à créer et à gérer l'état dans SolidJS. Nous le ferons en créant un taskListétat et nous créerons également des fonctions pour ajouter de nouvelles tâches à notre état, les supprimer et mettre à jour leur état d'achèvement.

Création et mise à jour de l'état dans SolidJS

SolidJS a un createSignalcrochet pour créer un état. Par exemple, créons un taskListétat pour héberger nos tâches. Dans le ./src/App.tsxfichier, nous allons commencer par créer un type pour chaque tâche :

const App: Component = () => {
  type Task = {
    text: string
    text: string
    completed: boolean
  }

  return (...)
}

Ensuite, nous allons créer notre taskListétat :

import { Component, createSignal } from 'solid-js'

...
const [taskList, setTaskList] = createSignal([] as Task[])
...

Le createSignal()crochet renvoie un tableau contenant deux variables, taskListet setTaskList. Contrairement à ce que vous verrez avec React Hooks , les deux variables sont des fonctions. Nous appelons la taskList()fonction pour accéder à nos données de tâche et la setTaskList()fonction pour mettre à jour notre taskListétat.

Ajouter des tâches à notre état

Maintenant que nous avons créé notre taskListétat, créons une fonction pour ajouter des tâches à notre état. Nous le nommerons addTask:

const [taskList, setTaskList] = createSignal([] as Task[])

const addTask = (e: Event) => {
  e.preventDefault()

  const taskInput = document.querySelector('#taskInput') as HTMLInputElement

  const newTask: Task = {
    id: Math.random().toString(36).substring(2),
    text: taskInput.value,
    completed: false,
  }

  setTaskList([newTask, ...taskList()])
  taskInput.value = ''
}

Dans notre addTask()fonction, nous avons commencé par utiliser la e.preventDefault()méthode pour empêcher le comportement de rechargement par défaut lorsque nous soumettons notre formulaire. Nous obtenons également notre taskInputde l' <input />élément avec un ID de "taskInput".

Pour chaque nouvelle tâche, nous créons un objet nommé newTaskavec les propriétés id, textet completed. Lorsqu'une nouvelle tâche est créée, notre fonction utilise la Math.random()méthode pour générer une chaîne aléatoire pour notre ID de tâche et définit la completedvaleur par défaut sur false.

Enfin, la setTaskList()fonction sera appelée avec un tableau comme argument, en ajoutant l' état newTaskactuel taskList.

Créons également une fonction pour supprimer des tâches :

...
const deleteTask = (taskId: string) => {
  const newTaskList = taskList().filter((task) => task.id !== taskId)
  setTaskList(newTaskList)
}

Lorsque nous appelons notre deleteTask()fonction avec l'ID de tâche comme argument, elle filtrera notre taskListétat et renverra toutes les tâches sauf celle avec l'ID que nous voulons supprimer. Ensuite, la setTaskList()méthode sera appelée avec la nouvelle liste de tâches comme argument.

Pour addTask()utiliser notre fonction, nous ajouterons un onSubmitécouteur d'événement à notre <form />balise dans le code JSX, qui appellera notre fonction chaque fois que le bouton d'envoi sera cliqué.

...
return (
 <div class="container mt-5 text-center">
    <h1 class="mb-4">Whattodo!</h1>
    <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
     ...
    </form>
  </div>
)

Voyons ensuite comment nous pouvons afficher nos taskListdonnées dans notre application chaque fois qu'un utilisateur ajoute une nouvelle tâche.

Contrôler le flux et parcourir les données en boucle dans SolidJS

SolidJS a un <For />composant pour parcourir les données en boucle. Bien que la méthode JavaScript Array.map()fonctionne, notre composant mappera toujours l' taskListétat lors de sa mise à jour. Avec le <For />composant, notre application ne mettra à jour que la partie exacte du DOM qui doit être mise à jour.

Remplaçons ce que nous avons actuellement dans les Tâches divpar ceci :

...
<div>
  <h4 class="text-muted mb-4">Tasks</h4>
  <For each={taskList()}>
    {(task: Task) => (
      <div class="row row-cols-3 mb-3 justify-content-center">
        <button class="btn btn-danger w-auto">X</button>
        <div class="bg-light p-2 mx-2">{task.text}</div>
        <input type="checkbox" checked={task.completed} role="button" class="form-check-input h-auto px-3" />
      </div>
    )}
  </For>
</div>
...

Remarquez comment nous enveloppons notre taskListdans le <For />composant. Nous avons également mis à jour le texte de la tâche de "Pousser le code vers GitHub" à task.textpartir de notre taskparamètre.

Nous pouvons maintenant continuer et utiliser la deleteTask()méthode que nous avons créée précédemment. Nous allons ajouter un onClickécouteur d'événement au bouton Supprimer :

...
<button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
  X
</button>
...

Si nous passons à notre navigateur, notre application SolidJS devrait maintenant fonctionner comme ceci :

Ajouter des tâches en tapant dans la barre des tâches

Mise à jour du statut des tâches dans notre état imbriqué

SolidJS a un createStore()crochet pour créer et gérer des états imbriqués. Mais avant d'en parler, voyons comment nous pouvons mettre à jour des tâches préexistantes dans notre createSignal()état. Nous allons créer une nouvelle fonction nommée toggleStatusjuste sous la deleteTask()fonction :

...
const toggleStatus = (taskId: string) => {
  const newTaskList = taskList().map((task) => {
    if (task.id === taskId) {
      return { ...task, completed: !task.completed }
    }
    return task
  })
  setTaskList(newTaskList)
}

Notre toggleStatus()fonction attend un taskIdargument, que nous utiliserons pour obtenir la tâche particulière que nous voulons marquer comme terminée ou non terminée. Nous utilisons également la map()méthode pour parcourir notre taskListétat, et si nous trouvons la tâche qui a le même ID que le paramètre taskId, nous changerons sa completedpropriété à l'opposé de ce qui est actuellement là. Donc, si true, on y arrivera false, et si false, true.

Enfin, nous utilisons la setTaskList()méthode pour mettre à jour l' taskListétat avec nos nouvelles taskListdonnées.

Avant d'utiliser notre toggleStatus()fonction, ajoutons une distinction entre les tâches terminées et les tâches non terminées dans notre code JSX. Nous ajouterons la classe Bootstrap "text-decoration-line-through text-success" au texte de la tâche si sa completedpropriété est true. Dans notre code JSX, juste en dessous du bouton Supprimer , mettons à jour le texte divde la tâche comme suit :

<div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
  {task.text}
</div>

Ensuite, nous ajouterons un onClickécouteur d'événement à la balise d'entrée de la case à cocher, où nous appellerons la toggleStatus()méthode à chaque clic :

<input
  type="checkbox"
  checked={task.completed}
  role="button"
  class="form-check-input h-auto px-3"
  onClick={() => {
    toggleStatus(task.id)
  }}
/>

Le code JSX <App />renvoyé par notre composant devrait maintenant ressembler à ceci :

<div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>
      <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />
        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>
      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <For each={taskList()}>
          {(task: Task) => (
            <div class="row row-cols-3 mb-3 justify-content-center">
              <button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
                X
              </button>
              <div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
                {task.text}
              </div>
              <input
                type="checkbox"
                checked={task.completed}
                role="button"
                class="form-check-input h-auto px-3"
                onClick={() => {
                  toggleStatus(task.id)
                }}
              />
            </div>
          )}
        </For>
      </div>
    </div>

Lorsque nous passons à notre navigateur, notre application SolidJS devrait pouvoir fonctionner comme ceci :

Ajouter des tâches, les cocher et les supprimer dans l'application Web

Utilisation createStorepour la réactivité imbriquée dans SolidJS

Avant de conclure, voyons comment nous pouvons utiliser le createStoreHook dans SolidJS pour créer et mettre à jour l'état imbriqué. Au lieu de cartographier notre état, de créer une nouvelle liste de tâches et de remplacer toutes nos données d'état par la nouvelle liste, nous pouvons à la place mettre à jour directement la tâche qui doit être mise à jour à l'aide de son ID.

Pour utiliser le createStoreHook, nous allons d'abord l'importer depuis solid-js/store:

import { createStore } from 'solid-js/store'

Notez que createSignala été importé de solid-js, tandis que createStoreest importé de solid-js/store.

Ensuite, nous mettrons à jour notre taskListcréation d'état à ceci :

const [taskList, setTaskList] = createStore([] as Task[])

La boutique que nous créons avec le createStore()Hook n'est pas une fonction, contrairement à celle créée avec le createSignal()Hook. Nous allons donc modifier toutes les instances de taskListdans notre code en juste taskListau lieu de taskList(). La deuxième variable, setTaskList, reste une fonction, et nous l'utiliserons pour mettre à jour notre boutique.

Continuons et utilisons la setTaskList()méthode pour modifier la toggleStatus()fonction :

const toggleStatus = (taskId: string) => {
  setTaskList(
    (task) => task.id === taskId,
    'completed',
    (completed) => !completed,
  )
}

Dans la toggleStatus()fonction, nous passons trois arguments à la setTaskList()méthode :

  1. Une fonction pour obtenir la tâche particulière que nous voulons mettre à jour. Dans notre cas, nous renvoyons la tâche qui a le même identifiant que le taskIdparamètre
  2. La propriété que nous voulons modifier —completed
  3. Pour le troisième argument, nous passons une autre fonction qui prend la valeur actuelle de notre propriété choisie et renvoie une nouvelle valeur. Ici, on revient à l'opposé de ce qu'il est actuellement

Lorsque nous revenons au navigateur, notre application devrait toujours fonctionner comme prévu :

L'application de suivi des tâches fonctionne toujours

Conclusion

Dans cet article, nous avons couvert les bases de SolidJS en créant un outil de suivi des tâches. L'approche de Solid pour créer des applications Web est assez impressionnante et relativement simple par rapport à d'autres frameworks frontaux comme Angular et React. Avec une compilation directe vers de vrais nœuds DOM et sans avoir besoin d'un DOM virtuel, les applications Web construites avec SolidJS ont l'avantage peu commun d'être rapides.

Cela dit, SolidJS est encore nouveau, et son écosystème et sa communauté sont petits comparés à ceux de frameworks comme React, Vue et Angular, il y a donc de fortes chances que vous soyez le premier à rencontrer des problèmes ou à avoir besoin de fonctionnalités spécifiques , des bibliothèques ou des intégrations. Mais SolidJS se développe rapidement et de nombreuses personnes ont déjà commencé à migrer des applications existantes vers le framework. La communauté SolidJS est assez réactive et vous ne devriez avoir aucun problème pour obtenir de l'aide lorsque vous en avez besoin.

Source : https://blog.logrocket.com/build-task-tracker-solidjs-typescript/

#solidjs #typescript

The Definitive Guide to TypeScript & Possibly The Best TypeScript Book

TypeScript Deep Dive

I've been looking at the issues that turn up commonly when people start using TypeScript. This is based on the lessons from Stack Overflow / DefinitelyTyped and general engagement with the TypeScript community. You can follow for updates and don't forget to ★ on GitHub 🌹

Reviews

  • Thanks for the wonderful book. Learned a lot from it. (link)
  • Its probably the Best TypeScript book out there. Good Job (link)
  • Love how precise and clear the examples and explanations are! (link)
  • For the low, low price of free, you get pages of pure awesomeness. Chock full of source code examples and clear, concise explanations, TypeScript Deep Dive will help you learn TypeScript development. (link)
  • Just a big thank you! Best TypeScript 2 detailed explanation! (link)
  • This gitbook got my project going pronto. Fluent easy read 5 stars. (link)
  • I recommend the online #typescript book by @basarat you'll love it.(link)
  • I've always found this by @basarat really helpful. (link)
  • We must highlight TypeScript Deep Dive, an open source book.(link)
  • Great online resource for learning. (link)
  • Thank you for putting this book together, and for all your hard work within the TypeScript community. (link)
  • TypeScript Deep Dive is one of the best technical texts I've read in a while. (link)
  • Thanks @basarat for the TypeScript Deep Dive Book. Help me a lot with my first TypeScript project. (link)
  • Thanks to @basarat for this great #typescript learning resource. (link)
  • Guyz excellent book on Typescript(@typescriptlang) by @basarat (link)
  • Leaning on the legendary @basarat's "TypeScript Deep Dive" book heavily at the moment (link)
  • numTimesPointedPeopleToBasaratsTypeScriptBook++; (link)
  • A book not only for typescript, a good one for deeper JavaScript knowledge as well. link
  • In my new job, we're using @typescriptlang, which I am new to. This is insanely helpful huge thanks, @basarat! link
  • Thank you for writing TypeScript Deep Dive. I have learned so much. link
  • Loving @basarat's @typescriptlang online book basarat.gitbooks.io/typescript/# loaded with great recipes! link
  • Microsoft doc is great already, but if want to "dig deeper" into TypeScript I find this book of great value link
  • Thanks, this is a great book 🤓🤓 link
  • Deep dive to typescript is awesome in so many levels. i find it very insightful. Thanks link
  • @basarat's intro to @typescriptlang is still one of the best going (if not THE best) link
  •  
  • This is sweet! So many #typescript goodies! link

Get Started

If you are here to read the book online get started.

Translations

Book is completely free so you can copy paste whatever you want without requiring permission. If you have a translation you want me to link here. Send a PR.

Other Options

You can also download one of the Epub, Mobi, or PDF formats from the actions tab by clicking on the latest build run. You will find the files in the artifacts section.

Special Thanks

All the amazing contributors 🌹

Share

Share URL: https://basarat.gitbook.io/typescript/

Author: Basarat
Source Code: https://github.com/basarat/typescript-book/ 
License: View license

#typescript #opensource 

Cree Un Rastreador De Tareas Con SolidJS Y TypeScript

SolidJS se está convirtiendo rápidamente en el centro de atención de la comunidad de desarrollo web. Con su gestión de estado sencilla, reactividad de grano fino y alto rendimiento, SolidJS se ha puesto en un pedestal para otros marcos de JavaScript.

SolidJS es todo lo que los desarrolladores de React han estado pidiendo, y en este artículo, lo guiaré a través de la creación de un rastreador de tareas con SolidJS

requisitos previos

Para seguir este tutorial, necesitará conocimientos de JavaScript y TypeScript, módulos de Node.js y componentes en marcos frontend.

¿Por qué SolidJS?

Si ha trabajado con React antes, SolidJS le resultará muy familiar. Cuando se anunció por primera vez React Hooks, estaba muy feliz porque pensé que resolvería nuestra crisis de gestión estatal . Los ganchos facilitaron la gestión del estado local en los componentes, pero la gestión del estado global siguió siendo compleja.

Todavía era difícil para los componentes desconectados compartir datos y aparecieron numerosas bibliotecas para tratar de resolver el problema de administración del estado, lo que aumentó la fatiga del desarrollo y agregó una complejidad innecesaria a nuestra base de código.

También he visto que ocurre el mismo problema en otros marcos frontend; es como si la gestión del estado global fuera una ocurrencia tardía, en lugar de algo planeado desde el principio.

Con SolidJS, las cosas son diferentes. La gestión del estado global es tan fácil como crear un estado y exportarlo. No hay necesidad de ninguna configuración compleja o biblioteca de terceros.

SolidJS también usa JSX, la popular extensión de sintaxis similar a HTML para JavaScript. Esto facilita el manejo de la lógica de la interfaz de usuario, los eventos y los cambios de estado. Junto con eso, SolidJS compila en JavaScript simple, por lo que no hay necesidad de un DOM virtual, lo que lo hace relativamente más rápido que marcos como React y Angular.

SolidJS también tiene un flujo de trabajo simple. Los componentes solo se procesan una vez, como en JavaScript, por lo que es más fácil predecir el resultado de su código.

Otra gran ventaja de SolidJS es que se basa en otros marcos web, por lo que emula con orgullo las partes buenas y mejora las partes no tan buenas.

 

Avancemos y configuremos nuestra aplicación SolidJS para aprender cómo crear una aplicación web con SolidJS paso a paso.

Configuración de una aplicación SolidJS con TypeScript

Para configurar una aplicación SolidJS en su máquina local , deberá instalar Node.js. Si ya lo tiene instalado, ejecutar el siguiente comando en su terminal debería devolver su versión actual de Node.js:

node --version

A continuación, creemos una nueva aplicación SolidJS ejecutando el siguiente comando en nuestra terminal:

npx degit solidjs/templates/ts task-tracker

El uso solidjs/templates/tsgenera una aplicación Solid/TypeScript. Para JavaScript, deberá cambiar el comando a solidjs/templates/js.

Después de ejecutar el comando, debería ver un mensaje de éxito similar a este:

> cloned solidjs/templates#HEAD to task-tracker

Ahora, continúe y abra la aplicación generada en su editor de código o IDE de su elección. Así es como debería verse la estructura de la aplicación:

Vista de la estructura de la aplicación generada

Tenga en cuenta que nuestra aplicación SolidJS utiliza Vite como herramienta de compilación predeterminada y pnpm como administrador de paquetes predeterminado. Estas herramientas combinadas brindan una excelente experiencia de desarrollo para la representación de componentes, el tiempo de inicio de la aplicación y la administración de paquetes.

Nuestro componente de aplicación actualmente vive dentro del ./src/App.tsxarchivo:

import type { Component } from 'solid-js'
...
const App: Component = () => {
  return (
    <div>
      ...
    </div>
  );
}

export default App

Primero, importamos el Componenttipo desde solid-jsel cual se usa como tipo para nuestro Appcomponente.

Los componentes en SolidJS son funciones de JavaScript. Son reutilizables y se pueden personalizar usando accesorios, que son similares a los parámetros/argumentos de las funciones.

Dentro del ./src/index.tsxarchivo, renderizamos nuestro Appcomponente:

import { render } from 'solid-js/web'
import App from './App'

render(() => <App />, document.getElementById('root') as HTMLElement)

El render()método from solid-js/webespera dos argumentos:

  1. Una función que devuelve nuestro <App />componente.
  2. Un elemento HTML

Cuando navegue hasta el ./index.htmlarchivo, verá la raíz divy el uso de nuestro ./src/index.tsxarchivo a través de la <script />etiqueta:

...
<body>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <div id="root"></div>
  <script src="/src/index.tsx" type="module"></script>
</body>

Para ejecutar nuestra aplicación SolidJS, primero tendremos que instalar nuestros paquetes ejecutando el comando pnpm installen nuestra terminal y luego pnpm deviniciar nuestra aplicación en modo de desarrollo. Debería ver un mensaje de éxito similar a este:

 vite v2.9.9 dev server running at:

 > Local: http://localhost:3001/
 > Network: use `--host` to expose

 ready in 378ms.

Cuando navega a http://localhost:3001la URL que se muestra en su terminal, debería ver una página similar a esta:

Edite src/App.tsx y guarde para recargar.

Instalando Bootstrap para darle estilo a nuestra aplicación SolidJS

Ahora que hemos configurado con éxito nuestra aplicación SolidJS, instalemos Bootstrap para diseñar para que no tengamos que preocuparnos por CSS.

Para instalar Bootstrap, ejecute el siguiente comando en su terminal:

pnpm install bootstrap

A continuación, usaremos la siguiente línea de código para importar Bootstrap en nuestro ./src/index.tsxarchivo:

import 'bootstrap/dist/css/bootstrap.min.css'

También podemos eliminar la ./index.cssimportación actual ya que no la necesitaremos. Nuestro index.tsxarchivo ahora debería verse así:

import { render } from 'solid-js/web'
import App from './App'
import 'bootstrap/dist/css/bootstrap.min.css'

render(() => <App />, document.getElementById('root') as HTMLElement)

Usando JSX para estructurar nuestro rastreador de tareas

Usemos JSX para estructurar nuestro rastreador de tareas. Dentro del ./src/App.tsxarchivo, reemplace lo que tiene actualmente con esto:

import type { Component } from 'solid-js'

const App: Component = () => {
  return (
    <div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>

      <form class="mb-5 row row-cols-2 justify-content-center">
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />

        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>

      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <div class="row row-cols-3 mb-3 justify-content-center">
          <button class="btn btn-danger w-auto">X</button>
          <div class="bg-light p-2 mx-2">Push code to GitHub</div>
          <input type="checkbox" role="button" class="form-check-input h-auto px-3" />
        </div>
      </div>
    </div>
  )
}
export default App

Nuestro código JSX contiene el formulario para ingresar nuevas tareas y la sección de tareas. Por ahora, estamos usando datos codificados, pero aprenderemos cómo podemos hacer que nuestra aplicación sea dinámica para que cuando un usuario ingrese una nueva tarea en el formulario y haga clic en el botón Enviar , nuestra aplicación SolidJS se actualice con los nuevos datos. .

Cuando regrese a su navegador, su página ahora debería verse así:

Aplicación SolidJS en el navegador

A continuación, aprendamos cómo crear y administrar el estado en SolidJS. Haremos esto creando un taskListestado y también crearemos funciones para agregar nuevas tareas a nuestro estado, eliminarlas y actualizar su estado de finalización.

Crear y actualizar el estado en SolidJS

SolidJS tiene un createSignalgancho para crear estado. Como ejemplo, vamos a crear un taskListestado para albergar nuestras tareas. Dentro del ./src/App.tsxarchivo, comenzaremos creando un tipo para cada tarea:

const App: Component = () => {
  type Task = {
    text: string
    text: string
    completed: boolean
  }

  return (...)
}

A continuación, crearemos nuestro taskListestado:

import { Component, createSignal } from 'solid-js'

...
const [taskList, setTaskList] = createSignal([] as Task[])
...

Hook createSignal()devuelve una matriz que contiene dos variables taskListy setTaskList. A diferencia de lo que verás con React Hooks , ambas variables son funciones. Llamamos a la taskList()función para acceder a los datos de nuestra tarea y a la setTaskList()función para actualizar nuestro taskListestado.

Agregando tareas a nuestro estado

Ahora que hemos creado nuestro taskListestado, creemos una función para agregar tareas a nuestro estado. Lo nombraremos addTask:

const [taskList, setTaskList] = createSignal([] as Task[])

const addTask = (e: Event) => {
  e.preventDefault()

  const taskInput = document.querySelector('#taskInput') as HTMLInputElement

  const newTask: Task = {
    id: Math.random().toString(36).substring(2),
    text: taskInput.value,
    completed: false,
  }

  setTaskList([newTask, ...taskList()])
  taskInput.value = ''
}

Dentro de nuestra addTask()función, comenzamos usando el e.preventDefault()método para evitar el comportamiento de recarga predeterminado cuando enviamos nuestro formulario. También obtenemos nuestro taskInputdel <input />elemento con una ID de "taskInput".

Para cada nueva tarea, creamos un objeto llamado newTaskcon propiedades id, texty completed. Cuando se crea una nueva tarea, nuestra función usará el Math.random()método para generar una cadena aleatoria para nuestra ID de tarea y establecerá el completedvalor predeterminado en false.

Finalmente, setTaskList()se llamará a la función con una matriz como argumento, agregando el estado newTaskactual taskList.

También vamos a crear una función para eliminar tareas:

...
const deleteTask = (taskId: string) => {
  const newTaskList = taskList().filter((task) => task.id !== taskId)
  setTaskList(newTaskList)
}

Cuando llamamos a nuestra deleteTask()función con el ID de la tarea como argumento, filtrará a través de nuestro taskListestado y devolverá todas las tareas excepto la que tiene el ID que queremos eliminar. Luego, setTaskList()se llamará al método con la nueva lista de tareas como argumento.

Para poner addTask()en uso nuestra función, agregaremos un onSubmitdetector de eventos a nuestra <form />etiqueta en el código JSX, que llamará a nuestra función cada vez que se haga clic en el botón Enviar.

...
return (
 <div class="container mt-5 text-center">
    <h1 class="mb-4">Whattodo!</h1>
    <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
     ...
    </form>
  </div>
)

A continuación, veamos cómo podemos mostrar nuestros taskListdatos en nuestra aplicación cada vez que un usuario agrega una nueva tarea.

Controle el flujo y recorra los datos en SolidJS

SolidJS tiene un <For />componente para recorrer los datos. Si bien el método de JavaScript Array.map()funcionará, nuestro componente siempre mapeará el taskListestado cuando se actualice. Con el <For />componente, nuestra aplicación solo actualizará la parte exacta del DOM que necesita actualizarse.

Reemplacemos lo que tenemos actualmente en las Tareas divcon esto:

...
<div>
  <h4 class="text-muted mb-4">Tasks</h4>
  <For each={taskList()}>
    {(task: Task) => (
      <div class="row row-cols-3 mb-3 justify-content-center">
        <button class="btn btn-danger w-auto">X</button>
        <div class="bg-light p-2 mx-2">{task.text}</div>
        <input type="checkbox" checked={task.completed} role="button" class="form-check-input h-auto px-3" />
      </div>
    )}
  </For>
</div>
...

Observe cómo estamos envolviendo nuestro taskListen el <For />componente. También hemos actualizado el texto de la tarea de "Enviar código a GitHub" a task.textnuestro taskparámetro.

Ahora podemos continuar y usar el deleteTask()método que creamos anteriormente. Agregaremos un onClickdetector de eventos al botón Eliminar :

...
<button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
  X
</button>
...

Si vamos a nuestro navegador, nuestra aplicación SolidJS ahora debería funcionar así:

Agregar tareas escribiendo en la barra de tareas

Actualizar el estado de las tareas en nuestro estado anidado

SolidJS tiene un createStore()gancho para crear y administrar estados anidados. Pero antes de hablar de ello, veamos cómo podemos hacer actualizaciones a las tareas preexistentes en nuestro createSignal()estado. Crearemos una nueva función nombrada toggleStatusjusto debajo de la deleteTask()función:

...
const toggleStatus = (taskId: string) => {
  const newTaskList = taskList().map((task) => {
    if (task.id === taskId) {
      return { ...task, completed: !task.completed }
    }
    return task
  })
  setTaskList(newTaskList)
}

Nuestra toggleStatus()función espera un taskIdargumento, que usaremos para obtener la tarea particular que queremos marcar como completada o no completada. También estamos usando el map()método para recorrer nuestro taskListestado, y si encontramos la tarea que tiene el mismo ID que el parámetro taskId, cambiaremos su completedpropiedad al opuesto de lo que está allí actualmente. Entonces, si true, lo lograremos false, y si false, true.

Finalmente, estamos usando el setTaskList()método para actualizar el taskListestado con nuestros nuevos taskListdatos.

Antes de usar nuestra toggleStatus()función, agreguemos una distinción entre tareas completadas y tareas incompletas en nuestro código JSX. Agregaremos la clase Bootstrap "text-decoration-line-through text-success" al texto de la tarea si su completedpropiedad es true. En nuestro código JSX, justo debajo del botón Eliminar , actualicemos el texto de la tarea diva esto:

<div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
  {task.text}
</div>

A continuación, agregaremos un onClickdetector de eventos a la etiqueta de entrada de la casilla de verificación, donde llamaremos al toggleStatus()método cada vez que se haga clic en él:

<input
  type="checkbox"
  checked={task.completed}
  role="button"
  class="form-check-input h-auto px-3"
  onClick={() => {
    toggleStatus(task.id)
  }}
/>

El código JSX que <App />devuelve nuestro componente ahora debería verse así:

<div class="container mt-5 text-center">
      <h1 class="mb-4">Whattodo!</h1>
      <form class="mb-5 row row-cols-2 justify-content-center" onSubmit={(e) => addTask(e)}>
        <input type="text" class="input-group-text p-1 w-25" placeholder="Add task here..." id="taskInput" required />
        <button class="btn btn-primary ms-3 w-auto" type="submit">
          Add task
        </button>
      </form>
      <div>
        <h4 class="text-muted mb-4">Tasks</h4>
        <For each={taskList()}>
          {(task: Task) => (
            <div class="row row-cols-3 mb-3 justify-content-center">
              <button class="btn btn-danger w-auto" onclick={() => deleteTask(task.id)}>
                X
              </button>
              <div class={`bg-light p-2 mx-2 ${task.completed && 'text-decoration-line-through text-success'}`}>
                {task.text}
              </div>
              <input
                type="checkbox"
                checked={task.completed}
                role="button"
                class="form-check-input h-auto px-3"
                onClick={() => {
                  toggleStatus(task.id)
                }}
              />
            </div>
          )}
        </For>
      </div>
    </div>

Cuando vamos a nuestro navegador, nuestra aplicación SolidJS debería poder funcionar así:

Agregar tareas, marcarlas y eliminarlas en la aplicación web

Uso createStorepara reactividad anidada en SolidJS

Antes de terminar, veamos cómo podemos usar createStoreHook en SolidJS para crear y actualizar el estado anidado. En lugar de mapear nuestro estado, crear una nueva lista de tareas y reemplazar todos nuestros datos de estado con la nueva lista, podemos actualizar directamente la tarea que necesita actualizarse usando su ID.

Para usar el createStoreHook, primero lo importaremos desde solid-js/store:

import { createStore } from 'solid-js/store'

Observe que createSignalfue importado de solid-js, mientras que createStorees importado de solid-js/store.

A continuación, actualizaremos nuestra taskListcreación de estado a esto:

const [taskList, setTaskList] = createStore([] as Task[])

La tienda que creamos con el createStore()Hook no es una función, a diferencia de la creada con el createSignal()Hook. Entonces, modificaremos todas las instancias de taskListen nuestro código solo taskListen lugar de taskList(). La segunda variable, setTaskListsigue siendo una función y la usaremos para actualizar nuestra tienda.

Sigamos adelante y usemos el setTaskList()método para modificar la toggleStatus()función:

const toggleStatus = (taskId: string) => {
  setTaskList(
    (task) => task.id === taskId,
    'completed',
    (completed) => !completed,
  )
}

En la toggleStatus()función, pasamos tres argumentos al setTaskList()método:

  1. Una función para obtener la tarea particular que queremos actualizar. En nuestro caso, estamos devolviendo la tarea que tiene la misma identificación que el taskIdparámetro
  2. La propiedad que queremos modificar —completed
  3. Para el tercer argumento, estamos pasando otra función que toma el valor actual de nuestra propiedad elegida y devuelve un nuevo valor. Aquí, estamos devolviendo lo contrario de lo que es actualmente.

Cuando volvamos al navegador, nuestra aplicación aún debería funcionar como se esperaba:

La aplicación de seguimiento de tareas sigue funcionando

Conclusión

En este artículo, cubrimos los conceptos básicos de SolidJS mediante la creación de un rastreador de tareas. El enfoque de Solid para crear aplicaciones web es bastante impresionante y relativamente sencillo en comparación con otros marcos frontend como Angular y React. Con compilación directa a nodos DOM reales y sin la necesidad de un DOM virtual, las aplicaciones web creadas con SolidJS tienen la ventaja poco común de ser rápidas.

Dicho esto, SolidJS aún es nuevo, y su ecosistema y comunidad son pequeños en comparación con marcos como React, Vue y Angular, por lo que es muy probable que sea el primero en encontrar problemas o necesite funcionalidades específicas. , bibliotecas o integraciones. Pero SolidJS está creciendo rápidamente y muchas personas ya comenzaron a migrar aplicaciones existentes al marco. La comunidad de SolidJS es bastante receptiva y no debería tener ningún problema para obtener ayuda cuando la necesite.

Fuente: https://blog.logrocket.com/build-task-tracker-solidjs-typescript/

  #solidjs #typescript

Outil de migration EDB to Migrate Exchange Mailboxes to Various Targets

Si vous rencontrez des problèmes lors de la migration des boîtes aux lettres Exchange vers Office 365, vous devez lire cet article pour savoir comment migrer les boîtes aux lettres Exchange EDB vers Office 365. En migrant vers Office 365, les utilisateurs peuvent accéder à leurs boîtes aux lettres de n’importe où et à partir de n’importe quel appareil.

Dans cet article, nous expliquerons les raisons de cette migration et une solution professionnelle pour migrer d’Exchange vers Office 365.

Raisons de migrer Exchange Server vers le cloud Office 365

Office 365 est arrivé pour la première fois en 2011 et est considéré comme la meilleure plate-forme pour les organisations qui souhaitent gérer l’ensemble de leur système de messagerie sur le cloud. Voici les principales fonctionnalités d’Office 365 -

  1. Il permet de travailler de n’importe quel endroit et de n’importe quel endroit.
  2. Ne vous inquiétez pas du spam et des logiciels malveillants.
  3. La sécurité fournie par Office 365 est très fiable.
  4. contrôler le coût global et offre une flexibilité financière.
  5. Toutes les mises à jour et mises à niveau sont gérées par Microsoft.

Comment migrer des boîtes aux lettres Exchange vers Office 365?

Datavare L’outil de migration Exchange est trop facile à utiliser et offre des étapes simples pour migrer EDB vers Office 365 -

  • Téléchargez et installez le logiciel sur votre système.
  • Ajoutez le fichier EDB Exchange avec le bouton Parcourir.
  • Sélectionnez l’exportation vers les boîtes aux lettres Office 365.
  • Fournissez les informations de connexion du compte Office 365.
  • Sélectionnez le dossier et appuyez sur le bouton Terminer.

Ainsi, toutes vos boîtes aux lettres Exchange EDB sont désormais migrées vers Office 365.

Remarque: vous pouvez utiliser des filtres pour migrer les éléments de données souhaités d’Exchange vers un compte Office 365.

Lignes finales

Ce blog vous présente une solution professionnelle pour la migration des boîtes aux lettres Exchange vers un compte Office 365. Étant donné que les solutions manuelles sont compliquées, nous suggérons l’outil de migration d’Exchange qui est trop simple à utiliser. Aucun tracas n’est confronté par les utilisateurs dans l’exploitation du programme. La meilleure partie de ce logiciel est qu’il n’a pas besoin de compétences techniques pour effectuer la migration. On peut comprendre le fonctionnement du logiciel en téléchargeant la version de démonstration qui permet la migration des 50 premiers éléments par dossier.

Plus d’informations:- https://www.datavare.com/software/edb-migration.html

#outil de migration informatique #logiciel de migration informatique #application de migration edb #utilitaire de migration informatique #migration informatique

joe biden

1617257581

Software de restauración de Exchange para restaurar sin problemas PST en Exchange Server

¿Quiere restaurar los buzones de correo de PST a Exchange Server? Entonces, estás en la página correcta. Aquí, lo guiaremos sobre cómo puede restaurar fácilmente mensajes y otros elementos de PST a MS Exchange Server.

Muchas veces, los usuarios necesitan restaurar los elementos de datos de PST en Exchange Server, pero debido a la falta de disponibilidad de una solución confiable, los usuarios no pueden obtener la solución. Háganos saber primero sobre el archivo PST y MS Exchange Server.

Conozca PST y Exchange Server

PST es un formato de archivo utilizado por MS Outlook, un cliente de correo electrónico de Windows y muy popular entre los usuarios domésticos y comerciales.

Por otro lado, Exchange Server es un poderoso servidor de correo electrónico donde todos los datos se almacenan en un archivo EDB. Los usuarios generalmente guardan la copia de seguridad de los buzones de correo de Exchange en el archivo PST, pero muchas veces, los usuarios deben restaurar los datos del archivo PST en Exchange. Para resolver este problema, estamos aquí con una solución profesional que discutiremos en la siguiente sección de esta publicación.

Un método profesional para restaurar PST a Exchange Server

No le recomendamos que elija una solución al azar para restaurar los datos de PST en Exchange Server. Por lo tanto, al realizar varias investigaciones, estamos aquí con una solución inteligente y conveniente, es decir, Exchange Restore Software. Es demasiado fácil de manejar por todos los usuarios y restaurar cómodamente todos los datos del archivo PST a Exchange Server.

Funciones principales ofrecidas por Exchange Restore Software

El software es demasiado simple de usar y se puede instalar fácilmente en todas las versiones de Windows. Con unos pocos clics, la herramienta puede restaurar los elementos del buzón de Exchange.

No es necesario que MS Outlook restaure los datos PST en Exchange. Todos los correos electrónicos, contactos, notas, calendarios, etc. se restauran desde el archivo PST a Exchange Server.

Todas las versiones de Outlook son compatibles con la herramienta, como Outlook 2019, 2016, 2013, 2010, 2007, etc. La herramienta proporciona varios filtros mediante los cuales se pueden restaurar los datos deseados desde un archivo PST a Exchange Server. El programa se puede instalar en todas las versiones de Windows como Windows 10, 8.1, 8, 7, XP, Vista, etc.

Descargue la versión de demostración del software de restauración de Exchange y analice el funcionamiento del software restaurando los primeros 50 elementos por carpeta.

Líneas finales

No existe una solución manual para restaurar los buzones de correo de Exchange desde el archivo PST. Por lo tanto, hemos explicado una solución fácil e inteligente para restaurar datos de archivos PST en Exchange Server. Simplemente puede usar este software y restaurar todos los datos de PST a Exchange Server.

Más información:- https://www.datavare.com/software/exchange-restore.html

#intercambio de software de restauración #intercambio de restauración #buzón del servidor de intercambio #herramienta de restauración de intercambio