CODEWITHSUNDEEP
javascriptreactjses6-class
Some User
Some User

Reputation: 5827

Using ES6 with React in existing Web Site

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>

Upvotes: 1

Views: 611

Answers (2)

Jed Fox
Jed Fox

Reputation: 3025

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>

Upvotes: 3

ptorsson
ptorsson

Reputation: 488

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>

Upvotes: 0

Related Questions