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

Question

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
)

Add semicolons where they should be. Add one to the end of the return statement. — Andrew Li
– Andrew Li, Commented Oct 25, 2016 at 1:48

loganfsmyth · Accepted Answer · 2016-10-25 05:24:39Z

8

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>

answered Oct 25, 2016 at 5:24

loganfsmyth

162k31 gold badges349 silver badges259 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joseph Over a year ago

I have setup as above but i can not use import statement, i have to include the .js file including the component. How can i use the import and export statements? Do i have to setup webpack for that to work?

loganfsmyth Over a year ago

@Joseph That would be the way to do. babel-standalone is really only meant for the most basic testing. In any real production code you should use Webpack.

Garret Wilson Over a year ago

See stackoverflow.com/a/53975781 for how to import modules using Babel standalone.

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related