React.JS Inject a HTML file into another HTML file.

Question

I'm currently learning React.js, knowing that it is just the view of MVC. I have come from a Angular stack and I'm starting to worry about a few things with React.js.

One of them being if you have a partial html file how can you inject that file into another to build a functioning html file.

For example. How would i go about including a header, body and footer files into one?

I've read about dangourouslyinnerHTML which I don't want to use for XSS reasons. Is there a different way that I'm missing? Or is this something I will have to get gulp to compile?

You use components with react, so each component is a set of HTML that you can "inject" into another. — Ivan
– Ivan, Commented Dec 9, 2015 at 21:07
As @Ivan says, you would have a Header component, a Body component, and a Footer component, and your (e.g.) App component would render all three components. — Jordan Running
– Jordan Running, Commented Dec 9, 2015 at 21:10
And those components have to be built in a js file? instead of a html? — Max Lynn
– Max Lynn, Commented Dec 9, 2015 at 21:12
@MaxLynn Yes. The HTML goes in the render function of each React class (which go in js files). — Ivan
– Ivan, Commented Dec 9, 2015 at 21:12
alright so you have a js file that has your html inside that then gets compiled to html in your html file. Pretty interesting way to go about it. Thanks for your help. Mind if i ask another question? — Max Lynn
– Max Lynn, Commented Dec 9, 2015 at 21:17

Ivan · Accepted Answer · 2015-12-09 21:18:05Z

1

As discussed in the comments, the React paradigm is a bit different. React is built on the concept of components which contain events, HTML, and CSS in JavaScript.

For example, you could have a Head, Body and Footer component that would all be rendered in your App component. This example uses JSX:

var App = React.createClass({
  render() {
    return (
      <div>
        <Head />
        <Body />
        <Footer />
      </div>
    );
  }
});

The Head, Body and Footer components would look similar, each with their own render function that returns HTML in it.

I recommend reading the Thinking in React section of the React Docs.

answered Dec 9, 2015 at 21:18

Ivan

10.4k12 gold badges49 silver badges79 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Max Lynn Over a year ago

Ah I've read about this... Ok and those components would then have your html inside a js file. This makes more sense now. So if I could I'd like to ask the question how would you do this without JSX? As I've read its been deprecated?

Evan Davis Over a year ago

JSX has absolute not been deprecated

Ivan Over a year ago

JSX is THE way to write React code. A transpiler will take JSX and turn it into normal JS for you.

Max Lynn Over a year ago

I see. My bad not sure where I got that from then. Thats great team. Thanks for your help. I'm on my way to being a pro haha

Collectives™ on Stack Overflow

React.JS Inject a HTML file into another HTML file.

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related