score:4

Accepted answer

i will divide my answer into 3 parts:

  1. simple inclusion of react in general
  2. make your example work
  3. modules

(i will use yarn below. you can use npm as well, i assume you are familiar with these.)

1. simple inclusion of react in general

see add react to a website.

index.html:

<html><head>
    <title>my old web applciation</title>
</head><body>

<h1>old stuff</h1>
<p>some old html content.</p>

<!-- add a container, where you want to include react components -->
<div id="injected-react-content"></div>

<!-- import the react libraray -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

<!-- import your react component -->
<script src="giveitem.js"></script>

</body></html>

giveitem.js:
(modified from jsx to js. for jsx see section 2.)

const giveitem = (props) => {
    console.log("init give item component");
    return react.createelement(
        "section",
        null,
        "give item content"
    );
};

const domcontainer = document.queryselector('#injected-react-content');

reactdom.render( react.createelement(giveitem), domcontainer );

2. make your example work

your component uses jsx. you need to transpile it to js, using babel.

giveitem.jsx:
(it is not necessary to call it .jsx, but it makes sense)

const giveitem = (props) => {
    return (
        <section>
            give item
        </section>
    );
};

const domcontainer = document.queryselector('#injected-react-content');
reactdom.render( react.createelement(giveitem), domcontainer );

install babel:

yarn add @babel/cli @babel/core @babel/plugin-transform-react-jsx @babel/preset-react --dev

transpile your jsx file ./src/giveitem.jsx into a js file in ./dist/giveitem.js:

yarn babel ./src/giveitem.jsx --presets=@babel/preset-react --out-dir dist

(the dist folder will be created if it doesn't exist)

if you now copy the index.html into ./dist, you should have the same code as in section 1., and opening ./dist/index.html in the browser should work.

3. modules

of course, you would want to import other react components and sub-components.
(and you probably don't want to import everything individually with <script> tags.)

if an environment is set up already

maybe your old app already runs in a yarn (or npm) environment, then you might be fine with

  • install yarn add react and yarn add react-dom
  • removing the two <script src="https://unpkg.com/react... lines (as react is probably already imported inside your components),
  • then import some root component (instead of giveitem.js before), where you do the reactdom.render(...) and import further modules:

e.g.:

index.html:

<!-- import your react component -->
<script type="module" src="entryintoreactworld.js"></script>

entryintoreactworld.js:

import somecomponent from './somecomponent';
import someothercomponent from './someothercomponent';

const reactroot = props => {
  return react.createelement(
      "div",
      null,
      react.createelement(somecomponent, null),
      react.createelement(someothercomponent, null)
  );
};

reactdom.render(
    react.createelement(reactroot),
    document.queryselector('#injected-react-content')
);

if environment is not set up already

if your old app is not already running in a yarn (or npm) environment, you have to set one up.

unfortunately, this is not trivial.
(i tried to write a short working minimal example here, but i failed.)

for that you have to enter the world of javascript modules. but modern browsers don't allow many things from the local file system. (e.g. see cors problems, mime problem, ...)

you have to install a server for development. you might start with e.g. http-server, but there you probably still will have problems, so i suggest to already start with writing a server.js file and use node http. (maybe expressjs as well. it is not necessary, but everybody uses it, and it is easier to find help and tutorials.)

you also might need webpack.

of course you also have to install yarn add react and yarn add react-dom.


Related Query

More Query from same tag