How To Build CodePen With React

Uncaught (in promise) Error: Content DefaultConnector: Error when handling response of "IsInPageViewTrackingList": The message port closed before a response was received.

Hey.. i tried to implement a terminal modal which would display all thr console.logs from the script. But i cant find any solution.. can anyone pls help

How to answer this question when interviewer ask that what is different in your code editior that is already available in market

you are the best of the best

we can use any command of js????

Had problems with codemirror package so opted for monaco editor instead now my whole page reloads when the srcDoc attribute of iframe changes.
Is there any fix

EDIT : It seems that it only happens on the mozilla developer edition. This wasn't a problem with brave or chrome. Maybe it is because mozilla doesn't use the chromium engine.

if you run into codemirror problems, just get the [email protected], just solved some package problems I was stuck on

OK, the video is great as always. But how can you guys focus when he is teaching😶

Can u please share the codes

Thank you posting such a woderful video. However, I am getting an error saying all the imported packages in Editor component are not expprted from codemirror. Is it possible to fix? I have installed codemirror as explained in the video

"npm i codemirror react-codemirror2" command is not working.... plz help

How to do code setup
Am not getting please help..

Can anyone please recommend react setup video! I have been trying for a few hours.

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';
import 'codemirror/mode/xml/xml';
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/css/css';
NOT WORKING

Npm config set legacy-peer-deps true
Npm i codemirror react-codemirror2

If it's still not working try
Npm i codemirror@version5

Next Video: How to build my clone as a developer with React.

How can we add multiple themes in the editor like we have it in vs code? For example: Material Theme or Github Dark Theme. If we have a pakacge for it then please let me know. Thankyou😊

Hi ,
Thank you man for sharing this kind of content.
I'm trying to install codemirror and react-codemirror2 library and looks like my npm version is updated that's why it's throwing errors
so do we have any other way to install these library without changing the current version ?

if you are unable to install any library , the use command ` npm config set legacy-peer-deps true` . you can install library in react

Everything is Fab and Good . But whatever I'm writting in the editor is getting printed in reverse manner. Ex: <h1> Hello </h1> is getting printed as >1h/<olleH>1h<. And I don't know why is it happening like this

How to build a PC with react

this tutorial seems very old I'm getting following error:
Module not found: Error: Package path ./lib/codemirror.css is not exported from package /home/shejal/Desktop/WDS/codepen-clone/node_modules/codemirror (see exports field in /home/shejal/Desktop/WDS/codepen-clone/node_modules/codemirror/package.json)

Can anyone please check my code ?

java script has not worked in these codes

Hey Kyle , I'm getting error while importing codemirror in editor js , i already installed codemirror and codemirror2 as you shown , how i can fix that

Try this .. If you are facing issue regarding codemirror-2 package :- npm install react-codemirror2 --legacy-peer-deps

why packages are not retrieving from codemirror ????

Kyle, i'm really not trying to sexually harrass you, but you are a very seriously good looking man!

Is there a way to prevent the iframe from flashing white on update? :)

This was my first React project ever and wow did I learn a lot! So glad I found this channel! If I lived by a mountain, I'd climb to the top and yell "Web Dev Simplified is the greatest!" "...greatest" "...greatest" <= those are the echoes

Mate, thanks a lot for this! I thought it was something really complex. But you make everything looks easy. And it's amazing to see how powerful simple things are. And how many problems we can solve making a good use of these tools.

Can you please make a separate Video on a Project Like PDF to Audio Converter in Django python Step By Step, in Which We Can also Convert the Audio Language of the Converted File.

Cant install react-codemirror2 or react-codemirror2-react-17. Any ideas?

Do reply fast
anyone
be my guest....

bro , i m seeing the result output pane in a reverse order of words. how to fix this??????

Please Help !!!!!
HTML CSS is working fine but the problem is that the JS part is not getting executed.

I can't install react-codemirror2 without it throwing a bunch of errors. Why I try any of the fixes listed online the editor just glitches

you sure this is working?

yes iframe accept dynamic HTML and CSS, but not JS, if you change JS on the fly, it wont work

update: you can use key props to solve problem above but this only work after you build it, not working in development, I have 0 idea why

My cursor is blinking but i cant type anything in the editor.. pls help

Alright now build codepen in your codepen clone

I know this is old, but if anyone sees this, then it'd be a huge help:

I'm missing the reasoning behind these lines in your useLocalStorage custom hook:

if (typeof initialValue === 'function') {
console.log("function")
return initialValue()
} else {
console.log("not function")
return initialValue
}

If I replace all of that with just "return initialValue" then the functionality is unhindered and I was careful about being sure to wipe localStorage each time I tested the change.

I'm just not sure why we'd have to specify the difference between "function" type and string type, as nothing is to be displayed initially from our js editor. I'm sure I'm missing a key concept here, so I'd love to hear what I'm missing if possible!

quite frankly your hair looks like my new toothbrush. Sorry for making you angry. Love you and Kevin sir

How to get console logs, errors from iframe?

Can u make canva clone, like building resume in canva

thanks, i learn a lot from this video

thanks a lot for this project

Great video! but I`d like to find out how to add the possibility to write on jsx/react? thank you in advance)

is there any functionality with code-mirror that I can upload the code created in the text box to an api using requests

React-codemirror2 is not for react versions above 16.x latest is 17.x any alternatives for react-codemirror2
Please answer this!

js alert function not working why?