How to organize React templates in separate files?

Question

React

I started working with react, and I'm interested in such a possibility as splitting templates with components into different files. For example, to have such a file structure react/components/SomeComponent.jsxand react/templates/SomeComponent.jsx. So that I can simply write in the component

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

, and in the render method write this:

render() {
  return ComponentTemplate;
}

Or something like that..
I always use webpack in projects where we write in Backbone. Templates are loaded this way using the loader text-loader. And is this practice generally normal with respect to react?

Answer 1

I do not really understand why separate the template and the component? In React, a component is a small piece with its own logic, template, and even styles.

Answer 2

As an option, or use 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 3

Take a look at the resolve section in the webpack documentation . In particular resolve.root, resolve.modulesDirectories and resolve.extensions.