How To Build CodePen With React

[@rishabsharma5307]

I usually think that projects like this are hard to build but when I see videos like this where guys like you build them so quickly then it makes me feel that nothing is too hard. It just calm my nerves and gives me self confidence that I can too build complex application.

[@samiyemane4305]

Not to burst your bubble but they usually have the project already made beforehand before they record themselves rebuild it while also referencing it from time to time. You too can build complex applications but they are complex of course and it may (will probably) take you more time to debug, look up things you might've forgotten and also get used to using the new libraries and such. Stay confident but also set realistic expectations on yourself or you might be discouraged when you fail to build a clone of a complex application in 30 minutes. All the best.

[@hasaniqbal233]

@@samiyemane4305 to add to this: the real codepen site is def not one that was coded in an hour or 2. With the amount of users they have, they probably have intricate software design systems and architecture set in place in the backend.

[@AishwarysinghEC]

same here bro@JitendraSingh-xc7yq

[@rajeevsinxh]

Next: How to build a React clone with React.

[@maskman4821]

agree !

[@aknas3613]

With Vue :)

[@vilashyadav442]

React Docs are build with docusaurus

[@aldipiero747]

No bruh you're wrong, its like build a React clone with Vanilla Javascript :)

[@rajeevsinxh]

@@aldipiero747 it was a joke on how he always builds every clone in React. I personally love react and I like his videos 😁😋

[@robertminardi4268]

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"

[@couchman-sw6jy]

I finished the app, now I will add features like registering, logging in, shared editing, etc. THANK YOU :D

[@anthonypetruzzi158]

This dude should have a million subscribers by now. I am so glad I found this channel. He explains everything so well and with baby steps. You do great work Kyle, keep going dude!!!

[@bibs24]

he has reached 1m

[@kirarevcrow]

Next: How to make Vuejs with Reactjs

[@IshanKesharwani]

Bro !!!!! 😜😜

[@greg6094]

Please do more clone videos! Some other youtubers tried it but their attempt is a frustrating joke. Your videos are always top quality. You deserve at least a million subs! Love your work!

[@manojkr2362]

now he has millon sub bro

[@AvikNayak_]

which youtuber are you taking about?

[@sheldonfourie5959]

Could you do a basic trello clone that you can actually edit the card and add attachments or dates and be dragged

[@WebDevSimplified]

Great idea!

[@anthonypetruzzi158]

One in react and one in Vue 😁 I'm a Vue guy myself

[@narcissisticnarcissus4956]

@@WebDevSimplified Please make this one. Those features are very useful in general and not a lot of tutorials cover them properly. Also a Trello close would be a great start for bigger projects.

[@Italiafani]

@@WebDevSimplified I'd love to see this as well! Especially the drag 'n' drop feature from column to another, and *storing the order* of columns and the cards inside columns.

[@azatecas]

bro i was just thinking how online text editors worked and here you bless us with this video

[@JamesQQuick]

Great stuff Kyle!!

[@faridun316]

That is awesome i cannot imagine that i can get this type of information for free!

[@nabiisakhanov3522]

You can get a lot more if you buy his course

[@faridun316]

@@nabiisakhanov3522 you are right! 👍

[@ThatGuyAnonymous]

You're doing amazing work Kyle! thanks for all the amazing content you keep pushing

[@unchart_d]

Kyle from the bottom of my heart please make medium clone with that text editor feature. Please am begging you. Thanks in advance.

[@avrelian8785]

If you aren't able to install react-codemirror2 using npm because you're using React 17, try "npm i react-codemirror2-react-17" instead

[@anish2148]

Thanks Man...I literally wasted 1 hour searching on Google..blessed to see ur comment...Tysm

[@shreejitpal6598]

need somthing for react-18 i tried react-codemirror2-react-18 but didn't work 😂

[@tawassumparveen6880]

@@shreejitpal6598 yeah same problem

[@AvikNayak_]

@@shreejitpal6598 what did you do then? I am having this issue.

[@manviaggarwal8646]

Thank you so much, wasted almost an hour searching online

[@muhammadhassan5884]

Local Storage Hook part is amazing. Thanks bro you brought really awesome tutorial.

[@WebDevSimplified]

Glad you liked it

[@maninderkaur855]

That was one of the best tutorial i have ever seen...thank you for this series

[@prestonjudearnold2814]

same im just wating for my react app to make xD

[@muldurksk]

This is awesome content, unique, on point and don't waste your time!

[@RenatoAlmeida49]

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.

[@shivam2kumar988]

Your recent videos have been 🔥 Awesome content, Keep it up!

[@WebDevSimplified]

Glad you like them!

[@lookintomyeyes2681]

that useEffect clearTimeout was smooth af

[@NickHamilton88]

🤯🤯🤯 Codepen watching this video in disbelief of how small the source code is compared to how many lines it took them to create this functionality. 🤯🤯🤯🤯🤯

[@10YardCricket]

You are the most underrated talented developer.

[@tsioryfitiavanaanhykrishna6992]

Clear and concise as usual, great video! Keep up the good works!

[@michaelschwartz4598]

I'm the creator of kodeWeave. I can tell you there's more complexity involved with developing these type of editors. Such as preprocessors, integrating js modules, defining if initial js type should be a module or not, dom diffing, importing libraries from the cdn, if you want to add multiple custom files locally without a server you need to use service workers for that, I can go on. But initial setup concept is accurate. Typically for css you target the initial style id and replace the textcontent with the new styles so you don't have to refresh the entire (which can be integrated in a DOM diffing function but dom diffing isn't ideal when you're coding in js). Anyway that's all I have to say on this.

[@JulienReszka]

Love that you added the timestamps thanks man

[@WebDevSimplified]

Glad you like them! I am trying to add them to all my new videos.

[@CodingFire]

I was waiting for this

[@olfeix3580]

Thanks bro. I was already working on this project. Now it will be much easier for me.

[@varshagoyal9574]

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

[@AvikNayak_]

but after that its showing this -> Missing "./lib/codemirror.css" specifier in "codemirror" package

[@nabiisakhanov3522]

19:40 It felt like RxJS should be used for such things

[@MaxProgramming]

You are a clone master nowadays!!!

[@couchman-sw6jy]

I was having trouble using codemirror and react together, thank you!!

[@arpitkumarmishra6220]

Building clone is new trend 😀

[@فريقالأبطال-ت2ك]

But it's great, to learn new things fast.

[@shakir_2766]

Yeah, but i love these trends instead of tiktok's shitty trenda 😂

[@collegematerial5348]

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

[@ridl27]

ty. its really easy to follow and understand your tutorials :)

[@CulturalToast]

Alright now build codepen in your codepen clone

[@realgabreal]

Next : How to build KZbin with React

[@MaxProgramming]

lol 😂

[@yt.mhasan]

@Clever Programmer already did it

[@sukhvsin2]

@@yt.mhasan it's not production ready

[@feng282]

@@sukhvsin2 Just out of curiosity, is it front-end completed at least? When you say production, you mean backend?

[@DominioSantos]

@@feng282 when we say "production ready" we mean "secure, stable, tested and documented". Most of those "*insert famous site* clone" are bare bones versions that would croak dead if used by thousands of simultaneous users, or wouldn't be secure enough for anyone to trust their data to them. These videos teach you to build toys, not real applications.

[@Cheng32290]

Damn! this is amazing! I didn't know it could be that easy. Thank you so much for the content!

[@josephwong2832]

That last part with localStorage was very useful

[@Ahmedmohamed-hx3jw]

Next: How to build a javascript clone with React

[@amiralmohyminrazin417]

🤯

[@elendil4543]

Next video : How to clone the existence with React . . . You're Awesome Dude

[@instructortom1359]

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!

[@rangabharath4253]

Awesome as always 👍😀

[@decryptroblox]

Next: how to make vscode using electron.js and react

[@kingdavid2446]

Heyyy Web Dev you are the programming goat :)!!!!!!

[@edtechbymeera]

I love codepen too and love this tutorial as well.

[@briandesign]

next build codepen in codepen

[@thexarviz]

2024: This is giving me 2 separate boxes for each language in top pane. so total am facing 6 boxes. and for every language, the top input box is not working, even if i type in the top box, its displaying in the latter one. probably its an issue with react codemirror2 FIX: add this in your css file: .react-codemirror2 > .CodeMirror:first-child { display: none; }

[@vinayakpatil5822]

thank you

[@bhavyanarle7740]

I am facing the same issue. Can you please explain

[@nish_1]

very big thanks bro literally wasted lots of time in doing chatgpts and all

[@petrafranklin]

As Always, AWESOME tutorial! Thank you!

[@yashpreetbathla4653]

Awesome content as usual 😍

[@taruvarmittal1484]

Great video!! Loved it!

[@shivangpurohit9132]

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

[@shivangpurohit9132]

@@shouvikchoudhury9691 use the exact version as shown in video

[@imabhishek_kr]

It's giving module not found error

[@vaibhavjadhav3791]

Thank you brother ♥️ ..

[@suhakim5072]

Thank you. This is one of my dream projects.🥰

[@Lohitpant]

I watched the video at 0.75x speed and was able to get everything. Thanks!

[@shaderone07]

This is SO COOL ...luv u kYle.

[@adisonmasih]

Hi! I Like Your Simple Way Of Teaching!

[@satyanarayangoswami823]

Had problems with codemirror package so opted for monaco editor instead now my whole page reloads when the srcDoc attribute of 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.

[@lookintomyeyes2681]

forgot to say the useLocalStorage hook was also so pure and awzom to work with, thq

[@mk9834]

omg this is so interesting, learned alot! Thanks!

[@iftekharalam7582]

thanks, i learn a lot from this video

[@randomguy2139]

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

[@123sid789]

Hi, at around 12:25 how did the setHtml, setCssand and setJs are working inside onChange? You have not passed any value to these functions. What am I missing?

[@Drendronix]

From MDN "Notes about sandboxing:When the embedded document has the same origin as the embedding page, it is strongly discouraged to use allow-scripts " What does it mean "the same origin"? And is it here that case?

[@engine_man]

Good stuff as always.

[@_Wolf_-ib9zd]

is it possible to do something like this again but with monaco editor?

[@leeyahav4754]

amazing tutorial thnx Kyle

[@fantaday2700]

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

[@craigbarnes9520]

I love this tutorial, and all your tutorials. Thank you so much for you time and effort. This was my first React project. A little complex, but I am getting the hang of it. Is it possible, if not already explained else where, to save more than one project and then open them, or even just clear the save with one button?

[@ajeeboamir]

Your content is 🔥 Amazing sir really amazing....

[@sangitasarkar8096]

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

[@DSCuber-28-01-2019]

When I add the useLocalStorage hook in my App.js, it throws me a cross-origin error. If I use useState hook instead of the useLocalStorage, it works perfectly. I googled it, but couldn't find anything. I hope you can help me. By the way reallycool and informative video.

[@hrushikeshdas4864]

I just love this project 😍 awesome!! Please can you simply the React routing 🙏🙏😅

[@prashoonbhattacharjee8211]

Amazing video👍!!

[@behnamparsaeifard3883]

great video! I'm wondering, how can we add a console to this app?

[@imPriyankCoder]

wow nice video. soany new concept to learm just out of curiosity could we open to new page if we want? having the design save?

[@azatecas]

hey kyle can you do a tutorial on how those stock sound/video site works

[@kgaming7599]

Can you teach us how to make a syntax highlighting editor? (No Libraries)

[@oleksiibraila8737]

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

[@renjithroy8422]

How long did it take you to reach this level?

[@umangshahi3073]

@WebDevSimplified any idea how i could create an editor component using codemirror and add react interpreter in it?

[@reinefang2201]

Thank you so much for this video! Can we use this with Python editor instead? (And compile it the same way with flask?)

[@animatedzombie64]

there you go, the clever programmer surely clone this!

[@healthandfitness3273]

i watched their all video they are just make the design not working one Thi guy is really good he explain eah and every thing in simple manners and fully function thing

[@rickyzheng572]

Amazing content as usual. Could you explain docker or do something with service worker? Maybe some system design overview?

[@MukundKumar-e7t]

Why the anchor tag is not working. It is showing refused to connect.

[@nagarajanraj370]

Its awesome man!!!!

[@olfeix3580]

A tutorial on Node js compilex will be great.

[@josephvasconcelos5943]

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

[@bensundin]

Is it possible to use anything like jQuery in this?

[@digigoliath]

Awesome!! TQVM!

[@pro_grammerpro_grammer1159]

what is the difference between controlled and uncontrolled mode

[@SmartStudy_48]

Which code app you are using?

[@FriendsExplanation]

Everything is Fab and Good . But whatever I'm writting in the editor is getting printed in reverse manner. Ex: Hello is getting printed as >1h/1h

[@AkankshaSingh-uy4oe]

same problem

[@AkankshaSingh-uy4oe]

have you found any solution?

[@FriendsExplanation]

@@AkankshaSingh-uy4oe No

[@GyanSinghYadav-s1o]

@@AkankshaSingh-uy4oe did u got any solution

[@AkankshaSingh-uy4oe]

@@GyanSinghYadav-s1o no

[@ParadoxWorks]

Hello Kyle! I really appreaciate all the videos you make! I also have one question as I am really curious about this one: How does a "normal" app development go? Is it like in your tutorials where you immeadiatly know where goes where with no stopping, questioning or braining since maybe you pre-prepared your code to show us? Or in real life example of development one wouldn't be so "efortless" and wouldn't know exactly how his code should be all put together? I hope you understand my question and that you will respond to clarify this one for me. Thank you!

[@WebDevSimplified]

Real life projects take much more time and I constantly am making mistakes and moving things around. This project probably took me a few hours to build out the first time.

[@ParadoxWorks]

@@WebDevSimplified Thank you very much for your quick response!

[@ArtVandelayInc]

Great video!

[@priyanshusaraf9495]

Next- Uber clone with react

[@pranshukumar6707]

Bro can you please help…the cursor inside the html editor is not properly aligned in my case…so exact text removal is not happening…it removes two or three line below.

[@Esizl]

you should make a hastebin clone that would be really cool

[@sujoyghosh7152]

thanks a lot for this project

[@SameerKhan-fy8vp]

everything is good but when i type any code it doesn't print

[@amanguptadev]

hey this is wonderful tutorial. friend can you tell me if i want to create a python and java editor then i also have compile the code them can you tell me how can i do it

[@bivakumari4685]

Amazing.....mind blowing....how do you actually get these ideas?