React - это библиотека JavaScript, которая позволяет создавать пользовательский интерфейс и осуществлять реактивные изменения на сайте без обновления страницы.

Данный подход называется SPA или же Single Page application.

Фреймворк является базой frontend разработки. Зная React ты без особого труда сможешь перейти на тот же Vue или Angular.

Всю статью можно прочесть ниже👇

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

Проекты написанные на 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 также занимается кэшем, но не данных, а методов, функций и т.п. Очень полезно использовать в крупных проектах для снижении нагрузки на сервер.

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