Как организовать React шаблоны в отдельных файлах?

Question

[Игорь]

Начал работу с react, и меня интересует такая возможность как разделение шаблонов с компонентами по разным файлам. Например иметь такую файловую структуру react/components/SomeComponent.jsx и react/templates/SomeComponent.jsx. Чтобы я мог в компоненте просто написать

const ComponentTemplate = require('templates/SomeComponent');

, а в методе render прописать так:

render() {
  return ComponentTemplate;
}

Или что-то в этом духе..
Я всегда использую webpack и в проектах, в которых пишем на Backbone. Шаблоны загружаются именно таким образом с использованием лоадера text-loader. И вообще нормальна ли такая практика относительно react-а?

Answer 1

[fetis26]

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

Comments

[Игорь]

fetis26 Дело в том, что я не привык видеть даже псевдо html в js файлах. Т.е. это нормально всегда описывать шаблон в render методе компонента?

[rakro]

Игорь: Нормально. Дело привычки. В том же Angular уже не выносят разметку в отдельный файл и описывают прямо в template. Пример в конце этого файла https://github.com/fesor/NG6-todomvc-starter/blob/...

[fetis26]

Игорь: Это не совсем HTML, это JSX. Т.е. может быть так например

...

И если когда-то вам сказали, что html от js должны быть отдельно, то это не аксиома. Мне кст тоже говорили.

[fetis26]

rakro: парсер лох. вот пример
div
Component1
p
some text

[Владимир Семенякин]

rakro: оживлю этот тредик... Перехожу с С++ (Qt, самый популярный UI-фреймворк на С++) на веб и выбираю сейчас между Angular и React. Задавался, в частности, тем же вопросом что автор.

Как я понимаю, слой декларативного описания UI позволяет сделать проще разделение работ по вёрстке и программированию. Дизайнер/верстальщик может сам поправить какие-нибудь свойства UI в файлах декларативного описания UI без необходимости дёргать по этому поводу программистов или лезть в код. Работает принцип инкапсуляции - в данном случае разделение областей ответственности в команде разработки. В том же Qt есть свой язык декларативного описания UI - QML - и в целом наблюдаются тенденции по переходу к декларативному подходу.

Поэтому, ИМХО, заданый вопрос не праздный. По крайней мере, если в React нет шаблонов - интересно было бы понять как организовать workflow дизайнеров. Пускать их в коде шариться?

Answer 2

[Максим]

И вообще нормальна ли такая практика относительно react-а?

Нигде в популярных (и не очень) репозиториях я такого не встречал. А главное, как указал fetis26 - пользы от такого разделения никакого нет. Если найдете (пользу) или какой-то репозиторий, где так сделано - добавьте, хотя бы попробуем понять автора.

Другое дело, что иногда в render функции компонента, удобно определить какой-то кусочек JSX в переменную. Например:

let articlesHeaders
if (this.props.articles.length > 0) {
  articlesHeaders = this.props.articles.map(item => <h4 key={item.id}>item.title</h4>
} else {
  articlesHeaders = <button onClick={this.onTryAgainClick}> Try Again </button>
...
return (
  <div> bla bla .... </div>
  {articlesHeaders}
  <div> bla bla ... </div>
)

Обычно используется, когда есть какое то условие в if / else, где относительно нашего примера в articlesHeaders могла бы быть разная разметка (шаблон).

Answer 3

[Александр]

Как вариант так или использовать wix.github.io/react-templates

//templates/templat.js
import React from 'react';
export default function() {
   return <div>Template</div>
}
// component.js
render() {
 return require('templates/template')()
}

Answer 4

[Николай Воронин]

Обратите внмание на секцию resolve в документации webpack . В частности resolve.root, resolve.modulesDirectories и resolve.extensions.