Easiest way to add html to a React component

Question

Say I have the following component in my web app:

class About extends React.Component {
  render() {
    return (

  <div className="about">
  /* place html here. */ 
  </div>
    )
  }
}

I'm currently practicing my understanding of raw html/css. So ideally, I want to be able to write up this about section somewhere else. E.G., an about.html and an about.css, an about.html with some inline css, or a <style> tag. Or most ideally, lower down in the same file that defines this component.

The idea is I want to separate my practicing of hmtl/css from the React specific / JSX code.

Is this possible? and if so what is the least friction route assuming that this is not a very mission critical project and I'm fine with taking a less secure or more hacky approach?

This might be a duplicate question, is this what you're looking for? : https://stackoverflow.com/questions/33973757/how-can-i-render-html-from-another-file-in-a-react-component — K.F, Aug 13 '17 at 19:01
would this `about.html` be only some `div`s and html elements or would it be an entire html document with `head` and `body`? — Sagiv b.g, Aug 13 '17 at 19:06
if you want to practice `raw html`, then don't use react, that is not what it's for. setting `innerHTML` is an anti-pattern. the point of a react component is, it has the JSX that it translates to HTML, you can import stylesheets and use a number of ways to embed them - via loaders or css modules / inline. look at vue or whatver mvc framework hipsters like these days — Dimitar Christoff, Aug 13 '17 at 19:29
@Sag1v it would be a bunch of tags and styles in side the div that the about component renders, yes.. — Alex Bollbach, Aug 13 '17 at 20:04

score 0 · Answer 1 · answered Aug 13 '17 at 19:13

If you want, you can declare a variable elsewhere or write a different component separate from this block and bring it in. But at the end of the day, you're still going to be writing JSX. You can still use .css to style your JSX the same as you would html, there's really no difference.

Easiest way to add html to a React component

1 Answers1