Incorporating the power of ES6 into a pre-existing website using React

Question

Incorporating the power of ES6 into a pre-existing website using React

I currently have an established website with a page accessible through the URL www.example.com/apps/myApp. The myApp functionality is embedded within an existing HTML page and serves as a utility app. I am interested in learning React, so I see this as a great opportunity to do so.

Is there a way for me to incorporate ES6 into this page without having to import the entire toolchain? Essentially, I just want to include React, write code in ES6, and be able to run it without the need for Gulp or Webpack and any pre-compilation steps. Is this achievable, or must I bring in all the components?

I have been working towards a simple setup that allows me to achieve this, as demonstrated in the following Plunkr. This includes the code snippet below:

<!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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f08295919384b0c1c5dec3dec1">[email protected]</a>/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b9cbdcd8dacd94ddd6d4f9888c978a9788">[email protected]</a>/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>

javascript reactjs es6-class

Answer 1

Answer №1

Consider using babel-standalone:

<h1>Greetings Earthlings!</h1>
<div id="myApp"></div>
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7f686c6e794d3c38233e233c">[email protected]</a>/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2c3b3f3d2a733a31331e6f6b706d706f">[email protected]</a>/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>

Answer 2

Consider using babel-standalone:

<h1>Greetings Earthlings!</h1>
<div id="myApp"></div>
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="0d7f686c6e794d3c38233e233c">[email protected]</a>/dist/react.js"></script>
<script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5e2c3b3f3d2a733a31331e6f6b706d706f">[email protected]</a>/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>

Answer 3

Answer №2

If you want to integrate the React library into your existing project, you can simply include it like any other JavaScript file.

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addfc8ccced9ed9c98839e839c">[email protected]</a>/dist/react.js"></script>

For detailed instructions, refer to the ReactJS Getting Started documentation.

If you're writing in ES6, you'll also need BabelJS for transpiling.

After making changes, remember to update the initial post. You can view an 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7002151113043041455e435e41">[email protected]</a>/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2052454143540d444f4d6011150e130e11">[email protected]</a>/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>

Answer 4

If you want to integrate the React library into your existing project, you can simply include it like any other JavaScript file.

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="addfc8ccced9ed9c98839e839c">[email protected]</a>/dist/react.js"></script>

For detailed instructions, refer to the ReactJS Getting Started documentation.

If you're writing in ES6, you'll also need BabelJS for transpiling.

After making changes, remember to update the initial post. You can view an 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="7002151113043041455e435e41">[email protected]</a>/dist/react.js"></script>
    <script type="text/javascript" src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2052454143540d444f4d6011150e130e11">[email protected]</a>/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>

Incorporating the power of ES6 into a pre-existing website using React

Answer №1

Answer №2

Similar questions

"Encountered an error: File or directory not found while attempting to export a function

retrieving multiple values in ajax call and processing them in controller function

Expanding the size of an array list item in React

The term "Movie" is not compatible as a JSX component

When a large object changes value in Firebase, does it transfer only the delta change in internet bandwidth?

Steps for designing an HTML table that expands and collapses partially

Warning in NextJS: The prop target does not match. On the server: "top", on the client: "blank"

Transform all Date fields in the Array to a standardized date format

Using Double Equal in a JavaScript For Loop

Separating content beautifully with a vertical divider in Material UI's Appbar

Guide to changing the status code to 404 for a 404-page in Next.js

JavaScript - memory heap exhausted

eliminate the offspring of a component (chessboard)

Is there a way to create a JavaScript function that relies on a successful form submission?

How can you eliminate the prop that is injected by a Higher Order Component (HOC) from the interface of the component it produces

Update the pageExtensions setting in Next.js to exclude building pages with the file extension .dev.

Use jQuery to parse the JSON below and then showcase the information in an HTML table

The live() function is causing issues with my ajax request

ngInfiniteScroll Activates on Every Scroll Occurrence

Exploring the capabilities of X-grid within Material v5

Incorporating the power of ES6 into a pre-existing website using React

Answer №1

Answer №2

Similar questions

"Encountered an error: File or directory not found while attempting to export a function

retrieving multiple values in ajax call and processing them in controller function

Expanding the size of an array list item in React

The term "Movie" is not compatible as a JSX component

When a large object changes value in Firebase, does it transfer only the delta change in internet bandwidth?

Steps for designing an HTML table that expands and collapses partially

Warning in NextJS: The prop target does not match. On the server: "top", on the client: "blank"

Transform all Date fields in the Array to a standardized date format

Using Double Equal in a JavaScript For Loop

Separating content beautifully with a vertical divider in Material UI's Appbar

Guide to changing the status code to 404 for a 404-page in Next.js

JavaScript - memory heap exhausted

eliminate the offspring of a component (chessboard)

Is there a way to create a JavaScript function that relies on a successful form submission?

How can you eliminate the prop that is injected by a Higher Order Component (HOC) from the interface of the component it produces

Update the pageExtensions setting in Next.js to exclude building pages with the file extension *.dev.*

Use jQuery to parse the JSON below and then showcase the information in an HTML table

The live() function is causing issues with my ajax request

ngInfiniteScroll Activates on Every Scroll Occurrence

Exploring the capabilities of X-grid within Material v5

Update the pageExtensions setting in Next.js to exclude building pages with the file extension .dev.