Using ES6 with React in existing Web Site

Question

I have an existing web site. In this site I have a page available at the URL www.example.com/apps/myApp. myApp is hosted within an existing HTML page. This is just a utility app, so I want to use this as an opportunity to learn React.

Is there a way to use ES6 within this page without importing the entire toolchain? In other words, I'd like to just include React, write my code in ES6, and run. I don't want to have to bring in Gulp or Webpack and introduce some pre-compilation step. Is this possible, or do I have to bring in the whole enchilada?

I've been trying to get to a basic place where I can do this as shown in this Plunkr. Which, includes the following code:

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <h1>Hello World!</h1>
    <div id="myApp"></div>


    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
  </body>

</html>

Jed Fox · Accepted Answer · 2016-09-17 19:49:18Z

3

Try babel-standalone:

<h1>Hello World!</h1>
<div id="myApp"></div>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
<script type="text/babel" data-preset="react">
  class MyLayoutComponent extends React.Component {
    render() {
      return (
        <div>
          <h3>React Loaded!</h3>
          <br />
        </div>
      );
    }
  }
  ReactDOM.render(<MyLayoutComponent />, document.getElementById('myApp'));
</script>

edited Sep 17, 2016 at 19:49

answered Sep 17, 2016 at 18:13

Jed Fox

3,0255 gold badges31 silver badges38 bronze badges

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

3 Comments

Some User Over a year ago

I tried that approach, but I didn't have any luck. I've updated the question. I also included a Plunk, which can be found here: plnkr.co/edit/drzClAekaIsXcXDuOAZz?p=preview. I was expecting it to say "React Loaded", but I haven't seem to be able to get to that point.

Some User Over a year ago

Thank you for the edit. It works as long as the code is inline like you've shown. But, as soon as the code is split into other .js files like in the Plunkr I provided, it doesn't work. I feel like there is some gap that I'm missing, but I can't put my finger on it.

Jed Fox Over a year ago

@ZachTempleton Try using <script> tags, instead of ES6 imports.

ptorsson · Accepted Answer · 2016-09-17 18:57:30Z

0

You can import React library directly to your old project. Just load ReactJS library like any other JS file.

<script src="https://unpkg.com/[email protected]/dist/react.js"></script>

Check out ReactJS Getting Started for documenation

For writing ES6 you also need BabelJS

Update after auther edit first post. Check out this example code on plnkr here.

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="myApp"></div>

    <script type="text/babel">

      var TestOut = React.createClass({
            render: function() {
              return (
                <h1>Hello world!</h1>
                );
            }
      });

      ReactDOM.render(
        <TestOut />,
        document.getElementById('myApp')
      );
    </script>


    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.14.0/babel.min.js"></script>
  </body>

</html>

edited Sep 17, 2016 at 18:57

answered Sep 17, 2016 at 18:16

ptorsson

4887 silver badges10 bronze badges

2 Comments

Some User Over a year ago

I updated the question showing what I'm trying to do. I included a Plunkr. I appreciate any help you can provide.

Some User Over a year ago

I assumed app.js was inferred by the react.js library based on other examples I've seen. Even when I directly reference it in the Plunkr though, it doesn't work.

Collectives™ on Stack Overflow

Using ES6 with React in existing Web Site

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related