Bucky Ďroid Bucky Ďroid - 1 month ago 11
React JSX Question

How To Run React JS code?

Ohk so I am new to ReactJS...

I added 3 scripts in the header tagss..

<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>


Now I added few lines of code to just print a word.. But it didn't work

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


So where is 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