Reactjs: how to put the html template in a separate file?

In React you would typically make a child component and import it into the parent component.

Since your child component here would just be static markup i.e <h2>Hello World</h2>, you don’t need to worry about component state.

Therefore, you could do the following:

1. make a functional (aka stateless or dumb) component for your text. You could name it HelloWorldText as an example.

2. import this functional component into your parent component HelloWorld.

Your functional component would look something like this:

HelloWorldText.js

const HelloWorldText = () => ( <h2> Hello World </h2> );

export default HelloWorldText;

Then you would import this functional component HelloWorldText into your parent component HelloWorld like so:

HelloWorld.js

import React, { Component } from 'react';
import HelloWorldText from './path/to/HelloWorldText';

class HelloWorld extends Component {
  render() {
    return (
      <HelloWorldText />
    );
  }
}

export default HelloWorld;

Here’s a CodePen Demo with this code.

Unfortunately on CodePen you can’t export and import components, but hopefully it still gives you an idea on how to use a child component inside a parent component.

Note: In React you want your components to be as general as possible. You would probably end up making a Text component instead of a HelloWorldText component.

Then you would pass text dynamically into the Text component using props.

Here is a CodePen Demo of this in action.