React doesn't render on CodePen

JavaScript
1

No matter what I do, my JSX Code doesn’t render when I use it on Codepen. I use Babel, importet the latest react and reactDOM, there’s no errors but it still is not working. What am I doing wrong?

2

Hi @wkfvcz4jvr !
Welcome to the forum!

According to the react docs, you need to have createRoot imported.

This is the example from the docs

<!DOCTYPE html>
<html>
  <head><title>My app</title></head>
  <body>
    <p>This paragraph is a part of HTML.</p>
    <nav id="navigation"></nav>
    <p>This paragraph is also a part of HTML.</p>
  </body>
</html>

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

function NavigationBar() {
  // TODO: Actually implement a navigation bar
  return <h1>Hello from React!</h1>;
}

const domNode = document.getElementById('navigation');
const root = createRoot(domNode);
root.render(<NavigationBar />);

If I were you, I would use something else for react projects like codesandbox.
it supports imports and multiple files and mimics the real world experience better.

I like codepen, but I haven’t found it to be the best for react IMO.

hope that helps

2 Likes
3

Thank you so much for your quick answer! I wasn’t aware that it’s also possible to use codesandbox for the coding challenges on freecodecamp. I tried it out and it’s so much easier to use and resembles VS Code more. Yayy!

2 Likes
4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.