user2085143 user2085143 - 4 months ago 29
React JSX Question

React Components - Where to store HTML Templates

Complete newbie to React and trying to find out how to load the HTML for components rather than inserting it directly in the render method. For example

import React, {Component} from 'react';

export default class Login extends Component {

render() {
return (
<!-- how can I provide a link to the HTML template for here? -->
);
}
}

Answer

React does not have HTML. The JSX that you write in the render method is actually compiled into JavaScript. At the core, React components are all JavaScript. The styles are also inline. Componentisation is neat in React because HTML, CSS, JavaScript (interactions) are all in one place, as JavaScript.

To insert raw HTML, React has an attribute dangerouslySetInnerHTML.

<div dangerouslySetInnerHTML={createMarkup()} />