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

user_5402618 0
Viewed 51327

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?

reactjs
4 Answers

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 />
    )
}

 }
user_39704700

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... */
user_53051510

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

user_12633960
Related