Single React Component rendering with Babel Standalone with only index.html and Component
babeljs, reactjs
Solution
Your code is fine, you are using a really old version of `babel-standalone` though.
// this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
// should be this
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>
and
<script type="text/babel" src="components.js"></script>
// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>
Problem
Noob with React here. I am playing around with React. I have a simple component to render inside my component.js. It is included in my index.html file. I included the scripts for `React`, `ReactDOM`, and `babel` in the head. I just want to see that one div render properly. I am not using Node yet, just a exercise with React and Babel (using babel-standalone). I am running the file with a simple http-server. I am getting an error with the React Chrome extension: `Waiting for roots to load...to reload inspector click here`. index.html ``` <!DOCTYPE html> <html> <head> <!-- React --> <script src="https://unpkg.com/react@15/dist/react.min.js"></script> <!-- React DOM --> <script src="https://unpkg.com/react-dom@15/dist/react-dom.min.js"></script> <!-- babel core--> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script> </head> <body> <div id="machine-box"></div> <script type="text/babel" src="components.js"></script> </body> </html>` ``` components.js ``` class MachineBox extends React.Component { render(){ return ( <div>Hello From React </div> ); } } let target = document.getElementById('machine-box'); ReactDOM.render( <MachineBox />, target ) ```