Build a Simple CodePen Clone using React
Welcome to a new simple React JS project, where we are going to build a CodePen clone using React.
So, fire up your terminal and create a new react app codepen-clone-react with the below command.
We will remove all the unnecessary boiler-plate code and our index.js will look like below.
And the App.js contains only Hello World text.
Next, we need to install two dependencies which will help us in getting the code functionality required for CodePen.
We will next start to get our HTML in place. So, open the App.js and put the below code. Here, we will have space for the three Editor of the CodePen inside a div. Also, the second div contains the iframe which will show us the output.
Next, we will create a components folder inside the src folder and a file Editor.js inside it. Here, we are importing most of things from codemirror. We will basically displayName first and after that the Controlled component from react-codemirror2, which will contain most of the functionality.
Next, move back to App.js and we will pass the props to Editor. We are also using the useState to set the value and onChange.
One, more thing which we need to change is to make the theme as material in Editor.js for the codepen like dark background.
Now, in localhost we can see all the three Editors.
Next, we will do some basic styling to have everything look great on the web-app. Add the below styles in App.css, where we are taking help of flexbox to style everything.
Next, let’s make it expand till the end by these two styles.
Now, we will add functionality to show the output on screen, like CodePen. We just need to add a srcDoc in App.js, which will contain the html, css , js and add it in iframe.
After that we can move to localhost and see our CodePen in action.
Next, we will have the open and close button(O-C) to function properly and also to show a nice icon.
We will first use the useState to have a state variable of open, which is initially set to true. After that the we have a className of collapsed if there is no open class. We also have an onClick handler to have setOpen toggle between treu and false for opne.
Now, in App.css we will have the style for collapsed class and we will also update a CodeMirror class. Now, when we click on the button it will make it as small as possibel.
Lastly, let’s install some fontawesome libraries to show an icon, instead of O-C in button.
Now, we will use these icons in our button and will also add a className btn-styles to style it more.
Back to App.css, we will put the styles including the overflow: hidden !important and this will complete our project.
And our project is working perfectly in localhost and exactly like CodePen.
This completes our CodePen clone. You can find the code for the same in this github repo.
