How can I add React 18 to existing HTML?


Atman Atos

Atman Atos

Joined
Sep 12, 2022
Messages
37
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/[email protected]/umd/react.development.js"></script>
    <script src="https://unpkg.com/[email protected]/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 />);
 
Ad

Advertisements

Phro0244

Phro0244

Joined
Mar 31, 2023
Messages
75
Reaction score
4
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/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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!
 
Ad

Advertisements

Atman Atos

Atman Atos

Joined
Sep 12, 2022
Messages
37
Reaction score
0
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:

  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/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/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!
Click to expand...
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

Similar Threads

An unknown bug doesn't allow the quotes app to work. What's the issue? 3
I want to Display Excel As HTML In js 1
Canvas drawing HTML Javascript on elementor 1
My sliding panel in React Js with graphs on it renders nothing but a blank screen--need help 0
Only one table shows up with the information 2
How to have two html audio players on one page? 0
CSS: How can I stop overflow on the y-axis? 2
Add recipes using JavaScript in table 20

Top