Хочу дать вам некий стимул и мотивацию для дальнейшего пути)

Проекты написанные на React.js:
1. Facebook
2. Netflix
3. Instagram
4. PayPal
5. Yahoo
6. Codecademy
7. New York Times
8. WhatsApp
9. Dropbox
10. Airbnb

Мы сделаем невозможное🔥

Не знаю каким чудом это получится, но если под этим постом будет 20❤️, я набираю команду для разработки мессенджера на React! Участниками также могут быть подписчики данного канала. Весь путь разработки будет здесь вместе с исходниками проекта.

Дерзайте❤️

Итак, воды достаточно. Для начала мы должны установить yarn. Это пакетный установщик, который загрузит базовые файлы приложения.

Если у тебя до сих пор не скачаны node и npm, то на них также оставляю ссылку ниже.

1. Открываем терминал и вводим данную команду: yarn create vite.

2. Жмём Enter и даём имя нашему проекту.

3. Теперь стрелочками выбираем React, а затем JavaScript. Там будет написано JavaScript и JavaScript + SWC. Не перепутайте. Мы будем писать на обычном js.

Если всё сделано правильно, появятся файлы приложения.

В терминале прописать: yarn. Данная команда активирует пакетный менеджер и установит все зависимости. Запускаем наш проект следующими командами: cd first-project. Это директория приложения. Теперь запуск: yarn dev.

Переходим по ссылке(local означает, что проект запущен на нашем устройстве).

Какой формат тебе нравится больше?

"❤️" - посты.
"🔥" - видео.

Структура проекта

Как вы могли заметить, я не добавил описания папке "components". Всё потому, что ей я хочу уделить отдельное внимание.

Если вы читали предыдущие статьи и посты, я рассказывал про компонентность и масштабируемость приложения в React.

В ней существует пока что одна папка - "screens". Она содержит в себе как раз те самые компоненты пользовательского интерфейса, которые мы видим на странице сайта.

Смысл компонентов в том, что работаем с одним html файлом, подключая разные JSX блоки(html + css, но с js)

Я прикреплю этот проект ниже чтобы вы могли сами посмотреть и потыкать его содержимое👇

Было полезно?
"❤️" - да.
"🔥" - ну пока что скучно.

Ну за это лайк❤️

Монтировать я не особо горел желанием, хочу чтобы вы видели картину настоящего

Осталось всего лишь 8...🤯

Хуки(Hooks)

Расскажу своё понимание без лишней пугающей воды, потому что грузить вас сложными и заумными словами для меня - это преступление🚔.

Итак, хуки - это методы, которые используются для работы с локальным хранилищем нашего проекта. Что такое локальное хранилище? На самом деле - это временный набор данных(чисел, объектов или слов).

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

Важно понимать, что данный пример показывает лишь обобщённое представление, а не полноценный принцип работы. Хуков довольно много, но в видео-уроках я буду рассказывать и показывать всё, что использую сам в разработке проектов.

Исходя из данной теории, всё понятно?
"❤️" - да.
"🔥" - жду видео.

Хуки: useState и useEffect

Показываю как применять хуки на практике.

Данный видео-урок также опубликован в Дзен👇.

"❤️" заслужил?

Озвучка пока в разработке:)

Топ 3 ошибки при изучении React

Они никак не связаны с написанием говно-кода или подобными ситуациями. Через них прошёл и я, поэтому, хочу облегчить ваши драгоценные время и нервы.

❌ Ошибка №1 - отсутствие практики. Без этого аспекта любые теория и курсы не помогут тебе стать продвинутым спецом в сфере IT. Есть великие слова: 20% усилий - 80% результат. Я перефразирую. 20% теории - 80% практики. Больше к этому не возвращаюсь.

❌ Ошибка №2 - не читать документацию. Из-за появления Chat GPT и других умных нейросетей начинающие разработчики забывают существование документации и сразу лезут тыкать по клаве, чтобы за них нашли и решили какую-нибудь проблему. Не делайте так! Когда ты сам находишь решение проблемы(да, это очень долго и муторно), к ней не возвращаешься в дальнейшем.

❌ Ошибка №3 - вымышленный пик-момент. Я назвал это так, потому что, изучив определённую "базу", есть особи, которые считают себя Аполлонами всея величия. Очень важно всегда практиковать и изучать что-то новое одновременно.

Согласны?

В чем разница React, Vue и Angular?

В комментариях задавались вопросом про актуальность фреймворка Angular, давайте разбираться.

1. Vue
Его довольно часто выбирают начинающие разработчики из-за быстрого старта, но есть большое НО. Фреймворк очень простой и подходит для каких-нибудь стартапов. Лично я не рекомендую изучать его первым, потому что у вас не будет полного представления о frontend разработке.

2. Angular
Данная библиотека не считается очень актуальной в данное время, но пользуется хорошим спросом в крупных бизнес-проектах.

3. React
Думаю, тут вы итак уже всё знаете:)

Задавайте свои вопросы в комментариях, я всегда рад помочь❤️

Оптимизируем React-приложение

Данное свойство основывается на нечастом повторении редко-обновляющихся событий. К примеру, у нас есть каталог товаров на сайте. При каждой загрузке страницы мы обращаемся к бэкенду(чтобы вытащить данные товаров). Во время большого онлайна нагрузка будет слишком большая. Этого мы должны избежать.

👉 React.useState кэширует данные один раз и вместо сервера достаёт их из кэша. Нагрузка будет значительно ниже. Опять же, всё зависит от логики вашего кода.

👉 React.useCallback также занимается кэшем, но не данных, а методов, функций и т.п. Очень полезно использовать в крупных проектах для снижении нагрузки на сервер.

Вам нравится такой подход к обучению?