Render a single react component in a html file (webpack)

Question

I'm trying to render a simple react component to a html page, but can't figure out how to do it.

// hello.js
import React from 'react';
import ReactDOM from 'react-dom';

export default class Hello extends React.Component {
  render() {
    return (
        <h1>Hello {this.props.name}</h1>
    )
  }
}

// index.html
<html>
<body>
</body>
<head>

    <!-- HTML code -->

    <!-- RENDER HERE -->

</head>
</html>

webpack and babel:

// index.js 
import Hello from './hello.js'

If i put this line at the end of Hello.js:

ReactDOM.render(<Hello/>, document.getElementById('hello'));

I can render the component with:

// index.html
<div id="hello"></div>
<script src="bundle.js"></script>

However, There are times where I don't want to render the component, or render it after a certain time interval. If I remove the div i get an error:

Target container is not a DOM element

I guess I want to do something like this (Which doesn't work)

<html>
<body>
</body>
<head>

    <!-- HTML code -->

    <!-- RENDER HERE -->
    <div id="hello"></div>

    <script src="bundle.js"></script>

    <script>
        setTimeout(function() {
            ReactDOM.render(<Hello/>, document.getElementById('hello'));
        },1000);

        // or 

        if (true) {
            ReactDOM.render(<Hello/>, document.getElementById('hello'));
        } 
    </script>
</head>
</html>

What am I doing wrong here? And question nr 2. How do I pass props to the component?

You should probably wrap your component with an other component implementing the logic about when you want to render or not the sub component — Okazari
– Okazari, Commented Mar 29, 2017 at 14:57

dschu · Accepted Answer · 2017-03-29 14:56:19Z

3

You should start with this CodePen and do some experiments first to get comfortable with React.

React example on Codepen

There are times where I don't want to render the component, or render it after a certain time interval.

If you use React the right way, you would achieve this behavior by using States or Props. Each time a State or a Prop changes, all affected Components are re-rendered automatically.

How do I pass props to the component?

This is as simple as this:

<MyComponent firstProp={true} secondProp={new Date()} />

And to access this inside MyComponent:

render() {

console.log( this.props.firstProp );

...

}

You should also check out 8 no-Flux strategies for React component communication. This guide helped me a lot, when I first started with ReactJS.

edited Mar 29, 2017 at 14:56

answered Mar 29, 2017 at 14:50

dschu

5,4145 gold badges34 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

Render a single react component in a html file (webpack)

1 Answer 1

React example on Codepen

There are times where I don't want to render the component, or render it after a certain time interval.

How do I pass props to the component?

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

There are times where I don't want to render the component, or render it after a certain time interval.

How do I pass props to the component?

Comments

Your Answer

Sign up or log in

Post as a guest

Related