How to implement React in a jQuery-based webapp?

Question

I've been studying React and now I want to try implementing it on some pages only, as a proof-of-concept to my supervisor at work. How do I do that using old-school script tags, instead of imports?

I've been able to use the in-browser babel transpiler

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
  </head>
  <body>
    <div id="output"></div>
    <script type="text/babel">
      ReactDOM.render(
        <div>Hello world!!</div>,
        document.getElementById("output")
      );
    </script>
  </body>
</html>

This works, but how do I create react components here? Creating a class that extends Component will throw an undefined error. How do I do import React, {Component} from 'react'; using this method? And how do I use components in external jsx files?

Alex Antonov · Accepted Answer · 2018-12-05 05:23:49Z

2

Why not?

<script type="text/babel">
  // Define children components here

  class App extends React.Component {
    render() {
      return (<div>Hello world</div>)
    }
  }

  ReactDOM.render(
    <App />,
    document.getElementById("output")
  );
</script>

UPD

For a few components, just write down children components before parent one (look at comment in my code). If you have a lot of components, start to use builders like webpack

edited Dec 5, 2018 at 5:23

answered Dec 5, 2018 at 4:01

Alex Antonov

15.4k10 gold badges75 silver badges157 bronze badges

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

1 Comment

iceman2992 Over a year ago

Oh okay it works, I just needed to use React.Component. How about including external component jsx files?

Collectives™ on Stack Overflow

How to implement React in a jQuery-based webapp?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related