# React 18 Codepen Template

**URL:** <https://forum.freecodecamp.org/t/react-18-codepen-template/656363>\
**Category:** Curriculum Help\
**Tags:** javascript\
**Created:** [December 17, 2023, 6:55pm UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363 "2023-12-17T18:55:16Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![AdventureBear](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adventurebear/32/74786_2.png) [@AdventureBear](https://forum.freecodecamp.org/u/AdventureBear)\
**Post date:** [December 17, 2023, 6:55pm UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363/1 "2023-12-17T18:55:16Z")

</div>

I know i have been frustrated not being able to get React 18 imports to work on Codepen, and getting a variety of errors that seem like they should “just work”. For anyone that wants to use React 18, here is a template that imports the scripts using the HTML area with cross origin.

[https://codepen.io/AdventureBear/pen/LYqwbwx](https://codepen.io/AdventureBear/pen/LYqwbwx)

If you want to use React 17 instead you can use this oen:

[https://codepen.io/AdventureBear/pen/GRQGNmq](https://codepen.io/AdventureBear/pen/GRQGNmq)

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 17, 2023, 8:59pm UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363/2 "2023-12-17T20:59:23Z")

</div>

What makes you say it isn’t supported?

```auto
import React from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";

function App() {
  return <h1>React 18</h1>;
}

const root = createRoot(document.getElementById("root"));
root.render(<App />);

```

---

<div class="post-metadata">

**Author:** ![AdventureBear](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/adventurebear/32/74786_2.png) [@AdventureBear](https://forum.freecodecamp.org/u/AdventureBear)\
**Post date:** [December 18, 2023, 1:40am UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363/3 "2023-12-18T01:40:44Z")

</div>

You’re importing in the JS area just like my example imports in the HTML area. This isn’t how codepen works with prior versions, where you can add them using the JS settings. So you have to figure it out instead of it ‘just working’. So we both have solved a problem.

---

<div class="post-metadata">

**Author:** ![lasjorg](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/lasjorg/32/280761_2.png) [@lasjorg](https://forum.freecodecamp.org/u/lasjorg)\
**Post date:** [December 18, 2023, 4:14am UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363/4 "2023-12-18T04:14:01Z")

</div>

You can use settings, either “Add External Scripts/Pens” which is the same as adding them to the HTML, or use “Add Packages” which is a module import.

Just remember, ReactDOM should be added after React.

Here is a fork of your Codepen with React added using the settings just in case it isn’t clear what I mean. You can fork it if you want, I’m going to delete it at some point.

> **[React 18 Starter Template](https://codepen.io/lasjorg/pen/XWOvgpd)**
>
> Codepen doesn't support React 18 using the import settings for JS. This imports the proper scripts in the HTML using cross origin settings. ...

---

<div class="post-metadata">

**Author:** ![system](https://global.discourse-cdn.com/freecodecamp/original/3X/e/1/e1c433102e34b46dfaa3e15d13ab9a514b127078.svg) [@system](https://forum.freecodecamp.org/u/system)\
**Post date:** [June 17, 2024, 4:14pm UTC](https://forum.freecodecamp.org/t/react-18-codepen-template/656363/5 "2024-06-17T16:14:37Z")

</div>

Closed on June 17, 2024, 4:14pm UTC

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