You must try this Visual Editor for building React JS Apps

okay this is definitely something you should try did you know you can build react components visually now with a brand new integrated development environment let me tell you how I discovered this I've been working on a startup project for the last month which is to interact with YouTube videos using chat GPT in my last video I actually built out the MVP but it didn't look that great visually and so now I want to build out a very nice looking visual interface I already have an idea of what this should look like but should I open up figma to do it or should I open up s code or should I check out this new thing I've heard called Cooks apparently it can let you build react components with live previews as a programmer who loves react I never thought that I'd be building components visually it's basically like I have figma I can inspect styling I can change view ports and I can do so all in just a few clicks but for Designing react components what exactly is this magical tool and how does it work let me give you some background I've always built websites including all their sections and components as one large item basically the entire page all at once rather than each individual item and then putting it together essentially building it top down rather than bottom up and this meant that I always refreshed the page a lot because when you spend 10 to 20 minutes writing code you need to actually check whether what you've written actually works so many years ago when I was building websites in PHP I had a Chrome extension that would automatically refreshed the page for me this made it easier to track how my work was going but I'd still need to resize the window and test different viewports in order to see if different parts of the website actually worked I'd even have to open up different browsers like Firefox Chrome and even Internet Explorer many years later when the team from Facebook released react with hot reloading as part of create react app I was impressed however this still meant that I had Visual Studio code open on one side of my monitor and Chrome on the other and for a long time this is how I build websites the only issue is that react is more of a bottom down framework you build small components on top of others and eventually you have a large app but now the team from kodok has introduced a brand new product which makes the whole process completely different it allows you to build components first meaning I could actually build sites bottom up rather than top down then on YouTube I saw a fireship make a video about it and then code stacker and then deved and then James qqu and then I thought maybe I should try it out I headed to cod.com and while it's still in beta I found out this application is completely free so why not try it out and from what I can see it's support react typescript CSS SAS CSS modules Tailwind CSS it has a visual IDE it has a code editor it has a styling panel it lets you import third party libraries and it does pretty much everything besides make you a coffee I downloaded it and unlike sketch.car or try one of the pre-made templates the way I learn is often by doing with without reading any documentation or seeing any demos I decided to create a brand new project I called the project YouTube transcripts react kodok would automatically use a Vite to install this alongside with scss and CSS modules since it creates a real project folder along with a packages. Json it also installs the configuration for that project and immediately I get to see my very first board with a preview of the project itself when I double click the board I get into the editor it's like a Chrome browser but I get to resize the window and frame when I do I I get to see how different things respond in different viewports then I can doubleclick the element at the top here for the app and I can see exactly how this component is put together and it's nesting that's pretty nifty and if I select here at the bottom I get to actually see the raw code and how this component is programmed and on the right hand side I have this inspector that allows me to check out the properties and styling and much more for each one of the components that's a pretty good start on top of that I can still customize this editor and this viewport allowing me to take away the grid lines as well as the rulers preview the project as well as change at the actual size of the window and on the top left I have a quick add option that allows me to add different HTML elements such as divs spans images videos forms or even components from other parts of the project I could also add external libraries too such as semantic UI now for the part that really blew my mind which is actually creating this entire component in react visually without writing any lines of code I headed back to the homepage and selected to create a new component I want to create a component which is basically a preview of a video for my project I also want one for a chat log as well as a button and a message log but the video preview seems easy enough so I'm going to start there this empty page isn't very interesting let me add an element I'll add an image to start off with this image comes with an example but I'm going to change this by changing the source address I'll use the panel here on the right which is for properties and I'll change the address to this thumbnail that I saw earlier that I liked if I take a look at the code below then I can actually see that the source address has been updated in terms of the syntax and I also want to style this image because right now it's taking up the entire screen so what I'm going to do is on the right hand side I'm going to select Styles and add a class for this class I'm just going to call it thumbnail this will add a CSS class which now allows for customizing styling which is now available to me on the right hand side panel there are quite a few different options here options for layout position spacing first I'm going to change the default width to be 100% now if I resize the frame the image resizes alongside it I can search up ACS property in this case I want to change the Border radius I'm going to change it to have 20 pixels around the corners and now this looks much more like a thumbnail from YouTube I still need to add in a title as well as the author and their profile pick first I'll add in a div block this can be the title next I'll add in one more div block I'll also add an image and this will be the profile for the user I'll set the class name for this to Avatar I'll put the width and height as 64 pixels with a border radius of 30 pixels for the parent div I'm going to create a class called author holder and here for this class class I'm going to select the display type to be Flex also select align items to Center though it looks well aligned in the center additionally it needs a little bit of a padding or margin for the image as well as the text so here on the Avatar I'll select the margin to be on the right the title for the video right now is also too small so I'm going to create a style here called a title and what I'm going to do is create a font size which is much larger so that it stands out more I'm also going to do the same for the orthotex creating a class for it and setting the font size to be a little bit smaller at 0.9 RM and now this video component is now done I can resize the frame to see how it would look in different viewports and make minor adjustments so it works in all of them another thing that I found useful is that I can still code while using kodok which means that I can open up visual studio code on the left hand side and kodok on the right hand side I'm going to open up the file of the component I'm currently working on first I'm going to add some code here to add the views as well as the release date of the video I can add some CSS easily by by adding in a class name and then I can jump into the scss file add the same class name and add some styling to make the font size a little bit smaller as well as adding in some opacity I want to add in some props that I can pass for the author name as well as the title for the video so what I'm going to do is turn these into Expressions I'm going to call this author title as well as title I'll pass these into typescript so that we're aware that these are strings and then I'll add in a default state for each one of these so that if there's no past props then they'll default just to the Codex Channel you can see that the user interface automatically updates as soon as I add these in and now let me see if I can customize them I'm going to go into the parent board here and pass them in as props I can now have the author as Adrian twarog and the title as a VR web design is pretty cool I could do the same now for the thumbnail URL as well as the author profile pick I want to create a dashboard now I'm going to head back to the homepage and create a new component this component I'm just going to call dashboard for this component I'm going going to start off adding the existing component I made earlier so here I'll add from my components the video board component what's great is that I can now customize this component within the structure of this new dashboard for the dashboard I'll change the width to be a little bit smaller at 480 pixels so that I can see my video in there but now I want to add another video in I'm going to select from components to add one more component of the video and you can see them back to back here the only issue is that there's no gap between them and there's size is a little bit small I'll add a gap here so that you can see the space between them at around 20 pixels and the other thing I'll do is change the root element to now be a little bit larger instead of 480 pixels I'll change the width to 640 this is looking much better let me add in a few more of the video components because a normal YouTube dashboard has about four of them I'll increase the width of the page to 128 pixels this time and now I can use some of the power of kodok as well as react together such as customizing props and passing them through the higher component I'll give each one of these videos their own avatar as well as thumbnail and video title what's interesting now is I can double click on one of these components and change the structure for example I could move this div above the current author and the updated design will actually apply on all the other components in the dashboard and this is exactly how you would expect react to work except now I don't have to write the code for this I can just customize all of this visually I'd like to thank the team from codex for sponsoring today's video codu was really cool to check out and I hope you guys found it quite interesting as well

Channel: Adrian Twarog

Views: 181,981

Keywords: codux, react, react js, reactjs, visual ide, programming, coding, css, saas, javascript, js, vscode, react app, vite

Id: Rx02_nUBte8

Length: 9min 33sec (573 seconds)

Published: Fri Nov 24 2023