Повторное использование и рефакторинг шаблона макета домашней страницы React Semantic UI
Вы наконец-то решили попробовать изучить ReactJS и хотели бы увидеть, как быстро вы сможете создать собственное приложение для реагирования. Существуют разные подходы и уровни для вашего изучения React, но я заметил отставание от обычно рекомендуемых. Эта статья поможет устранить это недостающее звено, предоставив пример «неструктурированного шаблона», который поможет вам быстро создать собственное приложение React с нуля, которое легко поддерживать.
Для новичков хорошим началом будет прохождение короткого курса, знакомящего с основами. Я бы порекомендовал Modern React with Redux Стивена Грайдера, в котором концепции представлены на примерах коротких проектов. После этого вы, вероятно, захотите повысить уровень и просмотреть пошаговые инструкции. Одним из примеров, который я бы порекомендовал для практических руководств, может быть трекер приложений covid.
Теперь вам действительно не терпится создать собственное приложение на React. Ускоренный способ - использовать существующие шаблоны со структурированными папками и, возможно, изменить текст или изображения, и все готово. Хорошо, вы сделали это, но можете ли вы уже сказать: «Круто, я сейчас построю свою с нуля»? И просто чтобы квалифицировать сборку из sratch, это все еще может означать, что мы используем шаблонную платформу create-react-app, но имеем возможность рефакторинга и организации компонентов в нужных папках.
Когда я был на этапе завершения некоторых практических руководств и структурированных шаблонов, мне хотелось бы, чтобы деятельность была каким-то образом управляема, но в то же время позволила мне реорганизовать файлы и добавить компоненты, как будто это почти строится из царапать.
Затем я наткнулся на пример шаблона семантического пользовательского интерфейса макета в качестве руководства по созданию, скажем, целевого веб-сайта. Кажется, это соответствует моему сценарию использования, и, более того, у них в основном есть один файл для своего React, чтобы создать эту домашнюю страницу. Этот фиктивный шаблон был намеренно создан в виде одного файла. В нем нет ссылок на какие-либо внешние сайты, а только частично закодированы ссылки и кнопки. Это кажется хорошей практикой, поскольку мне нужно будет реорганизовать код и поместить их в рекомендуемые отраслевые папки React и закодировать большинство частей компонентов. Это кажется хорошей практикой из того, что я узнал из предыдущих курсов и руководств по React, и должно стать ступенчатым блоком к созданию собственного приложения React с нуля. Тот самый
С другой стороны, это также поможет мне создать образец целевого веб-сайта. Как видите, макет из шаблона почти аналогичен шаблону сайта, который я создал. И я опубликовал это на https://trinuts.vercel.app с репозиторием github здесь.
Перемещение папок
Из одного файла макета домашней страницы я разделил его на несколько компонентов и позже добавил дополнительные компоненты. Возможно, существует больше группировок, таких как размещение всех компонентов контейнера в папке container, но это легко может быть реализовано в будущем.
Добавление компонентов
Эта свобода группировки и перемещения компонентов помогает вам поэкспериментировать, скажем, с добавлением дополнительных компонентов из других библиотек, таких как Link из react-scroll, для более контролируемой функции прокрутки.
Во время разработки также существуют разные контейнеры для мобильной версии и веб-версии, так что снова было хорошей практикой повторно использовать компоненты для обоих контейнеров. Также была необходима проверка работоспособности для обеих версий. Во время этих проверок я обнаружил начальные ошибки.
Мы могли бы дополнительно добавить компоненты, такие как компонент LocalImage или другие компоненты рамы. В качестве примечания к фрейму карт, я, вероятно, мог бы использовать API Google Maps для создания более индивидуального дизайна, но для целей этого целевого веб-сайта простое создание iframe из Google MyMaps помогло.
Последние мысли
Попытка изменить однофайловые шаблоны и преобразовать их в более управляемую и простую в обслуживании систему может быть именно тем, что вам нужно, чтобы сказать, что теперь вы можете создавать приложения для реагирования с нуля.
Само действие по перемещению папок можно быстро и легко реализовать. Я не говорю, что код, найденный в моем репозитории, - лучший способ рефакторинга или повторного использования этого шаблона, но это просто чтобы продемонстрировать, как это может быть частью вашего упражнения.
Practice, practice, practice определенно может стать ключом к созданию приложения для реагирования с нуля, но могут быть более разумные способы сделать это. Если вы уже пробовали курсы, практические руководства и структурированные шаблоны, почему бы не попробовать неструктурированные шаблоны, подобные представленному здесь?
