Задать вопрос
@Kraky

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

Начал работу с react, и меня интересует такая возможность как разделение шаблонов с компонентами по разным файлам. Например иметь такую файловую структуру react/components/SomeComponent.jsx и react/templates/SomeComponent.jsx. Чтобы я мог в компоненте просто написать
const ComponentTemplate = require('templates/SomeComponent');
, а в методе render прописать так:
render() {
  return ComponentTemplate;
}

Или что-то в этом духе..
Я всегда использую webpack и в проектах, в которых пишем на Backbone. Шаблоны загружаются именно таким образом с использованием лоадера text-loader. И вообще нормальна ли такая практика относительно react-а?
  • Вопрос задан
  • 2833 просмотра
Подписаться 1 Оценить Комментировать
Решения вопроса 2
@fetis26
Ну, за фронтенд!
Не очень понимаю зачем разделять шаблон и компонент? В Реакте компонент это маленький кусочек со своей логикой, шаблоном и даже стилями.
Ответ написан
maxfarseer
@maxfarseer
https://maxpfrontend.ru, обучаю реакту и компании
И вообще нормальна ли такая практика относительно 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 могла бы быть разная разметка (шаблон).
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
@OneFive
React.js <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')()
}
Ответ написан
Комментировать
Обратите внмание на секцию resolve в документации webpack . В частности resolve.root, resolve.modulesDirectories и resolve.extensions.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
06 дек. 2024, в 05:29
20000 руб./за проект
06 дек. 2024, в 03:58
10000 руб./за проект
06 дек. 2024, в 02:20
5000 руб./за проект