Bucky Ďroid Bucky Ďroid - 1 month ago 10
HTML Question

How to run ReactJS code?

I added these 3 scripts to my headers:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>


And just a tiny script to render some text:

<div id="takevalue"></div>
<script type="text/babel">
ReactDOM.render(<h1>BuckyDroid xD</h1>, document.getElementById('takevalue'));
</script>


And it seems to work here:



<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>


<div id="takevalue"></div>
<script type="text/babel">
ReactDOM.render(<h1>BuckyDroid xD</h1>, document.getElementById('takevalue'));
</script>





But not on my website, so what could be the problem?

Answer

There seems to be a versioning error with the babel-browser library, also referenced here. You should go for an older version, like 5.8.34, using <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>.

And then it should work:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="https://unpkg.com/react@15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script>

<div id="takevalue"></div>
<script type="text/babel">
     ReactDOM.render(<h1>BuckyDroid xD</h1>, document.getElementById('takevalue'));
</script>

Comments