How To Build CodePen With React

🚨 IMPORTANT:

Learn React Today Course: courses.webdevsimplified.com/learn-react-today

I love CodePen. It is perfect for prototyping project ideas and is a really cool idea. I like it so much I decided to see what it would take to create my own CodePen. In this video I will be showing you how to create a simple clone of the core functionality of CodePen using React.


📚 Materials/References:

GitHub Code: github.com/WebDevSimplified/React-CodePen-Clone


🧠 Concepts Covered:

How to create a text editor in React
How to render custom HTML/CSS/JavaScript


🌎 Find Me Here:

My Blog: blog.webdevsimplified.com/
My Courses: courses.webdevsimplified.com/
Patreon: www.patreon.com/WebDevSimplified
Twitter: twitter.com/DevSimplified
Discord: discord.gg/7StTjnR
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified


⏱️ Timestamps:

00:00 - Introduction
00:32 - Demo
01:06 - Code Setup
02:59 - HTML Setup
05:34 - Editor Setup
12:35 - CSS
17:13 - CodePen Functionality
21:10 - Open Close Button
26:22 - Local Storage Hook
30:14 - Outro


#CodePen #WDS #ReactJS