Как писать десктопные приложения на React JS | React + Electron

Всем привет, сегодня покажу как разрабатывать десктопные приложения на react-e, как организовать файлы, настроить запуск для режима разработки и продакшина и собрать приложение, а также поговарим о настройке роутинга в react-e при разработке десктопных приложений, так как там есть небольшые отличия от веб-приложений.
Git:
git-scm.com/downloads
"Как писать десктопные приложения на JavaScript":
• Как писать десктопные ...
"Как работать с файлами в Electron":
• Работа с файлами в Ele...
#react #desktop #electron #javascript #программирование #уроки #дляначинающих #web #reactjs #electronjs #ateros

[@DoSmth]

Крутой контент, не думал что все так доступно, спасибо!

[@_ateros]

Спасибо большое 🙏🙏 Очень приятно получать такие комментарии

[@hyps9448]

Спасибо большое, быстро и понятно

[@_ateros]

Спасибо)

[@slibnork8462]

Шикарно! то что нужно! Спасибо большое 🤜🤛

[@_ateros]

Спасибо 🙏 Рад, что вам понравилось)

[@nikolyovin]

просто пушка! спасибо большое!

[@_ateros]

Рад, что вам понравилось) 🙏🙏

[@bambalbino]

Спасибо!

[@fewart]

Полезное видео. Хорошая картинка и звук, удачи каналу, автору спасибо!

[@_ateros]

Спасибо большое, мне очень приятно 🙏🙏🙏

[@fewart]

@@_ateros Собрал проект, но картинки не подключились в режиме Production. Ниже в комментариях видел похожий вопрос, где вы посоветовали использовать переменные окружения через файл process.env. Создал такой файл в папке react-app в корне, вот его содержимое: FOLDER_PATH=build/static/media. Далее в модуле Header.jsx пробую подключить картинку логотипа: В результате картинка не отображается при запуске React-приложения, из панели разработчика в браузере тэг выглядит следующим образом: Направьте пожалуйста на путь истинный

[@_ateros]

Здравствуйте. Извините, не видел ваш комментариий. Попробуйте изменить FOLDER_PATH на REACT_APP_FOLDER_PATH, и перезагрузить приложение. Плюс, надо будет указать путь в ос начиная с диска - по типу D:/some-folder и т. д.

[@fewart]

@@_ateros а возможно путь указывать универсальный для разных ос? В этом же и есть прелесть разработки с использованием electron, что на выходе мультиплатформенное приложение

[@_ateros]

Попробуйте подставлять как вы делали, без диска. А потом напишите скрипт, который парсит index.html (тот, что в electron-app/src, после сборки), и меняет href='/...' на href='...' то есть вначале слэш удаляет и перезаписывает навые данные в файл index.html (пакет fs, для работы с файлами). И вызывайте этот скрипт через node перед сборкой - node script.js; npm run make.

[@user-wr4br7sr9q]

Некстрон очень интересно посмотреть!

[@drakonn90]

всё по делу, лайк

[@_ateros]

Спасибо)

[@evilneo2340]

видос просто имба

[@_ateros]

Спасибо)

[@evilneo2340]

@@_ateros можешь пожалуйста подсказать как собрать приложение для установки и запуска на линукс?

[@_ateros]

Вот этот гайд может помочь - www.electronjs.org/ru/docs/latest/development/build-instructions-linux

[@mdbm]

Отличный урок! Какие возможности доступны по взаимодействию с операционной системой ?

[@_ateros]

Спасибо)🙏 Все те же, что и в Node.js

[@thezorged]

ето тема тоже продолжай пжпжпжпж

[@_ateros]

Спасибо) 🙏🙏

[@user-eh8lb8nq5d]

Привет! Очень классно обьяснил. А как использовать Nodejs команды из реакт компонентов?

[@_ateros]

Привет. Спасибо 🙏🙏 рад, что вам понравилось) Для старта подойдет мой урок - "Работа с файлами в Electron JS".

[@user-sb4by5qp1v]

Супер! Огромное спасибо за урок!!! Но у меня есть вопрос: в папке static у меня есть папка media, в которой маркеры и прочие картинки, КАК ЕЁ ПОДКЛЮЧИТЬ???

[@_ateros]

Панодобятся переменные окружения. Добавьте файл .env в корневой каталог React-приложения. В файле определите переменную окружения, например: FOLDER_PATH=путь к папке в ОС //без кавычек А в самом проекте уже подставляйте, например вот так: Здесь мануал по переменным окружения в реакте - create-react-app.dev/docs/adding-custom-environment-variables/

[@user-sb4by5qp1v]

@@_ateros Огромное спасибо за ответ! Но у меня ничего не получилось: ситуация следующая, в проекте react-app я монтирую -- import tab from "../assets/tablechim.png" и далее . После сборки проекта в DevTools вижу картинку по такому адресу - localhost:3000/static/media/tablechim.c5ffbe244d4175740e17.png, тот же самый путь и такое же (изменённое) имя файл получает и после npm run build. Когда я создаю переменные окружения и указываю путь FOLDER_PATH=src/assets/ после сборки проекта картинка не отображается. Вот полный путь к папке, начиная с проекта -- electron-react eact-app\src\assets. Сломал голову, что я делаю неправильно? Helpppp!!!! Может путь к файлу localhost:3000/static/media/tablechim.c5ffbe244d4175740e17.png можно както прописать в index.js или index.html компонента electron-app ?????

[@_ateros]

Попробуйте в FOLDER_PATH, прописать путь начиная с диска. Например - D:/путь к папке проекта/src/assets

[@user-sb4by5qp1v]

@@_ateros Спасибо, всё получилось!!! И ещё один вопрос, если можно: есть ли возможность из под Windows разработать приложение например под Linux?

[@_ateros]

Рад, что все получилось 🙏👍 Самый простой вариант - установить линукс на виртуальную машину, писать проект на виндовсе, а в виртуалке просто собирать.

[@gregdmitriev2784]

ещё TS и Redux можно накинуть - так. для тренировки )

[@_ateros]

Возьму на заметку, что вам это интересно 😉

[@gregdmitriev2784]

@@_ateros да, просто сейчас это топчик для фронта. 9 мес. назад курс по react/redux проходил, потом по TS начал и не закончил. Сейчас на интернатуре все эти "пробелы" вылазят боком ) считай для меня сейчас это первая реальная практика. И ни в какое сравнение с курсами не идёт)) долго избегал практики redux & ts, так она сама меня нашла ! Так что, хош не хош - а "джентльменский набор" фронта 2023 - это классический HTML,CSS(+preoroc), JS, Reac, Redux (и не всегда Readyx-toolkit, хоть он и легче) & Typescript + Docker, + понимание файловой структуры. Сегодня для новичков маловато уметь самому лепить калькулятор или модалку. Вот хорошая практика: Axios, Auth0, реализация окна регистрации и авторизации с отправкой/получением данных с сервера, приватный и публичный роутинг, доступ к страницам только авторизованным юзерам, валидации пароля/email с помощью регулярок, реализация админ-ролей в приложении (админ может всё), квиз для пользователей, тесты, реализация деплоя на AWS. И это всё на Redux/TS.

[@_ateros]

Полностью согласен! Очень хороший roadmap по скилам получился 🔥🔥👍 Если кто-то будет читать этот комментарий и на дворе ещё 2023, а вы хотите стать react разработчиком - берите и подряд учите (и тренеруйте хотя-бы на пет-проектах) все, что написал Greg Dmitriev.

[@bravo_1321]

Можна добавить `"homepage": "./",` react-app/src/package.json, чтобы не добавлять точку в index.html каждый раз после билда

[@_ateros]

Homepage отработает на сервере, где index.html находится в корневом каталоге. Но у нас index.html будет запускаться внутри ос, через протокол file (мы не знаем где точно). Чтобы сделать, так как вы хотите, надо дописать pre-build скрипт в котором переопределять public url, на основе переменной среды где указан точный путь к папке в ос.

[@thezorged]

Записвай видео как создат приложение для телефона через js пжпжпж

[@_ateros]

Скоро выйдет урок по созданию небольшого pwa-приложения для телефонов 😉

[@thezorged]

@@_ateros 😍😍

[@elmirweb6583]

Мне кажется, что nextron js в данном случае лучше.

[@_ateros]

Да, надо будет и по nextron тоже потом урок сделать

[@axel-sheen]

только ты кажется забыл объяснить чем именно не подходит browser router, ведь с ним всё работает точно так же

[@_ateros]

Здравствуйте. Это связано с тем, что в продакшене мы будем открывать файл, а не адрес сайта (2:59)

[@DerekGaming]

Все хорошо, но можно ли запускать реакт и електрон одной командой, ибо неудобно, так еще реакт браузерное окно открывает

[@_ateros]

Можете попробовать boilerplate - github.com/electron-react-boilerplate/electron-react-boilerplate

[@DerekGaming]

@@_ateros спасибо большое)

[@user-sb4by5qp1v]

Ещё раз пересмотрел Ваш урок, спасибище!!! Но у меня возникла проблема, она заключается в том, что в папке public (по сути это корневой каталог) у меня есть шаблоны, которые подгружаются функцией: вот строка ---- process.env.PUBLIC_URL + `/${props.template}`, // assuming template --- когда я убираю слэш перед ${props.template}, у меня ничего не запускается, а со слешем, не работает... Help me please...

[@_ateros]

Спасибо) Рад, что вам понравился урок 🙏 Попробуйте перед слэш добавить значение перемонной среды в которой храниться путь к папке public в ос.

[@user-sb4by5qp1v]

@@_ateros У меня сработало, когда я убрал process.env.PUBLIC_URL и оставил только путь `${props.template}`, спасибо за быстрый ответ, с Вами всегда очень приятно общаться!!!

[@_ateros]

И вам спасибо, что написали - ваш ответ поможет другим 🙏

[@user-sb4by5qp1v]

@@_ateros А вот ещё вопрос, как установить свою иконку в приложение. Документация пишет, что "needs to be placed in the buildResources directory (defaults to build). It is important to provide icon.ico (or icon.png), as otherwise the default Electron icon will be used." А вот в нашем случае папки build нет? Просто создать её с картинкой?

[@_ateros]

Можете посмотреть урывок видео где я показывал, как сделать калькулятор на электроне, там есть про это (перемотайте на 3:19) - kzbin.info/www/bejne/aGSTgWxvg52Xgrssi=MpaN8C91v33iUAUE

[@romanchernyshov2632]

Спасибо!