Как обычно в ReactJs разбивать компоненты по файлам?

Question

[Антон]

Начал изучение ReactJs.
Создал небольшое приложение, появилась проблема с тем, что в App.jsx слишком много кода. Логично это все дело разбивать по файлам конечно, проблема в том, что должного примера не нашел в интернете.

По логике могу конкатенировать jsx файлы gulp`ом, но правильно ли это или есть другое обычное решение?

Использую webpack и gulp.

Answer 1

[Евгений]

Дак а в чем проблема? Заведите папку components, разбивайте ваше приложение на логические блоки к примеру
App -> Header + Content + Footer
Соот-но будет след-я структура
-components
--header
---index.js
---header.css
--content
---index.js
---content.css
Так же ещё важно различать умные и тупые компоненты: "dumb and smart components" можете поискать в интернете про это.
По поводу сборки - если вы используете webpack, то gulp для склейки файлов не нужен - webpack это должен делать, и ещё если вы используете babel для трансляции, то jsx формат можно убрать и оставить просто js.

Comments

[Антон]

Ок, я предполагал конечно так, просто как правильней делать. Тоесть гуглить как склеивать webpack`ом файлы?

[Евгений]

Антон Хлебников: Webpack это система сборки - т.е. вы указываете начальны файл в котором подключаете через require\import другие файлы и вебпэк добавит их в конечный файл.

[Антон]

Окей попробую, спасибо!

Answer 2

[r3verser]

К выше написанному добавлю, что удобно разбивать компоненты на контейнеры, погуглите - reactjs container components.

Answer 3

[Кирилл]

Если на этапе изучения, то проще воспользоваться тем, что рекомендует сам фейсбук
https://facebook.github.io/react/docs/installation...
Не нужно заморачиваться с вебпаками, бабелями и т.д.

Comments

[Антон]

Спасибо, это я уже прошел)