Это мой самый первый пост на Medium, и я старался быть кратким и ясным.
Мы все знаем, что компоненты являются основой любого приложения React. Нет ничего плохого в том, чтобы сказать, что без компонентов наше реагирующее приложение бесполезно или что мы не можем создать реагирующее приложение без использования компонентов. Мы знаем, что есть два способа определить компонент: один — методом компонента класса, а второй — методом функционального компонента. Я не буду писать об этих двух методах компонента и о том, какой метод вы должны использовать, потому что все зависит от вас, в каком методе вы чувствуете себя комфортно.
Разработчики JavaScript в основном любят использовать код Visual Studio для целей разработки. Visual Studio Code — это самый эффективный и современный редактор кода, доступный бесплатно.
Теперь давайте перейдем к основной части, мы все знаем, что хорошей практикой является создание каждого компонента в отдельном файле, чтобы сделать наш код более понятным. Итак, давайте предположим, что мы создаем отдельный файл с именем item.js в наших компонентах (для разделения каждого компонентный файл), которую мы создали в папке src. Теперь мы знаем, что для создания компонента сначала нам нужно написать всю структуру компонента самостоятельно, и это, очевидно, требует очень много времени.
(Примечание. Не пишите ничего прямо сейчас в папке item.js, просто оставьте ее пустой)
Итак, вчера, когда я писал код для своего реагирующего приложения, я хочу поделиться с вами, ребята, чтобы сэкономить ваше время :)
Таким образом, в Visual Studio Code, если щелкнуть папку Просмотр рядом с папкой Выбор, вы увидите Расширения там есть. Просто нажмите на нее, и вы увидите строку поиска. Вам просто нужно найти расширение
ES7 React/Redux/GraphQL/React-Native snippets, разработанноеdsznajderа затем установите его
После его установки просто вернитесь к файлу item.js и просто введите rceи нажмите кнопку Tab и ваша полная базовая структура компонентов будет создана автоматически с именем файла (например, мы создали файл item.js), как показано на следующем рисунке.
Однако это только для создания базовой структуры компонента класса. Есть также множество других вариантов, которые вы можете найти, покопавшись в этом расширении, что сэкономит вам много времени, но, поскольку этот пост посвящен тому, как мгновенно создать структуру реагирующего компонента, поэтому мы будем придерживаться только этого.
Итак, приступим к созданию нашей структуры компонентов самым быстрым способом. Я надеюсь, что разработчики и особенно новички в React найдут этот пост полезным для себя, а также, очевидно, сэкономят им хотя бы некоторое количество времени. Спасибо :)
