Mark A Mark A - 1 year ago 119
React JSX Question

Single React Component rendering with Babel Standalone with only index.html and Component

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

, and
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 reload inspector click here


<!DOCTYPE html>
<!-- React -->
<script src=""></script>
<!-- React DOM -->
<script src=""></script>
<!-- babel core-->
<script src=""></script>
<div id="machine-box"></div>
<script type="text/babel" src="components.js"></script>


class MachineBox extends React.Component {
return ( <div>Hello From React </div> );

let target = document.getElementById('machine-box');

<MachineBox />, target

Answer Source

Your code is fine, you are using a really old version of babel-standalone though.

// this
<script src=""></script>

// should be this
<script src=""></script>


<script type="text/babel" src="components.js"></script>

// should be
<script type="text/babel" src="components.js" data-presets="es2015,react"></script>