Рендер с другими HTML

Question

Это код основной в реакции

var Hello = React.createClass({ 
    render: function() { 
     return <div>Hello {this.props.name}</div>; 
    } 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Моя проблема заключается в том, что у меня есть несколько компонентов адреса здания прочь. То есть

+ index.html 
+ component 
    + hello.html 
    + world.html 

И вам нужно, чтобы вы отвечали за эти шаблоны. Можно будет сделать что-то подобное?

var Hello = React.createClass({ 
    render: "component/hello.html" 
}); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
); 

Answer 1

Создать реактивные компоненты, а не файлы HTML.

+ index.html 
+ component 
    + hello.jsx 
    + world.jsx 

Например component/hello.jsx будет выглядеть следующим образом:

module.exports = React.createClass({ 
    render: function() { 
    return <div>Hello {this.props.name}</div>; 
    } 
}); 

Тогда просто требуют компоненты с модулем Bundler как WebPack или browserify.

var Hello = require('./component/hello'); 

ReactDOM.render(
    <Hello name="World" />, 
    document.getElementById('container') 
);