CODEWITHSUNDEEP
javascriptnode.jsreactjs
Naveen
Naveen

Reputation: 852

how to use bundled react component without node?

I am building a react project to deploy on apache server (no node on backend), lets say my component name is FooComponent, i have bundled it using webpack ( i have used babel on preset to parse the jsx and convert it to valid js code ), the problem which i am facing is how to use this component, in index.php i have code like this

<div id="container">

</div>
<!-- bundle contains my foo component -->
<script src="dist/bundle.js"></script>
<script>

    ReactDOM.render( <FooComponent /> ,document.getElementById("container"));
</script>

but this code is going to fail since it is jsx tag and we will get unexpected token < in the console, how do i render this FooComponent properly? i dont want to use ReactDOM.render inside by my bundle.js file, i like to pass some data to this component ( the data would be arriving from php, if i assign it to js variable in index.php and refer that variable here i believe it might affect code readability )

Upvotes: 0

Views: 200

Answers (1)

Nicholas Tower
Nicholas Tower

Reputation: 84982

The equivalent of ReactDOM.render( <FooComponent /> ,document.getElementById("container")); in plain javascript is:

ReactDOM.render(React.createElement(FooComponent, null), document.getElementById("container"));

You can produce this yourself using babel's online tool here:

Upvotes: 1

Related Questions