React | Разработка приложений

Считаешь, что бесплатные интенсивы и марафоны - не то, где можно получить ценные знания? Тогда брось себе вызов и попробуй пройти наш летний интенсив по JavaScript полностью. Если хочешь в нашу крутую команду, то твой 1 шаг - регистрация по ссылке. Стань тем, кто уже зарабатывает применяя полученные знания на практике! Регистрация тут: https://in.methed.ru/md/5a0419304b7b05f98714dc2899c0814d?utm_source=telegram&utm_medium=june&utm_campaign=react_org

⚡ as const более строгий инструмент, чем readonly-типы, потому что он запаковывает вашу константу с наиболее точным типом из возможных. Теперь можно быть уверенным: никто и ничто не сможет это изменить. Кроме того, при использовании as const ваша IDE всегда будет показывать точный тип используемой сущности.

🔥 readonly - значение может быть присвоено только в момент инициализации, или в конструкторе того же класса. Любые другие присваивания значении запрещены. Мутировать структуры, с которыми работаешь, — плохая практика. Это сразу приводит к ряду последствий в приложении: появляются проблемы с проверкой изменений в компонентах, за которыми не происходит обновления отображения после мутирования данных.

Вы еще не слышали про телеграм-канал LEFT JOIN? Это медиа о технологиях и данных, в котором собрана самая главная информация про: 🔵 применение AI-моделей почти во всех сферах работы и жизни, 🔵 всемогущий язык SQL и работу с базами данных, 🔵 стартапы на основе нейросетей, которые заслуживают не меньшее внимание чем ChatGPT, 🔵 то, как нейросети могут облегчить работу аналитика данных. А еще у авторов сейчас выходит третий сезон подкаста Data Heroes — честные разговоры с настоящими супергероями, чья сила в данных. Если вы еще не слушали первые два — наверстывайте упущенное и... 🔜 Подписывайтесь на @leftjoin!

Не используйте такие слова как ✓ "изображение" ("image"), ✓ "фото" ("photo"), ✓ "картинка" ("picture") в атрибуте alt тега <img>. Скринридеры уже сообщают что img элементы являются картинками, так что нет необходимости включать эту информацию в текст атрибута alt.

Прекрати мечтать и стань мидлом за 50 дней Опытные Frontend-разработчики создали несколько бесплатных каналов, в которых регулярно выходят топовые посты для начинающих. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. JavaScript тесты — канал с тестами и задачами, который прокачает твои навыки во Frontend-разработке. CSS доширак — готовые анимации, hover-эффекты и прелоадеры, которые можно вставить в свой проект и настроить пока заваривается Доширак. Развивайся с нами, ведь так проще!

В React Экспортировать и импортировать можно практически всё что угодно, не только JS, но и CSS, файлы изображений и т. д. В React часто не нужно добавлять расширение файла при импорте JavaScript. Расширения нужны только при импорте в JS других типов файлов.

В JavaScript С помощью модулей ES удобно распределять код по файлам приложения. Мы экспортируем то, что хотим передать в другие файлы нашего приложения (в основном переменные и функции), а затем импортируем их там, где нужно. Можно осуществлять множественный экспорт/импорт с помощью фигурных скобок (и ключевых слов export/import) или одиночный без скобок (с ключевыми словами export default и import). Такой подход позволяет сделать код модульным. Мы можем писать код там, где он нужен, не собирая всё в один большой файл. В примере ниже показано, как вызвать функцию getLocalTime из отдельного файла в app.js.

В JavaScript В JavaScript есть сокращённая форма записи условных операторов if-else — тернарная операция (ternary). В отличие от if-else тернарные операции являются выражениями. Это даёт большую гибкость, позволяя использовать их так же, как и любые другие выражения (такие как ${} в случае с шаблонными строками). Тернарные операции не всегда лучше оператора if-else. Например при обработке множественных условий первые окажутся неудобочитаемыми.

Успей проскочить бесплатно на 7-дневный интенсив по frontend-разработке! Интенсив проведёт fullstack-разработчик с 10-летним стажем Роман Чернов. Старт 13 июня. За эти 7 дней ты с нуля сверстаешь качественный сайт, который не стыдно добавить в портфолио или продать, освоишь азы работы с фреймворком Angular и получишь море бесценного опыта в вёрстке сайтов. 👉 Проскочить можешь тут

В React Промисы и async/await используют для создания сетевых запросов, таких как обращение к API. Библиотеки вроде fetch API или axios применяют промисы для запросов, выполнение которых может занять неопределённое время. Ещё промисы и async/await в подобных библиотеках используют для формирования сетевых запросов.

В React Синтаксис spread отлично подходит для динамического создания новых объектов и массивов, зачастую его применяют в React-библиотеках (например Redux) для более предсказуемого изменения данных. Кроме того, в React такой приём можно использовать, для того чтобы передать данные объекта в виде набора свойств, не обращаясь к ним по очереди: для этого мы можем расширить объект в компонент, поскольку при этом мы получим объект набора свойств.

В JavaScript Синтаксис spread позволяет расширять объекты (их пары ключ-значение) и массивы, получая новые объекты. Этот синтаксис работает только при создании нового объекта или массива. Синтаксис spread хорош для объединения свойств старого объекта в новом. Когда объект или массив расширяется, создавая новый объект или массив, появляется временная копия.

Так же, как и цикл for, методы массивов map, filter и reduce позволяют перебирать элементы массива: ✓ .map() — позволяет преобразовать каждый элемент массива; ✓ .filter() — создаёт новый массив со всеми элементами, которые прошли проверку, заданную в функции; ✓ .reduce() — позволяет преобразовать весь массив в соответствии с нашими нуждами (даже в другой тип данных). Указанные методы короче и читаются легче, чем цикл for. Комбинируя эти методы и стрелочные функции, можно ещё больше сократить код.

Со стрелочными функциями можно использовать сокращённый синтаксис. Это делает весь код короче. Можно заменить ключевое слово return (возврат происходит по умолчанию, если нет фигурных скобок) и тело функции (фигурные скобки) большой стрелкой (=>). Проще работать с объектами и классами через ключевое слово this. Кроме того, можно удалить скобки вокруг одиночного параметра.

Ключевые слова let и const дают более предсказуемые переменные, чем те, что объявлены через var. У них блочная область видимости: такие переменные существуют только в пределах участка кода, ограниченного фигурными скобками. Такой подход позволяет избежать конфликта переменных, делая код более предсказуемым. let используется для переменных, которые нужно переназначить после создания. Переменные, объявленные с помощью const, невозможно переназначить или изменить.

Параметры по умолчанию часто применяют при определении свойств. В примере выше используем деструктурирующее присваивание для получения параметра ‘username’ из свойств объекта. И хотя свойство не передано, дефолтное значение установлено на ‘guest’ и компонент всё равно работает.

Чаще всего деструктурирующее присваивание используют, чтобы получить значение одиночного свойства объекта. Если мы передаём в заданный компонент только одно свойство объекта, все остальные нам не нужны. Вместо того чтобы давать ссылку на свойства, мы можем деструктурировать их и передать в компонент одну переменную.

🚀 Методы .map(), .filter(), .reduce() можно использовать для преобразования данных. Обычно их применяют для динамического отображения элементов и компонентов с помощью .JSX, поскольку эти методы можно связывать в цепочки для последовательных трансформаций.

💪 Стрелочная функция Если в JavaScript можно создать стандартную функцию, можно создать и стрелочную. Как правило, второй вариант предпочтительнее, потому что синтаксис проще. Чаще всего стрелочные функции используют для создания компонентов, а также для методов массивов высшего порядка, таких как .map() или .filter().