QA Fest — конференция №1 по тестированию и автоматизации. Финальная программа уже на сайте >>
×Закрыть

Как сделать многостраничный сайт на React?

LinkedIn
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter
Допустимые теги: blockquote, a, pre, code, ul, ol, li, b, i, del.
Ctrl + Enter

такс народ, есть ли вариант сделать реверс вебпак сборки (реакт) что бы полностью востановить исходники?

А почему бы не выучить сначала реакт а потом уже начинать работу искать?

рынок труда там где я живу раз в 20 меньше чем в Украине, выбирать не приходится

Можно попробовать удаленно или фриланс

Робив подібного розміру проект для автоматизації деяких своїх задач. Все здається спочатку просто а потім не встигаєш...

Оскільки часу майже не лишилося, краще не звязуватися з роутером, з ним теж доведеться розбиратися. Я б узяв github.com/...​facebook/create-react-app. Затягнув би react-bootstrap.github.io і на цьому швиденько би написав щось таке (накидав за хвилин 15): codesandbox.io/s/139y259z4j.

Сподіваюся це допоможе. Якщо зявляться запитання можете запитати мене напряму: nechais@gmail.com

Дякую, якраз це і намагаюся зробити. Знайшов ось цей відос на цю тему www.youtube.com/...​kR5EKI68&feature=youtu.be

Тестовое задание? Возьми какой-то готовый бойлерплейт react+react-router+redux и запили магазинчик, там работы на день с перекурами, тем более если не изоморфное и без бэкенда. Или уже совсем гуглить разучились? goo.gl/RCDDRg

Если backend не нужен — можно построить в Gatsby. Результатом будет статический сайт сделанный в React. Навигация между страницами в Gatsby уже настроена.
www.gatsbyjs.org/tutorial
Либо React + React-Router.

Во первых за неделю и на пять страниц интернет магазины не делаются. Во вторых если это нормальный многостраничный сайт то на фига тратить в три раза больше усилий на страницы на яваскрипте вместо вменяемого бекенд решения? Только потому что нынче модно так делать. Думаете пользаку сайта есть дело до того как написан сайт? Я понимаю что у вас такое задание но вы это не сделаете с вашим уровнем знаний даже без реакта, чуда не будет. Тем более заказчик явно не в себе.

ну так надо было так и на писать что это не реальный сайт а просто демка изображающая сайт для демонстрации знаний фронтенда. Но поскольку вы этого не знаете то забудте про это собеседование и все. Или вы думаете что кто то на ДОУ даст волшебный совет что не придется изучать ничего?

`

Во вторых если это нормальный многостраничный сайт то на фига тратить в три раза больше усилий на страницы на яваскрипте вместо вменяемого бекенд решения?

` интересно какое такое бекенд решение заменяет фронт енд?

любой фронтенд грузится с бекенда — как данные так и разметка. Не бывает никакого фронтенда без бекенда. Сайт без яваскрипта существовать — сайт на яваскрипте без серверной части нет. Поэтому сайты на яваскрипте — двойная работа — все равно надо делать и бекенд часть.

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

сайты на яваскрипте

` не знаю откуда пошло называть Яваскрипт но не будем об этом покажите мне любой сайт где на фронте нет javascript-та?

Другой вопрос, что полноценный проект должен иметь и бек-енд и фронт-енд. `

а зачем говорить о неполноценных проектах

покажите мне любой сайт где на фронте нет javascript-та

покажите мне любой сайт где без него нельзя обойтись. Если это конечно не какая нибудь браузерная игра а обычный сайт типа информационного инет магазин и прочее. Интернет сайты существовали и прекрасно работали еще когда вы ходили под стол пешком и даже близко не было моды на яваскрипт (правда была мода на заставки на флеше н обычно там была кнопка Пропустить). Поинтересуйтесь когда был создан амазон например.

в вашем комментарии чувствуется боль на javascript =)

вот тоже заметил «давайте юзать что угодно но только не этот ’треклятый js’»

юзать нужно то что решает задачу с минимумом усилий и денег а не то что модно. Юзать реакт потому что его юзает фейсбук или ангуляр потому что это делает гугл — как минимум глупо. Во первых у этих компаний милиарды денег на разработку. Во вторых никто их присутствующих не делал не делает и скорее всего не будет делать проекты уровня фейсбука или гугле докса где подобные решения оправданы и пользователь готов терпеть тормоза на мобильных девайсах.
Тормаза на сделаном вами сайте никто терпеть не будет быстрее перейдут на аналогичный которых море. Далекие от ИТ заказчики покапереплачивают за сайты на яваскрипте только потому что прожект манагеры впаривают им что без этого никак.

Далекие от ИТ заказчики покапереплачивают за сайты на яваскрипте только потому что прожект манагеры впаривают им что без этого никак.

а я-то думал, что их переписывают, потому что они выглядят как дерьмо из 2000 года, тормозят из-за постоянной отправки форм на сервер/обратно (вместо легонькой json’ки), не скейлятся под нагрузкой и неподдерживаемые в принципе из-за отсутствия специалистов по каким-нибудь jsp/web forms

Они выглядят как дерьмо изза дизайна и неадаптивной верстки а не изза отсутствия яваскрипта. И говорить про тормоза при нынешних скоростях инета просто смешно. А вот тормоза яваскрипта в мобильных браузерах это как раз не смешно.
И кто вас заставляет писать на jsp?
А говорить о масштабировании при нынешних копеечных ценах на железо и облачные сервисы просто смешно.

тормозят из-за постоянной отправки форм на сервер/обратно (вместо легонькой json’ки),

работа програмиста дороже чем стоимость жеоеза и трафика. Собрать данные на сервере из БД и выплюнуть сформированый (с помощу старого доброго пыха) HTML гораздо проще чем писать десятки функций API c json а потом еще писать логику на фронтэнде чтобы все это разобрать и разложить. Тем кто делает на яваскрипте кажется что это проще — е надо изучать базы данные алгоритмы всякие, бизнес логику и прочее. Но кому то это все равно надо делать. В результате идут затраты и на бекенд и на фронтэнд.

Тем кто делает на яваскрипте кажется что это проще — е надо изучать базы данные алгоритмы всякие, бизнес логику и прочее.

я начинал с баз данных, алгоритмов и дотнета, и сейчас мне написать бекенд с АПИ(который будет актуален не только под фронтенд, но и под нативные мобилочки, на минуточку) и фронтенд под него — проще, чем морочиться с исключительно серверной генерацией контента.

большинству сайтов нафиг не нужно мобильное приложение адаптивная верстка вполне справляется и работает на любой платформе. Это еще одна модная фишка — мобильные приложения. Оправдано только для серьезных сервисов с не нехилым количеством пользаков — типа OLХ и иже с ним.

Это еще одна модная фишка — мобильные приложения.

все что не вписывается в существующую техническую экспертизу — не нужно ? :D

ОБЪЕКТИВНО — не нужно все что не имеет здравого смысла и экономического обоснования. Субъективно — нужно то за что лохи готовы платить. Но я технарь а не бизнесмен посему обсуждаю ТЕХНИЧЕСКИЕ аспекты на форуме для ДЕВЕЛОПЕРОВ. Как впарить лоху то что ему не нужно — это другие профессии.

И объективно все это нужно ... бизнес парится по поводу всякого PWA и т.д чтобы максимум интерактивности при минимуме обращений к серверу + сеть накладывает ограничения + мобильный трафик уже превышает трафик с десктопов, а это самые реальные деньги для бизнеса ... поэтому так ... как минимум в последние годы

Собрать данные на сервере из БД и выплюнуть сформированый (с помощу старого доброго пыха) HTML гораздо проще чем писать десятки функций API c json

У меня стойкое чувство, что вы считаете будто собрать данные с бд и закатать и в хтмл это бесплатно и как два пальца. Поддерживать миллион темплейтов, пилить хтмл, цсс, регулярно сблевывая от разных jsp и сопутствующих костылей никому из бекендеров не упало.

это не бесплатно
Но вам все равно надо закатать либо в хтмл либо в джсон. Но с хтмл вам не надо писать еще логику на странице. И хтмл формирует страницу сразу а с АПИ придется либо по нескольку функций на каждую страницу а значить не один десяток либо пи с кучей параметров что неудобно либо тащить данные на клиента и там ими манипулипровать что глупо и тормозит браузер (прелесть
по имени коллбек хелл — это само собой только не надо про костыли типа промисов).
И количество темплейтов там то же самое. Каким чудом вы уменьшаете количество темплейтов и css ? Генеря DOM яваскриптами? И это проще поддерживать и отлаживать?
И забудте вы про jsp на нем уже лет 10 никто не пишет. Даже на яве никто не пишет — котлин рулит.
Перестанте читать про модные тренды в инете и попробуйте сделать хоть один реальный проект с вменяемыми требованиями. Чушь порете. У меня опыт разработки и фронтенда и бекенда и кучи всего — могу реально сравнивать.

Но вам все равно надо закатать либо в хтмл либо в джсон.

Таки да, я предпочту джсон. Потому что обмен данными.

И хтмл формирует страницу сразу

Я знаю. И что?

а с АПИ придется либо по нескольку функций на каждую страницу 

Да, и что?

Зато, в отличии от генерации хтмла на бекенде, с использованием какогонибудь мерзенького шаблонизатора, логика отображения данных будет там, где и должна быть — в отображении данных, внезапно.

тормозит браузер

Ой да ладно. Даже фейсбук уже не тормозит. Фронт надо писать не руками из жопы просто. Никакой аргумент вообще.

прелесть
по имени коллбек хелл — это само собой только не надо про костыли типа промисов

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

Каким чудом вы уменьшаете количество темплейтов и css ?

Вжжух! И их становиться 0. Ноль. Потому что у меня в проекте нету фронта. Пусть вся эта срань валяется у ангулярщика, пилящего морду.

Генеря DOM яваскриптами? И это проще поддерживать и отлаживать?

Да. Я вообще бекендер, но для себя пописывал на реакте. Нет никаких проблем, бекенд <-джсон-> реактморда = идеальный стек.

И забудте вы про jsp на нем уже лет 10 никто не пишет.

И слава Б-гу.

Даже на яве никто не пишет — котлин рулит.

У вас гироскутер разрядился, в вейпе закончилась жижка и биток падает.

сделать хоть один реальный проект с вменяемыми требованиями.

Именно сейчас занимаемся этим. И все огонь. Жаль только ангуляр выбрали для фронта :(

Чушь порете. У меня опыт разработки и фронтенда и бекенда и кучи всего — могу реально сравнивать.

Я уже понял за ценность вашего опыта. Вы даже не можете понять, что апи нужно не только для того, чтобы отдавать данные на мордочку. И что есть примерно хренова туча других голодных апи с которыми нужно интегрироваться, и которые открыв рот, ждут что ваш проект начнет накачивать их данными. И что прикрутить мордочку поверх апи — гораздо легче как со стороны декомпозиции задач для управления процессом разработки комплексных систем, так и со стороны разработки чисто бекенда. Поэтому ваш опыт можете оставить себе.

Даже на яве никто не пишет — котлин рулит.
Перестанте читать про модные тренды в инете

Сам пойняв що сказав ? :)

я конечно боюсь показаться грубым, но вы очень не любите фронт ... и судя по высказываниям не очень-то хотите использовать передовые наработки в этой области — это понятно и нормально .. НО зачем так категорично высказываться против ??? и промисы и async/await с ними это не костыли — это решение проблем блокирующих операций например (что есть на беке аж в изобилии) ... и на бекенде вы тоже с этим столкнетесь, будь то C#, Kotlin (кстати пока очень маленький процент еще ... но там все впереди), Java (Reactor, RxJava ... Spring Web Flux) — это есть

Но вам все равно надо закатать либо в хтмл либо в джсон.

Если как вы выразились закатать его в джсон — то отвечать за отображение всего будет специально обученный фронтендер.

И забудте вы про jsp на нем уже лет 10 никто не пишет

Угу. Пишут на другой мерзости вроде пхп, фейсов и прочей мерзости?

Даже на яве никто не пишет — котлин рулит.
Перестанте читать про модные тренды в инете и попробуйте сделать хоть один реальный проект

THIS!

Не представляю, как бекендер может не любить рекат.
Благодаря реактам и ангуляром бекендщикам больше не нужно марать руки об этот мерзкий фронтенд. Можно отдать всю неприятную работу тому, кто получает от нее удовольствие.

Даже на яве никто не пишет — котлин рулит.

ты не в курсе, чувак) сейчас все пишут на Go))

в моем коментарии чуствуется здравый смысл как результат многолетнего опыта разработки.

как то не заметно, «целая индустрия миллионы проектов и все ошибаются в выборе технологий, переплачивают тонны баксов»

Они не ошибаются. Они просто следуют модному тренду. Так же как не ошибка носить модные джинсы с дырками. Завтра будет другой модный тренд и будут платить за другое.
Например ща многие помешаны на ИИ, блокчейне и криптовалюте. До недавнего времени все носились с аджайл и скрамами в управлении проектами.. И что? Рано или поздно как и яваскрипт это все займет полагающуюся ему адекватную нишу и все.
То что ваши аргументы не технические а «все так делают» только подтверждает мою точку зрения. Конечно вы можете освоить яваскрипт и зарабатывать пока лохи за это платят. А можно освоить веб разработку так чтобы получать на выходе результат меньшими усилиями и зарабатывать на тех кому пофиг — лишь бы сайт выполнял свою работу. А сайты нынче — это просто инструмент задача которого быстро донести нужную инфу а не заставлять пользака мучатся с дергающимся и прыгающим за каждым движением мышки интерфейсом или матерится пока яваскрипт обработает сотни биндингов и ивентов в браузере мобильного девайса.
Мой заказчик на корого я ишачу в аутсорсе тоже недавно захотел быть в тренде — сказал прикрутить на сайт тему с Datatable, select2 и прочими явасриптовыми ништяками. В результате оказалось что страница грузится четыре минуты (проект по логистике складов)- потому как дататейбл должен сначала обработать десятки тысяч строк прежде чем отрисовать свою клевую пагинацию. Пришлось переделывать подгрузку данных через аякс (небесплатно кончено). Казалось бы вот оно щастье. Но щастье не наступило потому как вcтроеный в дататейбл экспорт в csv и pdf
работает только с загружеными пагинатором в браузер данными а не со всем тфильтрованным набором как это делал вариант на бекенде.
Вот так вот в 9 яваскриптовых ршениях из 10 на ровном месте тратятся усилия и деньги потому как работа програмиста стоит дороже чем купить ожное железо.. особенно это глупо выгглядить в эпоху дешевых облачных вычислений когда обработать данные на бакенде и выплюнуть через современных быстрый инет по времени то же самое что тащить список в браузер чтобы сэкономить пару килобайт на загрузке

`

А можно освоить веб разработку так чтобы получать на выходе результат меньшими усилиями и зарабатывать на тех кому пофиг — лишь бы сайт выполнял свою работу.

` это многое объясняет

Это обясняет только одно — надо изучать програмирование а не языки програмирования.

за язык вы начали говорить, мой коммент был о том что фронт енд может легко существовать без бек-еда — перечитайте еще раз первые комментарии. К тому же автору поста дали ТЗ с конкретным описанием технологий на вакансию, которую он претендует, поставленная задача с легкостью решается стеком react, react-routers в поставленные сроки, и это всего лишь инструменты используя, которые можно сделать либо хороший проект либо плохой. При понимании базовых основ программирования и сопутствующих дисциплин разобраться с инструментом дело привычное и не должно вызывать сложности. Для каждой задачи есть свои решения, языки и фреймворки и так далее... и я не вижу в этом ничего плохого.

Интересно как ты без бекенда подымишь свой фронт, даже на локалхосте.

Просто Вы не смогли правильно приготовить DataTable.

Правильно приготовить это переписать еще кучу кода. В частности плагины для экспорта чтобы они тянули с сервера все данные а этом случае они не имеют смысла как плагины к дататейбл.
Есть еще кучу не менее извращенных решений. Вопрос не в том что это нельзя сделать — вопрос — а на фига? Ради чего надо было потратить усилия и деньги? Какую такую великую проблему там решает дататейбл?
На небольших данных может оно бы и клево было — но для небольших данных нафиг не нужна ни сортировка ни пагинация. То же самое select2. Штука удобная но на небольших списках и обычный комбо справляется а на выборках товара со склада он уже реально тупит даже на компе и там все равно нужно вместо комбо ставить поле с автоподсказками
Посему не надо учить жену щи готовить.

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

пагинация то там как раз предусмотрена на аяксе. Посему пришлось
только бекенд дописать.
Проблема оказалась в экспорте всего набора в файлы разных форматов а не только того что показывает текущая страница. а плагины берут как и сам дататейбл по дефолту с того что реально загружен на страницу.
Речь еще раз не о решаемости проблемы а том что проблема создана на ровном месте. Думаете почему спрос на програмеров на агуляре и иже с ним — сначала решается делать как ща модно а потом оказывается что работы там в три раза больше а сроки сдачи проекта никто не отменял

Ну сделали бы ссылочки которые в новом окне в поток отдают файл нужного формата с параметрами, в чем боль то? Как минимум Вам пагинацию не пришлось руками писать на клиенте.

Классно, когда дети размышляют про то как было... все время когда был вменяемый интернет, был и JavaScript.... ну если хотите то у IE был JScript)))

подобных «аргументов» я уже наслышался. По делу только никто возразить не может — кроме — яваскрипт хорошо потому что я не знаю ничего другого. А не знаю потому что пошел на ДОУ и прочитал что яваскрипт наше все.
Приведите пример какого нибудь инет магазина или какого другого информационнного ресурса (а это 90 процентов сайтов) написаного без бекенда и функционирование которого невозможно без яваскрипта.
А если взять сайты где достаточно jquery для удобных фишек типа акордеона там или модального окна то это 99 процентов.

И кстати основатель Node.js покинул проект с аргументами что использование ноды (то есть яваскрипта) для бекенда (кроме той ниши для которой она была придумана — отправка множества мелких сообщений в одном потоке ) - полная чушь. Посему яваскриптовое безумие не навечно — рекомендую выучить что то еще.

Ооо, узнаю риторику. Товарищ Вовчок, перелогиньтесь!

Во как у пхпшников бомбит то, а

любой фронтенд грузится с бекенда — как данные так и разметка.

это у тебя терминология некорректная. Статическая разметка не есть суть бекенд. Динамическая — может быть. React как правило статичный контентом идет, а динамика для пререндеринга и суть не меняет.

Вы б тестовое выложили, проще было бы)

Спасибо большое за ссылки и за критику

Если захочешь дальше иметь дело с Реактом, то рекомендую — www.udemy.com/...​ct-redux/learn/v4/content

react-router-dom
Здається так.

Все приложение должно быть в React? Т

 нет только футер

Тогда как делать переход между страницами?

в барузере менять url руками

Или можно создать допустим компненты navbar, footer и подобавлять их на все страницы.

 да на все, желательно дважды

Первые три ушло на гугл и тренировочное todo.

видно todo очень долго заходила

У меня только один вопрос, вы реально расчитываете на оплату этого сайта?

вы реально расчитываете на оплату этого сайта?

Больше похоже на какое-то тренировочное или тестовое задание.

Если чел за 3 дня не нагуглил видео с роутером, то наверное рановато ему туда идти, где это задание попросили)

Все может быть, но сдаваться не хочу. И да не нагулил. 90% того что нахожу — Hello World

Ленивый нынче вайтишник пошел, однако.
prntscr.com/ihcq64

Первая же ссылка: scotch.io/...​t-apps-the-complete-guide
Мануал на гитхабе: github.com/...​ter/lessons/01-setting-up

Ну вообще, судя из названия, я имхо, подумал что автору надо сделать реально многостраничный сайт, в буквальном смысле. Тогда уж на сервере роутинг писать и вьхи отдавать. Может у него в этом завтык, а не в проблем реакт-роутер нагуглить?

Мне кажется, чувак сам не знает, что ему надо, т.к. спрашивает

Какя у сайта стркутура может быть?
Все приложение должно быть в React?

Имхо тут классический случай недостаточного курения мануалов перед хватанием тестового задания.

Согласен, 3 дня назад я про React знал только как выглядит его значек, и ощущение пока только — О боже, зачем же так все усложнили. Ну это понятно из за недостатка знаний, буду исправлять

Реакт еще простой по-сравнению с некоторыми другими фреймворками(просто вьюшечки — чего там сложного?). Когда в работе появляется фраза

зачем же так все усложнили

это от недостатка опыта. Пройдет, если не бросишь.

Да он просто вебпак с бабелем три дня настраивал.

Его можно и 3 месяца настраивать .

Подписаться на комментарии