{"id":37280,"date":"2023-02-17T22:44:10","date_gmt":"2023-02-18T02:44:10","guid":{"rendered":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/"},"modified":"2023-02-18T04:41:51","modified_gmt":"2023-02-18T08:41:51","slug":"script-coding-a-visual-ide-for-react-the-future-of-web-development","status":"publish","type":"post","link":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/","title":{"rendered":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development"},"content":{"rendered":"<div style=\"padding: 2%;\" align=\"center\"><iframe loading=\"lazy\" title=\"The Future of Web Development: Visualizing React\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/cKfevf-iIHA?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/div>\n<blockquote style=\"text-align: left; background-color: #E4E4E4; border: 3px dotted gray; padding:2%;\"><p>\n<a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/p>\n<h3>A Visual IDE for React?!? The Future of Web Development<\/h3>\n<p><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><\/a><\/p>\n<p>By <a href=\"https:\/\/www.youtube.com\/channel\/UCDCHcqyeQgJ-jVSd6VJkbCw\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><strong>codeSTACKr<\/strong><\/a><br \/>\n<strong>Published<\/strong>: Jan 02, 2023<\/p>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201c<\/span><\/em><br \/>\n<a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\"><img decoding=\"async\" src=\"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg\" class=\"alignright\" alt=\"codeSTACKr\" style=\"width: 200px; height: auto;\" align=\"right\"\/><\/a> Download Codux Free at  <a href=\"https:\/\/codux.hopp.to\/codeSTACKr\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/codux.hopp.to\/codeSTACKr<\/a><\/p>\n<p>Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas.<\/p>\n<p>You\u2019ll see and have access to the code right inside Codux, but it shouldn\u2019t replace your existing IDE. In fact, the goal of Codux is not to replace your existing IDE, but to turbo charge your React workflow by giving you the ability to visually edit as well. As you make changes in Codux you\u2019ll see the updates happen in real time in your existing IDE.<\/p>\n<p>Codux supports any React project built using TypeScript with styling in CSS, Sass, or CSS Modules, and has full Git integration.<\/p>\n<p>Another great feature is the ability to develop components in isolation. That\u2019s generally how we build in React. We build components. But we usually can\u2019t see each component rendered in isolation. With Codux, you can work on each component individually, see each component in various states, then bring them all together where needed.<\/p>\n<p>Because this is a graphical user interface, even someone with little to no React experience can easily update and edit components visually and be confident that the updates reflected in the code will be accurate.<\/p>\n<p>Just like in your browser\u2019s dev tools, you\u2019ll see all of the CSS styles for each element and you can edit them. This makes memorizing every CSS property name and value a thing of the past. Every property is visually available to edit. And these changes take place immediately in your code base.<\/p>\n<p>To get started, you can import almost any existing React project or create a new project from scratch.<\/p>\n<p>Become A VS Code SuperHero Today: <a href=\"https:\/\/vsCodeHero.com\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/vsCodeHero.com<\/a><\/p>\n<p>Join my Discord developer community: <a href=\"https:\/\/discord.gg\/A9CnsVzzkZ\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/discord.gg\/A9CnsVzzkZ<\/a><\/p>\n<hr \/>\n<ul><strong>Tools I use:<\/strong><\/p>\n<li>codeSTACKr VS Code Theme: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=codestackr.codestackr-theme\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/marketplace.visualstudio.com\/&#8230;<\/a><\/li>\n<li>STACKr Code Font (Exclusive to my VS Code Course &#8211; <a href=\"https:\/\/vsCodeHero.com\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/vsCodeHero.com<\/a>)<\/li>\n<li>SuperHero Extension Pack: <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=codeSTACKr.superhero-extensions\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/marketplace.visualstudio.com\/&#8230;<\/a><\/li>\n<\/ul>\n<hr \/>\n<p><strong>Timestamps<\/strong><\/p>\n<li>00:00 &#8211; Intro<\/li>\n<li>02:25 &#8211; Building a YouTube Clone from scratch using Codux<\/li>\n<li>02:42 &#8211; Create a new project<\/li>\n<li>05:51 &#8211; Building the header component<\/li>\n<li>07:23 &#8211; Building the side menu bar component<\/li>\n<li>08:19 &#8211; Building the filters bar component<\/li>\n<li>09:33 &#8211; Building the video card component<\/li>\n<li>10:42 &#8211; Defining TypeScript props for your video card component<\/li>\n<li>11:39 &#8211; Putting it all together in our App component<\/li>\n<li>13:20 &#8211; Run the application locally to test<\/li>\n<li>13:34 &#8211; Giving the YouTube clone a new name<\/li>\n<li>13:49 &#8211; Commit our changes and publish to GitHub<\/li>\n<hr \/>\n<ul><strong>Show support!<\/strong><\/p>\n<li>PayPal: <a href=\"https:\/\/paypal.me\/codeSTACKr\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/paypal.me\/codeSTACKr<\/a><\/li>\n<\/ul>\n<hr \/>\n<ul><strong>Watch Next:<\/strong><\/p>\n<li>Playlist: Web Development For Beginners &#8211; <a href=\"https:\/\/www.youtube.com\/watch?v=Ez4yHS2dsN8&amp;list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt&amp;index=2\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.youtube.com\/watch?v=Ez4yH&#8230;<\/a><\/li>\n<\/ul>\n<hr \/>\n<ul><strong>Connect With codeSTACKr:<\/strong><\/p>\n<li>Website: <a href=\"https:\/\/www.codestackr.com\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/www.codestackr.com<\/a><\/li>\n<li>Twitter: <a href=\"https:\/\/twitter.com\/codeSTACKr\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/twitter.com\/codeSTACKr<\/a><\/li>\n<li>Instagram: <a href=\"https:\/\/instagram.com\/codeSTACKr\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/instagram.com\/codeSTACKr<\/a><\/li>\n<li>Facebook: <a href=\"https:\/\/facebook.com\/codeSTACKr\" target=\"offsite\" rel=\"nofollow noopener noreferrer\">https:\/\/facebook.com\/codeSTACKr<\/a><\/li>\n<\/ul>\n<div style=\"text-align: center; font-weight: bold\">[<a href=\"https:\/\/www.youtube.com\/watch?v=cKfevf-iIHA\" target=\"offsite\" rel=\"nofollow noopener noreferrer\" title=\"Read More on YouTube\">READ MORE<\/a>]<\/div>\n<p><em style=\"font-family: 'Times New Roman',Times,serif; color: #666;\"><span style=\"font-size: 3.5em; font-weight: bold;\">\u201d<\/span><\/em><\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"<p>Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[152,109,380],"tags":[1750,191,2869,1723,2705,1813,190],"class_list":["post-37280","post","type-post","status-publish","format-standard","hentry","category-free-stuff","category-scripting-and-coding","category-video-tutorials","tag-codestackr","tag-coding","tag-codux","tag-github","tag-ide","tag-react","tag-scripting"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!<\/title>\n<meta name=\"description\" content=\"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!\" \/>\n<meta property=\"og:description\" content=\"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/\" \/>\n<meta property=\"og:site_name\" content=\"WHUZZUP!\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/\" \/>\n<meta property=\"article:author\" content=\"EricBrooksDotComWeb\" \/>\n<meta property=\"article:published_time\" content=\"2023-02-18T02:44:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-02-18T08:41:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg\" \/>\n<meta name=\"author\" content=\"Eric Brooks\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:site\" content=\"@EricBrooksCom\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Eric Brooks\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/\"},\"author\":{\"name\":\"Eric Brooks\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\"},\"headline\":\"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development\",\"datePublished\":\"2023-02-18T02:44:10+00:00\",\"dateModified\":\"2023-02-18T08:41:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/\"},\"wordCount\":500,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/cKfevf-iIHA\\\/hqdefault.jpg\",\"keywords\":[\"codeSTACKr\",\"coding\",\"Codux\",\"GitHub\",\"IDE\",\"React\",\"scripting\"],\"articleSection\":[\"FREE STUFF\",\"Scripting and Coding\",\"Video Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/\",\"name\":\"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/cKfevf-iIHA\\\/hqdefault.jpg\",\"datePublished\":\"2023-02-18T02:44:10+00:00\",\"dateModified\":\"2023-02-18T08:41:51+00:00\",\"description\":\"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#primaryimage\",\"url\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/cKfevf-iIHA\\\/hqdefault.jpg\",\"contentUrl\":\"https:\\\/\\\/i4.ytimg.com\\\/vi\\\/cKfevf-iIHA\\\/hqdefault.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/script-coding-a-visual-ide-for-react-the-future-of-web-development\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#website\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"name\":\"WHUZZUP!\",\"description\":\"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown\",\"publisher\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#organization\",\"name\":\"WHUZZUP!\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"contentUrl\":\"https:\\\/\\\/ericbrooks.com\\\/images\\\/posts\\\/cropped-favicon_64-1.png\",\"width\":512,\"height\":512,\"caption\":\"WHUZZUP!\"},\"image\":{\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/EricBrooksDotComWeb\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\",\"https:\\\/\\\/www.instagram.com\\\/ericbrooksdotcom\\\/\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/ericbrooksdotcom\",\"https:\\\/\\\/myspace.com\\\/ericbrooksdotcom\",\"https:\\\/\\\/www.pinterest.com\\\/ericbrookscom\\\/\",\"https:\\\/\\\/www.youtube.com\\\/user\\\/ericbrooksdotcom\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/#\\\/schema\\\/person\\\/3b162468e1f9814f6e9f61460db00a3a\",\"name\":\"Eric Brooks\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x\",\"caption\":\"Eric Brooks\"},\"description\":\"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.\",\"sameAs\":[\"https:\\\/\\\/ericbrooks.com\",\"EricBrooksDotComWeb\",\"ericbrooksdotcom\",\"ericbrookscom\\\/\",\"https:\\\/\\\/x.com\\\/EricBrooksCom\"],\"url\":\"https:\\\/\\\/ericbrooks.com\\\/whuzzup\\\/author\\\/site-admin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!","description":"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/","og_locale":"en_US","og_type":"article","og_title":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!","og_description":"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...","og_url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/","og_site_name":"WHUZZUP!","article_publisher":"https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","article_author":"EricBrooksDotComWeb","article_published_time":"2023-02-18T02:44:10+00:00","article_modified_time":"2023-02-18T08:41:51+00:00","og_image":[{"url":"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg","type":"","width":"","height":""}],"author":"Eric Brooks","twitter_card":"summary_large_image","twitter_creator":"@EricBrooksCom","twitter_site":"@EricBrooksCom","twitter_misc":{"Written by":"Eric Brooks","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#article","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/"},"author":{"name":"Eric Brooks","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a"},"headline":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development","datePublished":"2023-02-18T02:44:10+00:00","dateModified":"2023-02-18T08:41:51+00:00","mainEntityOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/"},"wordCount":500,"commentCount":0,"publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg","keywords":["codeSTACKr","coding","Codux","GitHub","IDE","React","scripting"],"articleSection":["FREE STUFF","Scripting and Coding","Video Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/","url":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/","name":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development - WHUZZUP!","isPartOf":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#website"},"primaryImageOfPage":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#primaryimage"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#primaryimage"},"thumbnailUrl":"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg","datePublished":"2023-02-18T02:44:10+00:00","dateModified":"2023-02-18T08:41:51+00:00","description":"Codux is a visual IDE, or graphical editor, that allows you to build and edit React components like you\u2019re drawing on a canvas. You\u2019ll see and have...","breadcrumb":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#primaryimage","url":"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg","contentUrl":"https:\/\/i4.ytimg.com\/vi\/cKfevf-iIHA\/hqdefault.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/ericbrooks.com\/whuzzup\/script-coding-a-visual-ide-for-react-the-future-of-web-development\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ericbrooks.com\/whuzzup\/"},{"@type":"ListItem","position":2,"name":"[#Script #Coding] A Visual IDE for React?!? The Future of Web Development"}]},{"@type":"WebSite","@id":"https:\/\/ericbrooks.com\/whuzzup\/#website","url":"https:\/\/ericbrooks.com\/whuzzup\/","name":"WHUZZUP!","description":"What&#039;s new at EricBrooks.Com plus news and gossip all over CyberTown","publisher":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ericbrooks.com\/whuzzup\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ericbrooks.com\/whuzzup\/#organization","name":"WHUZZUP!","url":"https:\/\/ericbrooks.com\/whuzzup\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/","url":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","contentUrl":"https:\/\/ericbrooks.com\/images\/posts\/cropped-favicon_64-1.png","width":512,"height":512,"caption":"WHUZZUP!"},"image":{"@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/EricBrooksDotComWeb\/","https:\/\/x.com\/EricBrooksCom","https:\/\/www.instagram.com\/ericbrooksdotcom\/","https:\/\/www.linkedin.com\/in\/ericbrooksdotcom","https:\/\/myspace.com\/ericbrooksdotcom","https:\/\/www.pinterest.com\/ericbrookscom\/","https:\/\/www.youtube.com\/user\/ericbrooksdotcom"]},{"@type":"Person","@id":"https:\/\/ericbrooks.com\/whuzzup\/#\/schema\/person\/3b162468e1f9814f6e9f61460db00a3a","name":"Eric Brooks","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","url":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/62114f8baf9a3737e7686125b69907010ad6aff5dfc07c12707e8a18bb49bc34?s=96&d=blank&r=x","caption":"Eric Brooks"},"description":"Web &amp; Graphic Designer, Blogger, Musician, Evil Clown. I also code websites and promote people for a living. Still kind of a jerk, though. Approach with food.","sameAs":["https:\/\/ericbrooks.com","EricBrooksDotComWeb","ericbrooksdotcom","ericbrookscom\/","https:\/\/x.com\/EricBrooksCom"],"url":"https:\/\/ericbrooks.com\/whuzzup\/author\/site-admin\/"}]}},"_links":{"self":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37280","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/comments?post=37280"}],"version-history":[{"count":3,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37280\/revisions"}],"predecessor-version":[{"id":37286,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/posts\/37280\/revisions\/37286"}],"wp:attachment":[{"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/media?parent=37280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/categories?post=37280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ericbrooks.com\/whuzzup\/wp-json\/wp\/v2\/tags?post=37280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}