Какова должна быть структура проекта для React + Node.js?

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

Также ознакомьтесь с примерами ответов на git

Но эти примеры предназначены только для игры.

Цель состоит в том, чтобы четко разделить клиентский и серверный компоненты. Переместите их в отдельные деревья папок. Также есть app-подобная структура (например, Django)

Итак, главный вопрос:

Каков правильный способ отделить сторону узла nodejs/iojs от компонента клиентской стороны React и объединить все это в один проект?

Проект:

  • nodejs server, для сайта, где пользователи могут создавать свои собственные статьи, разделенные в хабах/тем.
  • Реагировать на переднем конце .SPA.
  • нагрузка - около 10 000 пользователей.
  • База данных MongoDb с доступом через Mongoose

Ответ 1

В принципе, вы можете начать с любых шаблонов React.js; просмотрите его и оцените проблему в нескольких аспектах.

  • легко ли отделить произведения между группами людей.
  • имеет смысл структура приложения? возникнет ли у вас трудности с пониманием структуры приложения некоторое время спустя, когда вы переработаете одно и то же?
  • в будущем, если вы хотите добавить функционалистов, было бы трудно сделать это? (скажем, вы хотите поддержку csrf)

Я сравнил несколько реактивных шаблонов и в итоге перешел с изоморфным 500. Я немного пересмотрел код, чтобы найти что-то вроде этого:

структура приложения

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

Ответ 2

React-starter-kit - действительно хороший изоморфный шаблон проекта, а также включает все необходимые инструменты, такие как eslint, babel... и т.д. Он хорошо документирован, чтобы вы могли легко узнать цель каждой папки.

Прежде чем строить свою структуру проекта, вам нужно подумать, нужно ли применять флюс, а другая флюс-флюс-фреймворк может сделать вашу структуру другой. React-starter-kit - это хорошее место для запуска различных реализаций.

Ответ 3

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

components/   // React Components Directory
models/       // Mongoose Models (if your using a database too)
public/       // Static Files Directory
---- css
---- js
---- svg
...
utils/        //Files containing utility methods
views/        // Server Side Views (jade, or handlebars, ..)
app.js        // Client side main
config.js     // App configuration
package.json 
routes.js     // Route definitions
server.js     // Server side main