Могу ли я в реальном времени просмотреть компоненты React в VSCode?

Question

Новый, чтобы Реагировать. Я использовал живой сервер для файлов html в VS Code, но я не могу найти такую ​​же функциональность для компонентов React (. js файлов). Может быть, это очевидно, или я ищу неправильную вещь.

Я хотел бы внести изменения в компонент, особенно в стилизацию MUI, и увидеть добавочные результаты в реальном времени предварительного просмотра, а не для всего приложения, требующего refre sh и нажмите на форму, над которой я работаю. Есть мысли или предложения? Спасибо.

Answer 1

Вам не нужно менять свой код при использовании сборника рассказов. Вам просто нужно написать новые файлы, которые импортируют ваш компонент. Затем вы можете передать его поддельные реквизиты, чтобы увидеть, как он ведет себя в зависимости от многих сценариев ios. Если вы используете create-реагировать-приложение, его очень легко установить, если у вас есть собственный конфиг, то ваш уровень достаточно хорош, чтобы следовать их руководству. Файлы отформатированы так: MyComponent.stories.js. Затем сборник рассказов рассмотрит все файлы, в названии которых содержатся «истории», и запустит их на порту 6006, когда вы напишите yarn/npm run storybook в своем терминале. Я настоятельно рекомендую сборник рассказов, он используется большинством компаний.

Answer 2

Не удалось найти удовлетворительного решения и не желал вкладывать слишком много. Похоже, что Storybook должен был изменить мой код, и поскольку я все еще относительно новичок, чтобы реагировать, я не уверен, что готов к этому.

Я просто позволяю VSCode перезапускать сервер каждый раз, когда сохраняю Перейдите в браузер и нажмите меню, чтобы перейти на страницу, над которой я работаю.

Для более сложных изменений пользовательского интерфейса я создам приложение для песочницы кода с мини-реакцией и просто поработаю с ним, как css изменения и т. Д. c.

ОБНОВЛЕНИЕ: I ' Я реализовал Storybook, и мне это нравится. После установки c для его установки я увидел, что мне просто нужно создать файл (историю) для такого компонента, как MyComponent.stories. js, и вставить несколько строк кода для импорта и использования, передавая какие бы реквизиты я ни хотел увидеть.

Я решил поместить файлы своих историй в отдельную отдельную папку историй под sr c. Вот пример для компонента 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} />;