Пятница, 22 июля 2022 02:28

Как выглядит сайт на реакте. Как опубликовать ReactJS App на Heroku. JavaScript.RU

Оцените материал
(1 Голосовать)

Бороздя просторы Глобальной Сети, приходишь к парадоксальному выводу: существует немалое количество, в том числе, веб-разработчиков, которые слышали, разумеется, про React, но не имеют ни малейшего представления о том, как хотя бы выглядит приложение, написанное на реакте. Будем считать, что данная статья призвана восполнить пробел, приняв на себя соответствующую нишу SEO-запросов.

 

JavaScript.ru. Удаленное сообщение форума
JavaScript.ru. Удаленное сообщение форума

 

Оговорю сходу: с фронтендом автор сугубо на "вы". В отличие, видимо, от программистов форума JavaScript.RU, который, как представляется мне, ощутимо сдает позиции в последнее время: органично не перевариваю российское трамвайное хамство, тем более, когда проистекает оно анонимно, на веб-ресурсах интернета и под никами. Не сдержался, оставил женственным мальчикам это сообщение, которое не было отвечено, а напротив: тут же было, разумеется, удалено... ну да и хер с ним, с форумом. В очередной раз поразило своеобразие ментальности людей, живущих в мире кодинга; в очередной раз порадовался, что не причисляю себя к оным... навыки программирования - это одно, мировосприятие же айтишника и профессиональная его деформация - в корне иное.

 

Dev banner 2

 

Aetae только что ответил в теме, на которую Вы подписались:

Такой вопрос: а зачем обновлять если работает?

С наилучшими пожеланиями,
Javascript-форум

 

Aetae только что ответил в теме, на которую Вы подписались:

Открывай отладчик и сравнивай чем конечный результат в результирующем html\css коде отличается в разных версиях, после чего ищи: что бы могло к этому привести.
Шансы что кто-то тут сталкивался с той же проблемой малы, что кто-то поставит себе обе версии либы и разбирётся чисто ради тебя - ещё меньше.

С наилучшими пожеланиями,
Javascript-форум

 

рони только что ответил в теме, на которую Вы подписались:

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

С наилучшими пожеланиями,
Javascript-форум

 

ОК, "специалистов нет" - стало быть, нет. Продолжим.

 

Лирическое отступление. JavaScript.RU

Когда на техническом форуме, позиционирующем себя как способ решения профильных задач, в ответ на технически же грамотное описание проблематики местный "специалист" позволяет себе стиль "никто тут ради тебя заморачиваться не будет, блаблаблабла..." - это не более и не менее как многажды набившее оскомину бессмертное русское хамство, давно ставшее привычным для рунета. Бесконечно же влюбленный в себя айтишник, уверенный в том, что весь мир вертится вокруг него и спрятавшийся за ником, дабы в восторге от себя любимого вот эдак банально хамить - попросту мудило, в детстве, вероятно, наживавшее себе мозоли на пальцах, подглядывая за мамкой, опосля чего удалось более-менее сублимировать детский онанизм в псевдовзрослое дрочилово над кодом. Дальнейших тебе успехов на выбранном пути, JavaScript.RU; "каждый выбирает для себя", говоря словами Левитанского.

 

Отвечая на один из вопросов, вынесенных в заголовок: ReactJS App способен выглядеть, например, как приложение, доступное по этой ссылке. Попросту говоря, понадобилась мне такого рода иллюстрация к одной из статей (линк в футере react-app) WP-блога, и решил, что попробую сделать этот онлайн-тест самостоятельно, не обращаясь к многочисленным плагинам wordpress. Получилось простенько, но со вкусом; задуманный функционал полностью реализован, да и показать не зазорно.

 

Памятка. Как опубликовать rails-приложение на Heroku.

 

Пара-тройка рекомендаций тем, кто захочет впервые опробовать React. Самое первое, начинайте с Create React App (works on macOS, Windows, and Linux), это отличная тузла, сразу после клонирования из гитхаба и запуска вы получаете готовую рабочую основу приложения.

В которую имеете возможность внести любые изменения (или даже для начала этого не делать), и тут же задеплоить на полностью бесплатный в контексте подобных задач Heroku. В скобках, регистрация на Heroku не потребует от вас ввода данных банковской карты, что крайне немаловажно (судя по тем же SEO-запросам) для жителей РФ сегодня.

Итак:

$ npm run build

 

, по окончании чего в корне create-react-app появится новый каталог build. Это и есть приложение, с которым вы только что работали, но уже оптимизированное под production; скопируйте для удобства новый каталог в любую иную директорию и, находясь на уровень выше build, выполните: 

$ npm init -y

 

В качестве результата получаем практически готовый package.json, в который неплохо бы добавить всего одну строчку:

"start": "node app",

 

Теперь создайте здесь же еще один новый файл:

app.js

const express = require('express')
const path = require('path');

const app = express()
const port = process.env.PORT || 3000 // Heroku will need the PORT environment variable

app.use(express.static(path.join(__dirname, 'build')));

app.listen(port, () => console.log(`App is live on port ${port}!`))

 

Далее:

$ npm i --save express

 

, и уже пробуем стартануть:

$ node app.js
App is live on port 3000!

 

Работает? Отлично, стало быть, деплоим на Heroku:

git init
git add .
git commit -m "initial commit"
heroku create <your-new-react-app-domain> --buildpack https://github.com/mars/create-react-app-buildpack.git
git push heroku master

Последнее изменениеВторник, 11 октября 2022 08:37

Оставить комментарий

Добавьте ваш комментарий

All sorts of things

Комментарии в блоге