Transfer my code from my local environment to Codepen

1

This is my first time trying to code with VS code. It works fine in my local environment,
but I have problem to transfer it to Codepen.
The link:
https://codepen.io/Summerflower/pen/ExVGYax

When writing within VS code, I included
import React, { useState, useEffect } from "react"; import "./App.css";
// code here
export default App;

However, I am not sure how should I modify it if I want to transfer it to Codepen.
Can anyone help me? Thank you so much.

2

Here
Take a look on the link.

1 Like
3

Hum… still can’t figure it out. I have done pretty much the same as the link.

4

I would suggest using Codesandbox or Stackblitz for React. If you want to do import/export on Codepen it has to be a Project and it has some ridiculous limitations for free accounts.

Anyway, you can use the React object.

React.useState()
React.useEffect()
1 Like
5

add this to the top of your file

const { useState, useEffect} = React

1 Like
6

Thank you! It works now!

1 Like
7

Thank you! I will have a look at the two websites you mentioned.

8

Right, as shown, you can also use destructuring to get the methods out of the object. It looks a bit more like an import and works as you’d expect.

const {useState, useEffect} = React;

useEffect()
useState()
1 Like
9