How To Build CodePen With React

codepen is really cool what if i told you you could use react to create your very own code plan and it's actually fairly simple also if you enjoyed this project and want to take your react skills to the next level make sure to check out my full react course i'll have linked down in the description below let's get started now [Music] welcome back to web dev simplified my name is kyle and my job is to simplify the web for you so you can start building your dream project sooner so if that sounds interesting make sure you subscribe to the channel for more videos just like this now to get started here's the complete final version of my codepen project you can see we can modify our html and it's going to update down here we can modify our css by making this for example yellow and it's going to update down below and we can even modify our javascript let's make this blue and you can see it'll update down below we can expand and collapse all of these as needed to make it so we can emphasize exactly what we're focusing on and really this does everything codepen does including saving york so if i refresh the page you can see that all of my work has been saved on my computer so i can continue to work on it later so let me show you exactly how to create this very first thing i've done is i've run npx create react app to give us just the boilerplate react application and if we just come over here and run npm start we should be able to start up that application and it'll open up on the right side of our screen but we don't need all of this boilerplate code for example all these css and test files so we're just going to remove all those so let's get rid of these test files logo service worker setup test and this app css we can just delete all those get rid of all the styles inside of index css and in this app we just get rid of this css file this svg file and let's here just return the text hello world and hopefully if we save this and save this refresh over here we should see still not working looks like in our index we need to remove service worker stuff i'll remove that and now if you save we can see we get the text hello world let me zoom that in a little bit make it easier to see and now what i want to do is create a new folder for all of our components that we're going to create and i'm just going to move app.js inside there we'll probably have to refresh our page to get it to load there we go make sure that this up here auto corrects to dot slash components slash app otherwise you know it's not referencing the app component in our components folder so now that we have that done we have our components we have a css file and we have our base app so we can actually get started writing this codepen clone and of course the most important part of the codepen clone is going to be these text editors up here let me just zoom this out a little bit these text headers up here so in order to get those text editors let's open up our terminal down here type in npmi and we need to install two libraries the first one is called codemir this is going to be the text editor we use and the next one is going to be called react code mirror two and what this is going to do is allow us to actually use the code mirror text editor inside of react easily with a custom component so this is just going to make working with codemir so much easier now the next step inside of our app component here i want to set up the basis for this what we essentially have is this top section up here this bottom section and then our three text editors so let's kind of get our boilerplate you know generic html down for what that's going to look like we're essentially going to return two divs this top section and this bottom section so we need to wrap everything in a fragment so that we can return these two separate divs so we can have a div here and then copy that down and the second div is going to be our bottom section and just to denote that these are different panes we're going to give them a class of pain and this one's going to have a class of top pane because it's going to have some specific styles for it and down here we're going to have another one with a class name and this is just going to say pain because our bottom pane doesn't have any generic specific classes for it now inside of this bottom pane in order to render all this custom html css and javascript we actually need to use an iframe so let's just come in here with an iframe we need to give it a title in our case we're just going to give it a title of output and i'm sure you're going to move all these different attributes onto separate lines because there's going to be quite a bit that this iframe is actually going to do and we'll just make it self-closing the next thing we need inside of here is to say sandbox and we want to say that we want to only allow scripts this is just going to help a little bit with security so that when you run a codepen application it's not able to access a bunch of other things like the document cookies and such like that because you don't want this iframe to be accessing all of that stuff especially if you implement saving to a server and let someone else open this up you don't want any malicious activity going on now the next thing i want to do is set here the frame border to zero we don't want any border around this we want to set the width to be equal to 100 percent because we want it to be the full width and same thing with height we want that to equal 100 now up in this top pane section we're essentially going to need to create three different editors three text editors here for html css and javascript so we can just come in here and say editor that's going to be a custom component we create ourself and we're going to want three of these so let's create that component now we'll call it editor.js and just type in rfc hit tab that'll give you this boilerplate code if you have an extension called es7 react redux graphql rack native snippets super useful i highly recommend you download it for you know these quick little typing sections so let's just make sure we save all this and come over here and import our editor from dot slash editor there we go and now inside here we can just output the text editor for example and if we come over here you can see we have the text editor being printed out three times because we're rendering three different editors and right now our iframe isn't doing anything because we haven't given it any content to render that's perfectly okay for now now inside of our editor here we can actually get to work on actually rendering our editor and to do that we actually need to import a few files the first thing we need to import is from code mirror slash lib slash codemirror.css this is all the styles related to this text editor that we're going to be using the next thing we want to do is import our theme so in our case we can do code mirror theme material dot css this is all the css styles for the material theme that we're going to be putting on all of our editors and then we want to import the languages we're going to use so we can say code mirror slash mode and then first of all we want to do xml this is going to be html essentially they just call the xml here then what we're going to do is copy this down we're going to have one for javascript so we can say javascript and then lastly we want to do one for css so we've imported our base css our theme css and then all of the javascript related to the different languages we're going to use so that way all the syntax highlighting works properly for xml javascript and css and like i said xml is essentially the same as html they're going to work exactly the same now with that out of the way we can actually import our text editor it's going to be called controlled we're going to rename this to controlled editor just so it's easier to know what's working on we can get that from react code mirror 2. this is going to be an editor that we can actually control the input and output on with our own on change event handlers and our own value just like you would with essentially any other generic input inside of react now let's go back over here to see kind of what our editors are going to be looking like we have this container that wraps everything with this top section that contains our title as well as our open and close button and then this bottom section is essentially the entire controlled editor here so what we're first going to have is a div that has the class name of editor container this is going to be for you know handling this entire section and inside of here we're going to need another div and this one's going to be for our top section which is going to be our editor title so inside of this editor title we essentially want to have this display text here html css or javascript so we're going to pass that into our editor as display name we can just render that down here display name there we go and then also inside of this editor title we want to have a button and this button is going to be our open close button for now i'm just going to put o slash c or open close but we're going to actually handle this you know icon later i'm just not going to worry about that right away because it's not super important for the beginning of this tutorial now the final thing we need underneath our title here is going to be our controlled editor and it's going to be self-closing and essentially we're going to have a bunch of different things we're going to need to set up in here our first is going to be an on before change handler and this essentially works as the same as an on change event handler for any other input we just have to call it on before change here we're going to pass it a function called handle change we're also going to set the value which we're just going to create a variable called value for we'll do that up here and then also we're going to pass in here a class name this is just so we can do some custom styles we'll call it code mirror wrapper and then finally we need a bunch of different options and these options are from the code mirror library so for example we want to wrap all of our lines so we're going to say line wrapping is true we're going to say lint is true we're also going to say our mode is going to be the language we pass in and that is going to come from our props so let's just put that up here language and actually let's just get this as props and we'll destructure it down here so we can say const we're gonna have language and we're going to have also here the whoops display name set that equal to props there we go that way it's just easier to read all of this then finally we're going to have line numbers set to true just so we can see our running numbers it's going to give us this really basic editor over here we can save that and now we need to do is essentially set up this value and this handle change so up here we're going to get our value from the actual editor here in our props and also we're going to get an on change coming from our props as well this is what we're going to call with our new value so we can just create a function called handle change and this handle change function is a little interesting because it uses this before change here it's actually going to get the editor it's going to get some data and then finally the thing we care about is this value here as our third property and we can just call on change with that value it looks like i actually imported on here let's just get rid of that now we can save and hopefully if we come over here we'll see that everything's working we have our text editors and of course nothing's really hooked up because we're not passing any on changes in there but we have our text editors we have these open close buttons we just need to start passing things into our editor also you'll notice we don't have this dark theme we still have our light theme so down here in our editor let's make sure we pass in a theme and that is our material theme here now if we save you should see we get that dark theme which looks much better than the light theme so now back inside of our app js here we have our editor and you remember we need to pass in our language and this first one is going to be for html which you remember we had to call xml just because of the way codemirror works we need to pass in a display name which in our case is just going to be html we need to pass in our value which we don't really know what that's going to be yet so we're going to leave that blank and then we need to set an on change here which we also don't know exactly what that's going to be let's just set these onto different lines here to make it easier to work with there we go so the next step we have is to really worry about this value and this on change and for now we're going to use state for that so we can say use state we can come down here and we can say or i'm sorry const html and set html is going to be equal to use state and by default we're going to have an empty html so now here our value is html and our on change is set html and that is essentially our entire html editor done we give this a quick save you can see our text html showed up here and if we type this is actually setting the html variable here inside of our state every single time we make a change because we're passing down that set html to update on change let's quickly do the exact same thing for css and javascript so we'll do css js there we go and we can just copy this editor down here twice and this one's going to be css and set css and then down here we're going to have javascript we'll just say js in the title we have js and our set js and now we can change our html css and our javascript and we're getting nice syntax highlighting for example if i want h1 you know something h1 as you can see we're getting that nice syntax highlighting which is exactly what we want we're even getting error linting which is great so now before i start going crazy getting all this hooked up so we can actually render it down here in our iframe i first want to set up some styles because right now everything we have on this page is really really ugly to look at in this index.html let's first get rid of all of our margin on our body just pushes everything up to the side that looks really good and we're going to select our top pane and essentially what we're going to do is we're going to set it to have a background color slightly different than this background color for our text editor so we can say background color here is going to be hsl 225 6 and 25 and if we save that you can see that we get a slightly different color than what we have for our text editor just to give them a little bit of contrast from one another then we can actually style each one of our individual panes we know that we want each one to essentially be half the height as you can see over here we have one being top half one being the bottom half so we can set the height of each one to 50 vh and we also want to use flexbox to style these so we'll just set it to be display flex now if you come over here you can see all of our text editors are on the top and our iframe down here is on the bottom let's continue with our styling and move on to our editor container this is the thing that wraps each one of our different editors so as you can see this kind of section over here that wraps each one of our editors what we're going to do for here is we're going to set the flex grow to be one that's going to essentially make them grow so that they fill the entire space you can see our text editors got wider than when we did that so they fill the entire space which is great we also want to set the flex bases to zero so they all are exactly the same size that'll make it easier to work with everything we're going to set display here to flex so we can style the things inside of here and since we want them to style from the top to the bottom we're going to set the flex direction to column now if i say that you shouldn't notice any change which is perfect now let's add a little bit of padding so we'll use 0.5 rem just to give some space between each one of our editors and also i want to set the background color here to be that same hsl two to five six percent and twenty five percent and there we go we can save and you can see we have our editors already looking very similar to our editors over here they're spaced out nicely and look pretty good we just have a lot of minor tweaks to go from you know rounding the corners and getting the text color proper so in order to get started with that we can select that editor title and edit our title if you remember correctly is just that top section up here with our you know text as well as our close button so in our editor title we again are going to use flexbox to lay these out and since we want to space them around from each other we'll say space between and what that's going to do is push the button to the far right and the text on the far left i'm also going to use a background color here which uses that same 225 six percent but i want to make this one darker so we'll do 13 percent as the lightness that's going to give us this nice dark color up here but to contrast that we need to set our color to white so that our text color actually shines through then to add a little bit of spacing from everything we'll use 0.5 rem for everything except for our very last site is going to be one rem that just makes this html text a little bit further out from this left hand side because if we also made this 0.5 rem it just is a little bit too close for my liking so i think one rem looks just a little bit better then we can round our corners so we can say border top right radius is 0.5 rem we can do the exact same thing for the top left and that's going to round the top corners of all of our different editors which looks really good so now let's work on actually rounding out the bottom of our editors as well to do this all we need to do is take our code mirror wrapper which we already have put a class on we need to set the flux grow here to be one that's going to make it grow essentially to fill the entire height we also want to set our border bottom right radius to be 0.5 rem and we want to get the bottom left radius to be the same and just make sure we take overflow and set it to hidden now if we save that you'll notice that these bottom borders down here actually aren't grounded as much as they should be the reason for that if we zoom out a little bit is you'll notice this code mirror section doesn't actually drop all the way down to the bottom of our screen so we need to do is override the default style for the class code mirror and all we want to do is set the height to be 100 we're going to mark that as important this is going to make sure that this overrides the default style from the editor which has a set static height and overrides that to 100 now if we save you can see it expands to the full height if i just zoom in here you'll notice the rounding on the bottom and the top is exactly the same because it's now filling 100 of the height so now with that done we have most of the styling done other than this button over here but we're going to come back to that because the more fun part of this application is actually getting all of this html css and javascript to render down in this iframe and to do that we need something called a source doc so what we could do is we could create a variable called source doc which is going to be equal to essentially a string here and that string is going to have html oops not capitalized html we need to close off that html essentially we're just building an html document inside of here we're going to have our body which contains the html that is inside of this text box here we're going to do another thing which is going to be for our style sheets that's going to be our css and we're also going to have a script here and that script is going to be for our javascript just like that and now we can take this source dock and essentially put it inside of our iframe here so we can say source dock is equal to whoops source doc there we go so now if i come over here and type something in html you'll notice it renders down here but it renders immediately and this is all right it's not terrible but the problem is that if you have a lot of complex code and you do this render every single time you change a character it can kind of slow down the browser and cause it to start getting a bit sluggish so a good thing we can do is essentially cause this to only happen after a certain delay you put in a use effect here and what we can do is just say use effect and we want to do is any time our html css or javascript changes so let's say html css or js we want to do is create a timeout so we'll say timeout is equal to set timeout and what we want to do is say essentially only after 250 milliseconds will we actually run this you know code and this code is just going to create this source doc we're going to call a function called set source dock we're going to pass it in that string and we'll just create a new state for that called source dock and set source dock is equal to use state and it's just going to be an empty string by default so now essentially what we've done is we've moved this timeout into this use effect instead and we're only setting the source dock if there's been a 250 millisecond delay what happens if we change html css or javascript during that 250 milliseconds we don't want to re-cue this essentially re-create our timeout what we want to do is cancel the old timeout so we can just run a function called clear oops clear timeout we can pass it in our timeout so this is going to clear out this update and it's going to create a brand new one every time we change this so the only time we're ever setting our source dock is that there's a 200 50 millisecond delay between us typing which essentially means that we're either done typing or taking a slight pause so let's save this to see if it works if we just type a bunch of stuff you'll notice it's not updating as soon as i pause for 250 milliseconds it's going to update down below same thing we can make a bunch of changes wait 250 milliseconds and it'll update at the bottom and that's exactly what we want we could even make this longer you know you can make it a 1000 millisecond delay so essentially one second and now if i make some changes wait a second it's going to update down here 250 i find is a pretty good speed though because most people type more than one key every 250 milliseconds if they're actually typing and those little bit of pauses are good ways to get you to update essentially as quick as possible after you're done typing so now to make sure this all works let's just create an h1 we'll say hello world close that off there we go we can also inside of our css say that our body is going to have a color of red okay we know that works and then in our javascript we essentially want to do something a little bit different we'll just say document.body.style.background is going to be equal to green for example and as you can see that's updating our color to green we change this to blue now we have a blue background so we at least know all of this code is working so the next step is going to be making this close button and open button actually function properly because that's a really big part of codepen is being able to close off the stuff you don't need and only have the stuff you're currently working on actually open and working with so inside of our editor we need to set up a local piece of state so we'll just say in here use state and come down here we can say const open and set open is equal to use state and by default we're going to have all of our text editors be open now what we can do is we can essentially take this class here turn it into a string interpolation instead let's just make sure we have that set up correctly so we're going to have our editor container and then we're going to have a little function here which essentially is going to say if open is true then we don't want any additional classes but if open is false then we want to have a collapsed class so with that set up all we need to do inside of our index here css file we're going to create an editor container dot collapsed selector and all we want to do is change our flex grow to be zero so it's not going to grow at all and then in our editor in order to update that on our button here we can just set here and on click we're going to set that equal to a function which is just going to invert our current open so we can say set open based on our previous open and it's going to just invert that so not previous open this is just going to essentially go from being open to not open and from not open to open now if i click this you can see we can expand and collapse every single one of these as much as we want it's just that flex grow property that's doing all of that for us a slight problem you might notice though is if we have a bunch of text inside of here and we click close you notice it's only getting as small as our actual text a really easy way to get around that is inside of our index css we can create another style selection for editor that is collapsed and all we want to do oops one too many in there all we want to do with this is we want to select the code mirror dash scroll class and we're just going to set the position to be absolute now if we save you can essentially see that's removed all of our normal width from this container here because we positioned it absolutely so it's going to be as small as humanly possible so it's not going to worry about how much text we have inside of it it's just going to collapse as small as humanly possible now the last kind of step we have with this open close button is to actually get this really cool icon here that changes from open to closed whenever we click on it so we're going to install some font awesome library to do that so we can say npmi we just want to say at fort awesome and make sure it's fort and not font slash react font awesome so that's going to get the react version we also want to install fort awesome slash free solid svg icons that's going to be all free icons that we can use and then finally from fort awesome again we want to get font awesome oops awesome spell that correctly svg 4 and this is essentially going to be the core library we need to actually render out all these different svg icons now in our editor we can actually use all of these different pieces to actually import these icons and actually use them so here we can say import what we want to do is we want to get font awesome icon and we want to get that from whoops from that fort awesome we want to make sure it's at fort awesome react font awesome that's just our react component that we're getting and then we want to get an individual icon we want to get the fa compress alt i also want to get the fa expand alt this is just going to be these icons you see here for expanding and compressing and those are going to come from those free icons so we can just say free solid svg icons right there and now we can render this font awesome icon inside of our button so instead of o c here we can say font awesome icon we can pass in the icon and if it's open we're going to pass in the icon for closing it so that's going to be the fa compress otherwise we're going to pass in the expand icon just like that then we can close this off so now you should see over here that we have these icons which is exactly what we want and now we can work on styling it so in order to do that let's come in here we'll set the type of this to button and we're also going to set a class name here this class name is going to be expand collapse button this is just so we can select this in our css so let's just come down here expand collapse button what we want to do is set a little margin on the left of 0.5 rem this is just so when we close our icon it's not pressed right up against here because that's just a little bit way you know janky looking next we're going to get rid of all the generic button styles so we're going to say background none border none and we're going to change the color to be white and lastly set the cursor to be pointer now we click on it you can see it's expanding and collapsing exactly like we want you will notice a slight problem though when we collapse this we get these weird scroll bars in order to fix that we can just come in here and say that we want to have our overflow for our code mirror scroll section to be hidden and we want to make sure that's set to important so it overrides always that's going to get rid of those annoying scroll bars so now we no longer have those when we're in that collapsed mode and now really the last step we have is that if we make changes here and refresh our page we want them to be saved so we're going to create a custom hook for that we'll create a folder called hooks and inside that hooks folder we're going to create a new file called use local storage dot js there we go and we can do that rfc trick here we won't need to worry about react but we will need to have use effect and use state inside of here and the way this used local storage hook is going to work is going to take in a key in an initial value this is essentially the key that we want to use in local storage and initial value is just our generic initial value so for example here all of these empty strings so now what we can do is also create a variable called prefix and this prefix is just going to be set to codepen clone and the reason i create these prefixes is i prefix the key with this prefix value so that way when you're working on localhost 3000 which you probably have tons of local storage variables stored in it'll be easy to see which ones are corresponding with your exact application as i highly recommend doing in any application now we can get our prefixed key which is just equal to our prefix plus our key just combines the two together and now we can do the fancy stuff for our actual setting up our hook so the first thing i want to do is use some states so we'll say value and set value make sure this is capitalized we'll say use state and here we're going to use the function version of use state because getting our value from local storage is pretty slow actually so we only want to do that once if we have to so we can get the json value from local storage which is just local storage dot get item we're going to use that prefixed key then if we have a value so if json value is not equal to null what we want to do is essentially just return the json parsed version of it of our json value so we're just returning the value from local storage if we have one otherwise if we don't have a value in local storage what we want to do is just use our initial value so we're going to check if the type of initial value is equal to a function if so that means we're using the function version of use state so we're going to return initial value calling it as a function otherwise if it's not a function that just means it's a value so we can just return initial value itself so that's all of our code for setting up our value now we need to set up a use effect for what happens every single time that we change our value so here we're going to put value as our only value to change down here as well as our key because if some reason our prefixed key changes then we know that obviously we need to resave it to local storage and here all we're going to do is take local storage we're going to set the item at the prefixed key as the json stringified version of our value this is just saving our value in local storage and up here we're getting the value then down here we're going to return this so it looks just like vocals or just like you state so we're going to return the value as well as the set value function so we're just getting these value and set value functions making sure we're setting it initially to local storage and then every time we update it we're saving that back in our local storage we have that hook done now inside of our app we can import that hook use local storage we want to get that from dot dot slot here hooks slash use local storage and let's just replace these use states up here or html or css and our javascript with the local storage version which you need to give them the names of html down here it's going to be css and down here we're going to have js so now if i for example change our html refresh our page you can see that's persisting same thing if i change our css or javascript refresh the page you can see each one of those is persisting those changes and they'll be there whether i leave the page and come back a week later a day later or a year later it doesn't matter and that's all it takes to create this code pen clone if you enjoyed this video make sure to check out my full react course which covers everything you need to know about react i'll link in the description down below so thank you very much for watching and have a good day

Channel: Web Dev Simplified

Views: 54,018

Keywords: webdevsimplified, codepen clone, codepen, codepen react, codepen react clone, react js, reactjs, react js project, reactjs project, react tutorial, react js tutorial, reactjs tutorial, react project, react tutorial project, codepen project, codepen tutorial, codepen project clone, codepen css, codepen html, codepen project react, codepen project reactjs, codepen editor, custom codepen editor, codepen reactjs clone, codepen react js clone, codepen.com, codepen.com clone, js, css

Id: wcVxX7lu2d4

Length: 30min 26sec (1826 seconds)

Published: Sat Sep 19 2020