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

Question

I'm new to React. I'm much more familiar with Angular2+. In Angular, every component has a separate html file. However, in React, I see that render function itself includes the html template. For example,

import React, { Component } from 'react';

class HelloWorld extends Component {
    render() {
        return (
            <h2> Hello World </h2>
        );
    }
}

export default HelloWorld;

Well I want to take

<h2> Hello World </h2>

outside the js file and put it in a separate html and import the html file to render function, for example

 render() {
            return (
                import content of helloworld.html
            );
        }

Do you know how to do it?

Answer 1

---

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.

Answer 2

You can move the JSX part into a separate file and import that file in your component class

Here's an example

Signin.jsx

 import React from 'react';

 export const SigninJsx = () => {
 return (
 <div className="container">
        <form className="form-signin">
            <h2 className="form-signin-heading"> Please sign in </h2>
            <br />
            <label htmlFor="inputEmail" className="sr-only"> Email address
            </label>
            <input type="email" id="inputEmail" onChange={this.handleEmailChange} className="form-control" placeholder="Email address" required autoFocus />
            <br />
            <label htmlFor="inputPassword" className="sr-only"> Password</label>
            <input type="password" id="inputPassword" onChange={this.handlePasswordChange} className="form-control" placeholder="Password" required />
            <br />
            <button className="btn btn-lg btn-primary btn-block" onClick={this.signIn} type="button"> Sign in
            </button>
        </form>
    </div>
)
}

Signin.js

import React, { Component } from 'react';
import {SigninJsx} from './Signin.jsx';

export class Signin extends Component {
constructor(props){
    super(props);
    this.handleEmailChange = this.handleEmailChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.state = {
        email:'',
        password:''
    };
    this.signIn = this.signIn.bind(this)
}

handleEmailChange(e){
    this.setState({email:e.target.value})
    console.log("Error Change");
}
handlePasswordChange(e){
    this.setState({password:e.target.value})
}

signIn(){
    alert('Email address is ' + this.state.email + ' Password is ' + this.state.password);            
}

render() {
    return (
        <SigninJsx />
    )
}

 }

Answer 3

Please checkout this Medium link

This will be your React component declaration and you need to import the template.js file inside here and render it in context of the component 'Abc' (index.jsx):

import template from './template';

export default class Abc extends React.Component {
  render() {
    return template.call(this)
  }
}

Separate js file will have template as follows (template.js):

import styles from './styles.module.css';

const template = () => (
<div className={styles.outerContainer}>
  <div className={styles.middleContainer}>
        <div className={styles.innerContainer}>Hello, World</div>
    </div>
</div>
);
export default template;

Additionally, we can import CSS modules inside the template and maintain them in serapate file as well, as follows (styles.module.css):

.outerContainer {
  backgroundColor: red;
} 
/* etc... etc... */

Answer 4

for now , it is not possible to load template from html file.

Answer 5

Using TypeScript for my project the other solutions don't really work since the properties inside the template (like {this.someProperty}) throw errors if someProperty is not in the same class.

What I ended up doing was extending the components class and putting the render function in the subclass:

app/components/HelloWorld.ts:

import React from 'react';

export abstract class HelloWorld extends React.Component<{},{}> {

    public state = {
        label: 'Hello World'
    };

    constructor(props) {
        super(props);
    }

    public componentDidMount():void {
        tr('Hello World mounted');
    }

    // ... more code and handlers here..

}

app/components/HelloWorld.r.tsx: (the r is arbitrary but the file name needs to differ from the *.ts file)

import { HelloWorld as HelloWorldComponent } from './HelloWorld';

export default class HelloWorld extends HelloWorldComponent {

    public render() {
        return (
            <>
                <h2>{this.state.label}</h2>
            </>
        );
    }
}

You can now import the component wherever you like like this:

  import HelloWorld from 'app/components/HelloWorld.r';

Hope this solution helps those looking for a TypeScript solution