How can I add React 18 to existing HTML?

Joined
Sep 12, 2022
Messages
39
Reaction score
0
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 />);
 
Joined
Mar 31, 2023
Messages
95
Reaction score
8
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:

  1. 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.
  2. 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.
  3. 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>
  1. 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!
 
Joined
Sep 12, 2022
Messages
39
Reaction score
0
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:

  1. 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.
  2. 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.
  3. 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>
  1. 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/
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,821
Messages
2,569,749
Members
45,733
Latest member
MariaQch13

Latest Threads

Top