Как правильно спроектировать сайт на react + node js?

Question

[imdeveloper]

Приветствую.
В ближайшее время я буду переносить сайт на react+node. Это обычный сайт, не одностраничник(в нем есть меню, обычные страницы), но клиенту нужен именно react и node js.

Главная выглядит примерно так: https://www.dropbox.com/s/hv7w1y7wttxl826/Stats_De...

Проблема в том, что я даже не знаю с чего начать , а если непраильно заранее начну делать, то потом времени не будет все с нуля переделывать.

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

Страницы будут храниться в базе данных и дальше наверно я так понял нужно писать админку на node.js для клиента что бы он мог редактировать эти страницы или как делают в таком случае?
Какие инструменты использовать, сборщики и т.д. Буду благодарен за любую инфу и мнение как бы вы делали такой проект React+Node И какие инструменты понадобились.

Я так понимаю нужно брать верстку и разделять на реакт компоненты?

Спасибо

Comments

[heducose]

Артём Петренков: ну повезло найти лоха на Апворке, авось стрельнет! Жесть!

[Emptyform]

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

[imdeveloper]

Артём Петренков: heducose: Это никакой не фриланс. Просто нет другого человека который смог бы это сделать в нашей команде. Я не говорю что я полный ноль в этом. Реакт я изучал, но практики особо не было. Главный вопрос в том, что если это будут страницы и контент, то разве мне придется админку писать на node.js? не думаю что нет уже готовых решений вроде небольших cms

[imdeveloper]

rainur102: Если бы была возможность не использовать node js в качестве сервера, то я бы давно это решил. Вариантов масса, но именну нужно что бы это был node.js

[Emptyform]

imdeveloper: гугл выдает cms-ки для ноды : https://www.google.com/search?q=node+js+cms&oq=nod...
Если что-то интересное подберете для себя отпишитесь тут, интересно

Answer 1

[Marshal]

попробуйте mern.io

Comments

[imdeveloper]

Это скеллет приложения React+Node?

[Marshal]

imdeveloper: да

[Abcdefgk]

Прям специально зашёл - спасибо сказать за наводку. Я тут месяца два галопом скакал по верхам кучи фреймвёрков и всё не не мог определиться, на каком же остановится всерьёз? Но душой почему-то склонялся именно к React - наверное, потому что он по своему устройству в html не мешается (как Angular или Vue). А тут вот оказывается, что я вполне правильно склонялся, и есть вполне реальный пример Express+React, да ещё +Webpack. Вряд ли я буду прям пользоваться этим MERN, но сам подход к "архитектуре" понятен просто через 10 минут после разворачивания.
(единственно, я пока так и не могу догнать окончательно, за каким чёртом к Експрессу прикручивать React или ещё хоть что-то - всё ведь можно и без него прекрасно сделать)

[heducose]

Abcdefgk: каким образом ты собрался выполнять контроллеры на сервере без Экспресс?

[Abcdefgk]

heducose: О чём спросить-то хотел? Вот тут можешь узнать, как выполняются контроллеры без Express - https://facebook.github.io/react/.

[heducose]

Abcdefgk: понятно, значит никаким))) Сказочник - из клиента собрался код на сервере выполнять.

[Abcdefgk]

heducose: Проспись. Потом приходи и спроси что-нибудь разумное про сервер или Express - если буду в настроении, то расскажу.

[Виталий]

И ведь жадность говорит нет, не отказывайся от проекта, плевать что ничего в теме не понимаешь...

[imdeveloper]

Виталий: как я могу отказаться если это в нашем офисе и это должен сделать я?

[Виталий]

imdeveloper: а ну если это не фриланс, то берешь руки в ноги и для фронта понимаешь что такое реакт редакс и вебпак, можно взять реакт стартер кит, годая фигня, поможет скомпилиться без гемороя. Для бека берешь то что понимаешь, можно даже пхп, реакту плевать, кто ему данные будет отдавать, ну а дальше делаешь то что надо, только до этого надо почитать

Answer 2

[Виктор Стороженко]

https://github.com/facebookincubator/create-react-app - с этого можно начать, чтобы не заморачиваться со сборщиком и настройкой. Можно легко начать и фронт и бэк.
https://github.com/styled-components/styled-components - это добавить для стилей - ИМХО самый удобный вариант
Ну роутер и прочее что необходимо по ходу будет.
Вообще не очень понятно зачем React если не SPA.

Answer 3

[Эдуард]

Погуглите как организованы вот такие проекты, слова для гугла: react + redux + node isomorphic example

Answer 4

[Антон]

или https://github.com/zeit/next.js/

Answer 5

[imdeveloper]

Есть решение, но еще не уверен. Как только я напишу одну страницу - тогда отпишусь

Answer 6

[Александр Князев]

я понял, как делать приложения на этом, считаю, отличном примере.
https://github.com/atulmy/node-express-react-redux...