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