Question 80275 in Html Question posted in
Some basic documentation can be found here.

React does not render in the browser – Html

I’m new at React.js and I’m trying to render the following code in the browser (Firefox) but it’s not working. Could someone help me please?

React.js:

import React from "react"
import ReactDOM  from "react-dom/client"
const page = (
    <div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
        </ul>
        <ul>
            <li>Thing 3</li>
            <li>Thing 4</li>
        </ul>
        <ul>
            <li>Thing 5</li>
            <li>Thing 6</li>
        </ul>
    </div>
)
ReactDOM.createRoot(document.getElementById("root"))
root.render(page)

HTML:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

NOTE: I’m using Firefox and visual studio code for Linux mint

Tags:

2

Answers


  1. 0

    React uses class or functional components to render the displayed HTML, however, you only provide some JSX in parentheses.

    Update your code to use a functional component (the recommended way) instead.

    const page = () => {
    return (
    <div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
        </ul>
        <ul>
            <li>Thing 3</li>
            <li>Thing 4</li>
        </ul>
        <ul>
            <li>Thing 5</li>
            <li>Thing 6</li>
        </ul>
    </div>
    );
}

    You may also want to read the React.js docs, as they provide great examples of how to use react.
    https://react.dev/

    Login or Signup to reply.
  2. 0 
    import React from "react";
import ReactDOM from "react-dom";

const page = (
    <div>
        <ul>
            <li>Thing 1</li>
            <li>Thing 2</li>
        </ul>
        <ul>
            <li>Thing 3</li>
            <li>Thing 4</li>
        </ul>
        <ul>
            <li>Thing 5</li>
            <li>Thing 6</li>
        </ul>
    </div>
);

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<>{page}</>);

    Dom is wrongly imported

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search