👋Итак, приступим. Меня зовут Евгений и я начинающий React-разработчик. Хочу поделиться с тобой своим опытом программирования и показать, что frontend - это просто и интересно. В этом канале я научу тебя разрабатывать веб-приложения на фреймворке React js. Изучим его концепты и фичи, которые использую лично.

Для начала выбираем IDE(редактор кода).

Их довольно много, но я пользуюсь Visual Studio Code. У него есть всё, что нужно. Множество плагинов и расширений позволяют делать редактор под себя.

Также рекомендую: WebStorm, Atom и Sublime Text.

Приватный чат для обсуждений: https://t.me/+Hu5Tyef-VtU5ZjNi

Я создал канал в Дзен! В нём также будет публиковаться контент по React и frontend. Подписочку❤️

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...🤯