Какова должна быть структура проекта для 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