How can I add React 18 to existing HTML?

Atman Atos · Mar 27, 2023

Here's my code attempt, it doesn't work. Here's my code: I can make it display using a lower version of React but that gives warnings in the browser console. I want to correctly implement adding React 18 to an existing HTML.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

    
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <p>Hi</p>
    <div id="app"></div>

    
    <script src="./todo.js"></script>
</body>
</html>

JSX:

import { createRoot } from 'react-dom/client';

const myArr = [
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    },
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    },
    {
        Heading: "lorembdbfyhfhjvjvj",
        Body: "hdhdgbfb"
    }
]

const Reuse = (props) => {
    return (
        <div>
            {props.Heading}
            {props.Body}
        </div>
    )
}

const MyDisplay = (props) => {
    const sense = myArr.map(v => {
        return <Reuse Heading={v.Heading} Body={v.Body} />
    })
    return (
        <div>
            {sense}
        </div>
    )
}
document.body.innerHTML = '<div id="app"></div>';
const root = createRoot(document.getElementById('app'));
root.render(<MyDisplay />);

Phro0244 · Apr 18, 2023

It looks like you are trying to use the new createRoot API from React 18 to render your component. Here are a few suggestions that might help you get your code to work:

Make sure you are importing the correct version of React and ReactDOM. The code you provided is importing the development versions of these libraries. If you want to use React in production, you should use the production versions instead.
Make sure you are including Babel to transpile your JSX code. The script tag you included for Babel should work, but you may need to specify the type attribute as "text/babel" to make it clear that this script should be parsed by Babel.
You need to wrap your JSX code inside a JavaScript file with type="text/babel". Your example code is in JSX format, which needs to be compiled by Babel to regular JavaScript code that the browser can understand. You can do this by adding a "type" attribute to your script tag that loads the JSX file, like this:

HTML:

<script type="text/babel" src="./todo.js"></script>

You should import createRoot from react-dom instead of react-dom/client. Here is the updated import statement:

JSX:

import { createRoot } from 'react-dom';

With these changes, your code should look something like this:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
    <p>Hi</p>
    <div id="app"></div>

    <script type="text/babel" src="./todo.js"></script>
</body>
</html>
And here is the updated JavaScript code:
[CODE=jsx]import { createRoot } from 'react-dom';

const myArr = [
  {
    Heading: 'lorembdbfyhfhjvjvj',
    Body: 'hdhdgbfb',
  },
  {
    Heading: 'lorembdbfyhfhjvjvj',
    Body: 'hdhdgbfb',
  },
  {
    Heading: 'lorembdbfyhfhjvjvj',
    Body: 'hdhdgbfb',
  },
];

const Reuse = (props) => {
  return (
    <div>
      {props.Heading}
      {props.Body}
    </div>
  );
};

const MyDisplay = (props) => {
  const sense = myArr.map((v) => {
    return <Reuse Heading={v.Heading} Body={v.Body} />;
  });
  return <div>{sense}</div>;
};

document.body.innerHTML = '<div id="app"></div>';
const root = createRoot(document.getElementById('app'));
root.render(<MyDisplay />);

[/CODE]
I hope this helps!

Atman Atos · Apr 23, 2023

Phro0244 said:
It looks like you are trying to use the new createRoot API from React 18 to render your component. Here are a few suggestions that might help you get your code to work:

Make sure you are importing the correct version of React and ReactDOM. The code you provided is importing the development versions of these libraries. If you want to use React in production, you should use the production versions instead.

Make sure you are including Babel to transpile your JSX code. The script tag you included for Babel should work, but you may need to specify the type attribute as "text/babel" to make it clear that this script should be parsed by Babel.

You need to wrap your JSX code inside a JavaScript file with type="text/babel". Your example code is in JSX format, which needs to be compiled by Babel to regular JavaScript code that the browser can understand. You can do this by adding a "type" attribute to your script tag that loads the JSX file, like this:

HTML:

<script type="text/babel" src="./todo.js"></script>

You should import createRoot from react-dom instead of react-dom/client. Here is the updated import statement:

JSX:

import { createRoot } from 'react-dom';

With these changes, your code should look something like this:

HTML:

<!DOCTYPE html> <html lang="en"> <head> <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://unpkg.com/react@18/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> </head> <body> <p>Hi</p> <div id="app"></div> <script type="text/babel" src="./todo.js"></script> </body> </html> And here is the updated JavaScript code: [CODE=jsx]import { createRoot } from 'react-dom'; const myArr = [ { Heading: 'lorembdbfyhfhjvjvj', Body: 'hdhdgbfb', }, { Heading: 'lorembdbfyhfhjvjvj', Body: 'hdhdgbfb', }, { Heading: 'lorembdbfyhfhjvjvj', Body: 'hdhdgbfb', }, ]; const Reuse = (props) => { return ( <div> {props.Heading} {props.Body} </div> ); }; const MyDisplay = (props) => { const sense = myArr.map((v) => { return <Reuse Heading={v.Heading} Body={v.Body} />; }); return <div>{sense}</div>; }; document.body.innerHTML = '<div id="app"></div>'; const root = createRoot(document.getElementById('app')); root.render(<MyDisplay />);

[/CODE]
I hope this helps!

Hello Phro0244, Thanks. Help out with the code I currently have a problem with currently here https://www.thecodingforums.com/thr...he-quotes-app-to-work-whats-the-issue.974853/

An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
How can I arrange a series of radio buttons?	2	Jan 25, 2024
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help	0	Dec 9, 2019
How can I add arrows to my FAQ	0	Aug 9, 2023
How can I output an array in sequence to various div's?	2	Dec 29, 2022
Multi select options in a menu	1	Oct 30, 2022
Issue with passing fetched data to POST form. How can I?	0	Jul 23, 2023
Check forms With JavaScript	1	Mar 28, 2023

How can I add React 18 to existing HTML?

Atman Atos

Phro0244

Atman Atos

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads