На «ванильном» JavaScript сейчас почти никто не пишет, но кроме мощных фреймворков есть и небольшие библиотеки с интересными возможностями. В наш список попали наиболее полезные из них, часто применяемые веб-разработчиками.
For example I develop a school website. I have test cases with the following steps:
Long set up to reach some point in my application (create school, create students, create teacher, create class, add students to class and so on until con…
В дочернем компоненте есть переменная которую нужно очищать через родительский компонент. К примеру чтобы при нажатии на кнопку в род. компоненте очищалась переменная в дочернем. Как можно это реализовать?
Вот пример:
Род. компонент
<te…
У клиента на safari жутко тормозит сайт, долгий отклик при наведении/клике и т.д. Хотя в других браузерах всё ок. Даже у меня на стареньком андроиде не лагает, хотя я понимаю что много контента и я не лучший оптимизатор.
Сайт https://inlov…
при роботе с react router dom по переходе по Link выскакивают две ошибки
Uncaught Could not find router reducer in state tree, it must be mounted under "router"
интересно, что в адресной строке адрес меняется, а контент не рендар…
такой вопрос. Я хочу что-бы при нажатии на компоненту открывалась новая страница, например википедия. Пробовал повесить на компоненту:
onClick={()=>{
return <Redirect to={link}/>
}}
Делаю приложение по показу погоды(html, css, js) . Использую API openweathermap. Если задаю параметры показать на 24 часа, то показывает с настоящего времени и на период в течении 24 часов. т.е. если я отправляю запрос днем, то данные за у…
Начала изучать yii2 advanced. Но никак не могу найти подходящие курсы, уроки чтобы прям пошагово по урокам было показано рассказано, все с нуля. Я полный ноль в фреймворках. Подскажите где найти нормальные курсы или уроки.
Лучшие практики и инструменты для разработки на React, которые стоит начать применять как можно раньше
React дает разработчику большую свободу действий, но большая сила требует большой ответственности.
Для новых разработчиков, которые еще не знают, что и как, нет четкого руководства к действию. Им сложно разобраться в инструментах и паттернах, в результате они решают одни и те же проблемы десятками разных способов – и обычно не самыми лучшими из возможных.
Очень важно уже в начале обучения взять на вооружение лучшие практики программирования на React и следовать им, вырабатывая хороший стиль. В этой статье вы найдете целых 6 практик, которые вы должны опробовать как можно скорее, если еще не сделали этого.
1. Тестирование
Большинство начинающих программистов боятся тестирования – и в результате тратят много времени на отладку и дебаггинг, вместо того, чтобы писать код.
Но возрадуйтесь – нет ничего проще, чем тестирование проектов React. Вот тест, который проверяет правильность отображения компонента заголовка:
it('checks if the title component is in the document', () => {
expect(screen.getByText('Title')).toBeInTheDocument()
})
Вам понадобится две минуты, чтобы написать его. А в перспективе он сэкономит вам часы разработки. Для тестирования React-проектов обычно используются библиотеки react-testing-library и jest.
Если вы используете утилиту create-react-app и не пишете тесты, то у вас нет ни малейшего оправдания. Ведь вся инфраструктура уже настроена за вас – нужно только взять и написать ваш первый тест.
Начните практиковать тестирование как можно раньше, в будущем вы будете очень рады этому.
2. Структура папок и файлов
Новичку в React непросто разобраться с большим количеством файлов.
Очень часто разработчики группируют файлы в соответствии с их типом – экшены с экшенами, редьюсеры с редьюсерами.
Теперь намного проще перемещаться по дереву файлов в поиске нужной функциональности.
3. Styled-components
Существует много способов использовать стили в вашем веб-проекте: от нативного CSS до разнообразных препроцессоров вроде SASS, предлагающих удобный синтаксический «сахар». Однако все эти подходы предполагают отделение стилей от компонентов и затрудняют их повторное использование.
// внутри jsx-файла
<button className="btn-submit">
<button/>
// внутри css-файла
.btn-submit {
}
Если вам не нравится засорение JSX-разметки атрибутами className и хочется более абстрактного взаимодействия со стилями, обратите внимание на библиотеку styled-components. Она позволяет объявлять стили как отдельные компоненты и поддерживать код более чистым.
Styled-components поддерживает пропсы, благодаря этому удобнее работать с условными стилями.
Классовые компоненты в React постепенно умирают, все активное сообщество перешло на компоненты-функции. Если вы еще не приняли на вооружение эту хорошую практику, то давно пора сделать это.
Хуки React – это возможно самое лучшее, что есть в библиотеке, так что используйте их на всю катушку.
5. Библиотеки для обработки форм
Обработка форм, вероятно, самая распространенная функция большинства веб-приложений. И самая нудная и болезненная. Если вы используете ванильный метод onChange, то прекрасно понимаете это.
К счастью, для React создано много хороших утилитарных библиотек, в том числе и для обработки и валидации форм. Например, Formik и react-hook-form. Нет никаких причин не использовать их. Простая декларативная обработка форм – мечта любого веб-разработчика.
6. Линтер и форматирование кода
Этот пункт относится не только к React, но и к программированию в целом.
Чтобы ваш код был чистым и аккуратным, используйте инструменты автоматического форматирования и проверки – ESlint и Prettier. Они могут не только выровнять все отступы, но и обнаружить распространенные ошибки и опечатки, которые вы могли не заметить, и в целом экономят много времени и нервов.
***
Итак, самые лучшие практики разработки на React:
тестирование;
грамотная файловая структура проекта;
использование функциональных компонентов;
и перекладывание всех рутинных задач на автоматизированные инструменты.
Есть главный файл script.js и я хочу разбить код внутри на другие файлы, а в главном файле просто их импортировать, как можно это реализовать?
Моя попытка:
<script src="js/script.js" type="module" defer></scrip…
я начинающий в web’e,написал простенький сайт, проверил его в PageSpeed,для телефонов показывает 88, для десктопов 98.
У меня есть пару вопросов:
1)Возможно глупый, но все же:
Есть ли разница в скорости, если подключить .css отдельным файл…
Вопрос таков: я новичок в программировании начал с того что не плохо было бы выучить вёрстку а потом ещё JavaScript (сейчас только html и учу css), но первым языком программирования стал пайтон/питон/python и сейчас выучил основу, а теперь…
Мы разберем не такие известные, но довольно часто используемые инструменты JavaScript, которые помогут облегчить жизнь веб-разработчика. Необязательно зацикливаться только на трех основных фреймворках.
XML – один из самых популярных расширяемых языков разметки. В небольшом обзоре рассказываем о редакторах, которые позволяют работать с ним наиболее эффективно.
Есть переменная которая изменяется в родительской компоненте, я передаю эту переменную в дочернюю компоненту и нужно сделать так чтобы эта переменная при изменении в род. компоненте сразу же менялась и в дочернем:
<template>
<di…
Инструменты и ключевые навыки, которыми нужно владеть React-разработчику в 2021 году, чтобы быть востребованным специалистом.
— Читать дальше «Что нужно знать React-разработчику в 2021 году»
…
В chrome window.onunload отлично работает, но в Firefox и Opera оно не работает.Почему?Как мне это исправить?Вот код:
window.onunload = function(){
let elems = document.getElementsByClassName("take");
let dict = {};
for (var i =…
Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.
— Читать дальше «Адаптивная вёрстка: что это и как использовать»
…
Подскажите, пожалуйста, есть ли какие нибудь общие официальные рекомендации, о том, сколько максимально килобит JavaScript может быть на странице, что бы страницу можно было бы считать быстрой и удобной для пользователя, с точки зрения отр…
Есть два массива, нужно их сравнить и при каждом совпадении добавлять определенному элементу класс:
Первый массив
skills: [‘Validator’, ‘Pitch trainer’, ‘Organizer’, ‘Coach’, ‘Facilitator’, ‘LCA expert’],
Совместно с Яндекс.Практикумом рассказываем о популярных уязвимостях во фронтенде, о которых должен знать мидл или тот, кто хочет им стать. Также: лекции, курсы, XSS- SQL-сканеры и awesome-списки.
Мне нужно чтобы когда человек вышел с моего сайта, который сделан на Flask( python ), удалить фотографии из бд. Могу ли я сделать это на python? Если да напишите пж как, если нет, то напишите пж на каком языке это возможно и прикрепите пжл…
b и a это объекты и мне нужно в название их свойств вставлять название свойства другого объекта, вот функция:
sortBy(index) {
this.columns.forEach((col) => {
this.data.sort((a, b) => {
return b[col[index].fiel…
Свежие комментарии