Nouveau sur React. J'utilise un serveur en direct pour les fichiers html dans VS Code mais je n'arrive pas à trouver la même fonctionnalité pour les composants React (fichiers .js). C'est peut-être évident ou je cherche la mauvaise chose.

J'aimerais apporter des modifications au composant, en particulier le style MUI et voir les résultats incrémentiels dans un aperçu en direct, plutôt que toute l'application doit se rafraîchir et cliquer à nouveau sur le formulaire sur lequel je travaille. Des pensées ou des suggestions? Merci.

1
Dan G. 15 avril 2020 à 06:42

2 réponses

Meilleure réponse

Vous n'avez pas à changer votre code lorsque vous utilisez un livre de contes. Il vous suffit d'écrire de nouveaux fichiers, qui importent votre composant. Ensuite, vous pouvez lui transmettre de faux accessoires pour voir comment il se comporte en fonction de nombreux scénarios. Si vous utilisez create-react-app, c'est super facile à installer, si vous avez votre propre configuration, alors votre niveau est assez bon pour suivre leur tutoriel. Les fichiers sont formatés comme ceci: MyComponent.stories.js. Ensuite, Storybook examinera tous les fichiers contenant des "histoires" dans leur nom et les lancera sur le port 6006 lorsque vous écrivez yarn/npm run storybook dans votre terminal. Je recommande vivement le livre d'histoires, il est utilisé par la plupart des entreprises.

2
DoneDeal0 22 avril 2020 à 19:58

Je n'ai pas pu trouver de solution satisfaisante et je ne voulais pas trop investir. Storybook semble que je devrais changer mon code et parce que je suis encore relativement nouveau pour réagir, je ne suis pas sûr d'être prêt pour cela.

Je laisse juste VSCode redémarrer le serveur chaque fois que j'enregistre une modification, puis je vais dans le navigateur et je clique dans les menus pour accéder à la page sur laquelle je travaille.

Pour des modifications d'interface utilisateur plus complexes, je vais créer une mini-application de réaction de bac à sable de code et travailler dessus pour, comme les modifications css, etc.

MISE À JOUR: J'ai implémenté Storybook et je l'aime bien. Après avoir suivi la documentation pour l'installer, j'ai vu que j'avais juste besoin de créer un fichier (histoire) pour un composant comme MyComponent.stories.js et de mettre les quelques lignes de code pour l'importer et l'utiliser, en passant les accessoires que je voulais voir.

J'ai décidé de mettre mes fichiers d'histoires dans un dossier d'histoires séparé sous src. Voici un exemple de composant Details:

import React from 'react';
import { action } from '@storybook/addon-actions';
import Details from '../Details';

// How to display the component in Storybook page
export default {
  title: 'Details',
  component: Details,
  // Our exports that end in "Data" are not stories.
  excludeStories: /.*Data$/
};

// Props passed into component
export const recordData = {
  record: {
    id: '1',
    createdOn: '2020-04-20 4:07 PM',
    createdBy: 'dgarv',
    modifiedOn: '2020-04-20 4:07 PM',
    modifiedBy: 'dgarv',
  }
};

// Use the actual component
export const Default = () => <Details {...recordData} />;
0
Dan G. 23 avril 2020 à 03:35