The Future of Web Development: Visualizing React

[@codeSTACKr]

👉 Download Codux Free at codux.hopp.to/codeSTACKr

[@arnaudlelong2342]

Thanks bro

[@spicer41282]

Amazing! Can't wait to follow your Steps! Curious, what theme are you using for your VSCode?

[@codeSTACKr]

@@spicer41282 thanks! It's mine 😁 codeSTACKr theme

[@rajaboy2293]

Hello Sir, thank you for sharing this. does it have support to integrate NextJS?

[@chang112x]

Finally after 20 years we can go back to Visual Basic

[@cyrusguest4975]

its all a cycle lmao

[@alextasarov1341]

What was Visual Basic?

[@NicolasSilvaVasault]

so no one mentioned adobe dreamweaver?

[@thefoxguy]

For real! Woo

[@huehuehuehue7465]

Well as a backend developer who struggles with the bare minimun of css this is a lifesaver

[@eddyeffy]

We always knew something like this was going to come and soon AI would be integrated, imagine using a text prompt to generate web pages with all the code. I think we're moving into a time where people with ideas would thrive

[@hombacom]

I think the hardest part is not to generate but maintain and refactor code. Web technologies are updated often and AI is better to see patterns over time than new trends.

[@igordasunddas3377]

@@hombacom definitely, and this applies to all languages and frameworks. Though: if you could have the AI refactor code and add features....

[@shahriazkobir5397]

Yeah, chat gpt is already outdated, good luck with that.

[@waltert9]

@@shahriazkobir5397 why is it outdated lol?

[@shahriazkobir5397]

@@waltert9 it gives results based on 2021 nov internet or other sources, it's don't know anything after that time.

[@adamchubbuck4385]

This is incredible. I’d love to see support for Angular introduced as well.

[@abc_cba]

Looks like a love child of Figma and React !

[@codeSTACKr]

Yes!

[@arhabersham]

100%

[@FilipCordas]

Looks like something called blend for Visual Studio we had 15 years ago for Silverlight. But honestly Blend had much more functionality. I miss being productive when developing apps.

[@AndrewTSq]

I remember back in the 90ies when Netscape gave us this visual homepage creator with their internet browser. reminds me of that.

[@charlesm.2604]

@@AndrewTSq "What you see is what you get". This video is sponsored so he acts like it's ground-breaking when the truth is that these tools are a reminiscence of an old time and they made GUI development counter-intuitive and frustating. This one in particular doesn't even address some of struggles, as you need to jump back and forth between code and visual editor to fix what was generated and doesn't even have a feature to let you mock business logic (like how he did the loop for the video previews). In actual use it's going to be painfully harder to introduce in your workflow. Storybook is the answer.

[@CodingPhase]

Codestackr back at again!!

[@codeSTACKr]

🙌🙌🙌

[@ahenkai1]

OMG OMG OMG TYSM YOU DONT KNOW HOW MUCH THIS MEANS TO ME, THIS. VIDEO DESERVES 1.5m or 1.6 m or maybe more tysm ❤

[@nemanjakecman9970]

It looks nice, but dont forget we had this in Dreamviewer by Adobe a long time ago (not for React tho) and people were using this and moved back to text based IDE-s :)

[@DannyCrazyPanda]

Indeed, I member Dreamviewer and it was not so good, messy code, not SEO friendly, had performance issues, etc

[@progresque9738]

Dreamweaver?

[@lahcenebelbachir7929]

@@progresque9738 Yeah, I'm sure they mean Adobe Dreamweaver.

[@Neo2004hacker]

@@lahcenebelbachir7929 I am sure Macromedia Dreamweaver

[@lahcenebelbachir7929]

@@Neo2004hacker Yeah, it's not like Adobe aquired Macromedia since almost 20 years or anything, right? lol

[@JamesQQuick]

This is REALLY interesting! Super cool stuff. Thanks Jesse!

[@codeSTACKr]

Thanks James!

[@misdi_official]

Thanks for your video. I interesting with your cursor style in VS code. may I know what extension do you use?

[@codeSTACKr]

Thanks, it's just the cursor settings in vs code.

[@und0]

This is cute and probably useful for the visual stuff but I can see this getting really frustrating in large and complex apps. I can see how this can be used along with a normal editor though. Does it support vite? No way in hell I'm using CRA lol. Also, does it support Next/Remi or is it just client side?

[@iakofe7349]

I think the best way to use it is to make use of it for components for already created apps… if you’re already building your project, you can simply use this to create specific components and import the code back to your regular ide

[@viallymboma9874]

Really awesome tool. Tho not everyone would love to work it out with Typescript...can't we select JavaScript instead types script?

[@NicolasVycasNery]

This remember those old java swing or windows form window editors, looks really cool, looks really cool, will share this with my coworkers

[@Salah-YT]

thx a lot bro ill try it in the future

[@MyQiman]

It's basically Android Studio but for modern web-dev, not too useless for production, but I can see this being very useful for Ui engineers to quickly prototype.

[@Peywan]

I would LOOOOVEEEE to see you go through your desktop setup. man that looks so good gives me goosebumps :)

[@starlord0208]

What is this color themes from vs code?

[@Johnny0n]

is there any alternative to Vue?

[@joni062443]

Storybook is my recommendation for this use case. Easy to share a rapidly iterate over isolated visual components alongside a designer. Easy to use and an out of the box pick and go solution for both experienced coders and newbie designer/scripters. Handles design , deployment and testing between builds. As a full stack engineer on SaaS and mobile apps using React/React Native, I use this internally for tweaking white label UI to fit the clients design/style on quick turn around on my companies platform. Found it to be quite helpful.

[@VKD007]

i can code this thing faster ( best coding practices not including tests ) than using the GUI tool plus its fun. I wish there was a Testing library that writes tests automatically

[@codeSTACKr]

I agree, there are some things you could code faster. And that's ok. Code the things you want to code. You can switch back and forth between editor and Codux. I think this will actually speed up my overall workflow. You really have to give it a try!

[@hamzabadii3575]

@@codeSTACKr how I connect my vscode with this app codux you don't show good on video

[@codeSTACKr]

@@hamzabadii3575 there's no need to connect anything. Just open the project folder that was created by Codux in VS Code.

[@bradleydesignsohio]

Man you made that look so easy. I feel like its not really that simple. Beginner here and I know coding all that would be a bitch but you really showed your knowledge of how the application went together. I will definitely be learning more about react and trying this!

[@codeSTACKr]

You got this!

[@nikhilranka9660]

Thanks Jesse for introducing this. Should definitely help in building the mundane parts of an app faster. This is subjective but how would you rate the quality of this code generated in comparison to similar code written by a senior developer?

[@codeSTACKr]

I think the code quality generated out of the box is excellent. You can customize to a degree to fit your own style to. (Like preference where to store components, etc) The fact that it requires typescript keeps simple mistakes from happening.

[@nikhilranka9660]

@@codeSTACKr That's good to know. Thanks for your response🙏

[@kevincameron174]

I am not sure how it is supposed to go, but I downloaded this and it asks me to give my google password if I want to sign in with my google account. I am already logged into google in my browser. Why is the app asking for my password in one of its own windows? Shouldn't that authentication be done between google and me, and not have the app in the middle? Usually if I try to log in to something with my google account, I click the "use google" link, and then I get a notice directly from Google that the app is trying to use my account and i can accept it. I have never had a third party ask me to input my google password. What am I missing here?

[@lookupverazhou8599]

Why is there not a mobile IDE yet?

[@awakeupcall5336]

Would nice if it could be available for React-Native

[@jakub2631]

I'm not familiar with React, is ProdcutCard (visible @ 0:14 and 0:15) a typo?

[@friendly4466]

loool that youtube homepage looks like mine, iactually posed and hesitated, hahaha, fullscreen got me tripping

[@WCKDStudio]

This is Nice, I'll try it out. BTW what's the name of the font you are using on your VSCode

[@codeSTACKr]

Thanks! It's my custom font based on Fira Code.

[@NphiniT]

Does it work with NextJS?? I will fully move to this if it does

[@B1Happy]

Holy 💩! This is a game changer. I’ve been wishing for something like this! Thanks man

[@MrBuzzo123]

it doesn't render icon from a package, for example fluent ui icons rendering only in browser, also you have create the side bar adding every button , if i want to this automatically with a list of items as a props it wont give me the opportunity to change any label

[@MrBuzzo123]

i think the problem with label is the use of the hook useMemo, it doesn't give you the possibility to edit

[@joshuaberrios]

Wow this is pretty impressive. Looking forward to trying it out myself. Great video. Loved every minute of it.

[@codeSTACKr]

Thanks!

[@Belhun]

is there something like this but not for just normal HTML and CSS

[@NicolasSilvaVasault]

looks like the ui from figma, this is incredible, i haven't use a web dev ide in like over 12 years

[@elson_correia]

Does it handle third-party components?

[@codeSTACKr]

Yes, it can

[@oneito947]

Can it import existing react code then have functions to add elements then export back?

[@codeSTACKr]

Yes! As long as the project uses typescript.

[@rabiihlioui9315]

Hiiii, Good work, but could you please give us the link of this project's git repo please, for example i do not know the header's svg code that you copied from youtube. And one more question, is there any other visual IDE for angular ? thanks for the help.

[@codeSTACKr]

Thanks, here's the repo: github.com/codeSTACKr/youtube-clone And I don't know of any visual IDE's for angular, sorry.

[@rabiihlioui9315]

​@@codeSTACKr Bless u, keep up the good work

[@leogarza5022]

A huge Game Changer!

[@JoanxD]

Then, does it work with Next JS too ?

[@werthersoriginal]

Is this like Bootstrap Studio?

[@goldenknowledge5914]

Thank you. This came at the right time

[@abdshomad]

This is cool. Next: Would like to know how to integrate it with Backend/API 👍

[@dobingify3130]

This is sick!!! 😵

[@daniellogvin6609]

That's awesome, but my question is... does it support responsive layouts? I've always encountered issues with GUI's for stuff like this when it comes to responsiveness. If this seriously solves that issue, then I'm pretty much positive that this will dramatically decrease development time for web apps. I also hope they release something for react native, and would be dope, too, for them to partner with expo. This is a game changer if those issues are tackled and also implements this mobile development aspect. Looking forward to it, and hopefully it delivers clean code. Will test it soon, will update with some feedback for others to check out before trying it out (for those who hesitate to try tools like these).

[@codeSTACKr]

It does support responsive layouts! You can even set up separate boards for desktop vs tablet vs mobile.. etc

[@DR-kw4ff]

This is amazing

[@jemandev]

First thing that I thought after seeing it was the old IDE I used a long time ago in school where you can drag and drop components. I forgot what its called.

[@charlesm.2604]

Visual Studio and WinForms ? Netscape Composer ? Or any other WYSIWYG editor on the surface on Earth that miserably failed.

[@okikekizito746]

This is insanely good.

[@-0-__-0-]

It's like remembering those days coding with JavaFx Scene Builder.

[@keviincosmos]

Thanks for sharing! I'm about to build some Gutenberg Blocks and finding some stuff difficult, so maybe this will help me 👏

[@codeSTACKr]

No problem 👍

[@st33ldi9ital]

This is great! It's cross platform as well! Nice!

[@BigKing17]

Game Changer

[@Neo2004hacker]

Nice but I prefer TeleportHQ IDE because is online, no need to install local and I can switch between designer / developer mode, and can publish app on same place.

[@badcatdesign]

Would not have imagined this from Wix. Or maybe I should have...

[@codeSTACKr]

It's really cool!

[@toluwasethomas600]

This is just like scenebuilder for building java-fx desktop components.

[@monkaSisLife]

What I don't understand is, why only for React? If it's working with React, it should work with Vanilla Html&Css too.

[@eppilihp]

It parses the JSX as an AST to then edit the code. HTML is not JSX so it is not supported.

[@bilalarain4632]

Thank you sir this video made my day, i liked it...

[@MGArtDZN]

Isn't it similar to Bootstrap Studio, tho?

[@tannedstone3736]

I will not learn so much about coding if I use this GUI instead. Building the styles myself with hard coding is always more informative and drag and drop elements like using this GUI tool.

[@josevaldojunior586]

always good to put in mind these are not meant to teach coding but to offer options to repetitive tasks, i can see it being very useful on development of prototype functional builds or testing some things out. You can code on it, if you need or want to

[@joseph_oluwayomi]

This is not for learning I believe, I count it as a productivity tool.

[@LRSKWTKWSK]

I strongly disagree. I started making products with Bootstrap some years ago using Pinegrow as primarily Editor and got comfortable in no time with the whole framework. For me it was a great benefit to focus on bulidng and monitoring the code alongside. Great learning experience and much better than any tutorial or documentation which I only needed in very special cases.

[@cherdak_turista]

Looks like Pinegrow for React. Would be cool to have imports of react-components from Spline-Design.

[@PolycarpOkock]

Amazing, convincing my team to use this is another headache with lots of meetings. Personally I'll switch to this for UI

[@thelostman5625]

Is it possible to use this IDE for react-native?

[@codeSTACKr]

Not currently

[@kohelet910]

Codux is interesting. I really wanting the feature for preview components individually. I am waiting for AI integration and voice control, so i can write CSS and JS with voice and take control from the IDE when i need. 😅

[@yahyaelyamine6323]

Can u use it with next.js?

[@codeSTACKr]

That was my first question too 😅 Not yet, but they're working on it.

[@yahyaelyamine6323]

@@codeSTACKr That's great, thank you for the answer Sir.

[@beyourahi]

Can it be used with TailwindCSS?

[@codeSTACKr]

Not yet, but they are working to add support

[@Almighty_Flat_Earth]

We need visual IDE for svelte and angular.

[@codeSTACKr]

😍

[@dareljohnson5770]

Wholly Shite!! I love this!

[@simonkraemer3725]

I‘ll probably stay at code based editing. Visual IDEs might become the standard but it’s predicted for decades, and many IDEs with big companies behind came and went, because they all broke when scaling, making more work than with the old way of doing it. It would be nice if it worked this time, because Designer and Programmers could tightly work together, but until then Designs have to be replicated manually in code

[@gregou9885]

It's already challenging to get the output of designers and implement them, I am not sure developers will want to give them access to the code editor. I don't see this technology being adopted but hey, hope I get proved wrong

[@ggipod]

This is beautiful!

[@codeSTACKr]

Thanks! It is amazing :D

[@DM_2025]

Great Job

[@satriani9506]

Sorry I'm not familiar with React so forgive my silly question. Why is this the "future"? I mean how it's different from Wordpress with a builder like Oxygen, Bricks, Gutenberg or whatever along with a CSS framework like Automatic CSS and any other function plugin?

[@TryCatchDev]

So cool🤩

[@johncardona1910]

Cool, this looks like power apps with react integration

[@cherriepie]

This is NUTTTTTTSSSSSSSSSS 😯

[@AaronHulse1956]

Jesse, I appreciate your experience and skills with "Codux" but did you have to much coffee? I had a hard time keeping up with you.

[@fyardlest1]

Always on top wit good information and advice. Keep up the good work and thank you. By the way I really like your working environment setup and would like have a similar one, may you share the list of those accessories/items with us, please? Thank you again.

[@talweltsch8929]

Great video!

[@codeSTACKr]

Thanks!

[@nathanimanikyalo27]

this is mind blowing wow😱

[@ArchPolandPL]

Great for static sites with no interaction, but as soon as you need to do some logic or api calls this is totally useless and produces really bad and hard to work with code, not impressed atm but lets se how it goes.

[@0xk4b1r]

looks cool

[@Ctrl_Alt_Elite]

Anyone else find the progression of software atm kinda sad? I enjoy the process of coding, and once it all gets abstracted away in the workplace by AI or visual aids, I'll be kinda sad - like missing an old friend lol. I do get it though, it's also great for designer/developer experience & efficiency.

[@SergeyHramenko]

want something like this for vue

[@codeSTACKr]

That would be cool!

[@gryg666]

This might be a way to finally like react... :)

[@wandevv]

I've never seen the theme he's using on VS code does anyone know the name?🍷🗿

[@codeSTACKr]

It's mine 😁 codeSTACKr theme

[@wandevv]

@@codeSTACKr Amazing theme, its comfortable for eyes when reading the code👏🏼🗿good job!

[@stevemcardle2013]

Doesn't support tailwindcss at the moment. We use tailwind all the so I like the idea and will probably use once tailwind is supported

[@codeSTACKr]

Tailwind support is on the way! :D

[@dawnscript]

Wow really interesting

[@tomascaetano4270]

I think I found what I have been looking for 😍😍

[@awakeupcall5336]

Bye bye storybook?

[@khalidsaifullahfuad]

Isn't there already a tool like this called React Bricks?

[@codeSTACKr]

It's not really the same. React Bricks a visual CMS for Next.js

[@khalidsaifullahfuad]

@@codeSTACKr Okay, thank you

[@SamSepiol127]

Nice tool to play with or maybe after a long session of code-only just to troubleshoot visually and chill 😅

[@aixizu]

ngl love to see bashbunni on the youtube page

[@WarframeCrunch]

If it will cost you anything to make anything there, then it's not worth learning it. This is just a standard marketing plan. You announe a BETA of a product to test for free, so people can learn and get used to it, then on full release tell them to pay to use it. Some people will want to pay because they learned using it and it looks fast for them to make the site this way. But I don't learn coding to pay anything. I would understand to pay for Unreal Engine 5, since you pay only if you make a decent amount of money on the games, thanks to their tools.

[@thegoldenatlas753]

This is literally what I've been asking for. Game devs figured this shit out decades ago why the fuck have web devs been stuck in the dark ages???

[@Thelukkest]

If Figma and Chrome DevTools had a baby...

[@codeSTACKr]

Figma/DevTools/VSCode 😍

[@chaomans]

Really amazing, have to try it now 🤩

[@codeSTACKr]

You should!

[@tomraviv6165]

Hey @chaomans, dev on Codux here, really happy to hear you like what you see - I'd be happy to answer any questions you (or anyone else) has, and to hear your feedback after you've taken Codux for a spin.

[@Rk_Shawon]

That's why I always tell people to become a programmer not a coder

[@hffuhjhcfg9653]

Should i learn react after this😟

[@davien001]

Anything that saves time.

[@praisesmusatula1559]

Very impressive tool to have! I Just fear our software dev jobs are slowly going away!!! What do you think Jesse?

[@martinkulik9466]

No. I don't code. I don't know what to input into AI. you still need to be programmer to do the tailored job and ask the right prompts... Ai can produce generic simple things that have no chance with complex projects

[@codeSTACKr]

Not at all! This is a tool FOR developers. I think more tools that help us with the mundane stuff is better. It gives us more time to tackle the hard jobs. Plus, a developer is needed to create/maintain these tools too 😄

[@redis615]

@@codeSTACKr Yes, but does that mean that way less programmers will be needed in companies the first place. Because now smaller teams can do stuff?

[@codeSTACKr]

@@redis615 not at all. More devs are still needed.

[@akotechonline]

Amazing