You must try this Visual Editor for building React JS Apps

Подписаться 397 тыс.

Просмотров 189 тыс.

50% 1

Codux is a Visual IDE for React, and a revolutionary one at that! It can render any react project quickly and in real-time. In this video I’m going to take a look and what makes it so special, including how it includes built-in CSS, SASS and Tailwind styling options. There are now components and boards that let you use and reuse component templates you’ve created, and it makes the process for both developers and designers much easier when building sites.
Download Codux for free: codux.hopp.to/adrian
Thanks to the team from Codux for sponsoring this video, they make it and others like it happen on this channel!
Want to learn more? ⭐ Check out my courses! ⭐
📘 Teach Me Design - Course: www.enhanceui.com/
📚 OpenAI + GPT - Course & Templates: enhanceui.gumroad.com/
Software & Discounts:
💻 Screen Recorder: screenstudio.lemonsqueezy.com?aff=po745
✖ Editor X: www.editorx.com/adrian-twarog
🚾 Webflow: webflow.grsm.io/adrian
🌿 Envato: 1.envato.market/yRZjz2
🌿 Envato Elements: 1.envato.market/LP0OJZ
🔴 Elementor: elementor.com/adrian/?ref=23140
Computer Gear:
⬛ Monitor: amzn.to/3f9DOQI
⌨ Keyboard: amzn.to/3eA5UFD
🐁 Mouse: amzn.to/3xVJO8l
🎤 Mic: amzn.to/3hgCfms
📱 Tablet: amzn.to/3ewt7sa
💡 Lighting: amzn.to/3vOZeZY
💡 Key Lighting: amzn.to/3f6qP2f
Camera Equipment:
📷 Camera: amzn.to/3uCv4J9
📸 Primary Lens: amzn.to/3vT6wMm
📸 Secondary Lens: amzn.to/3tyqWIX
🎥 Secondary Camera: amzn.to/3o2zCGi
🎙 Camera Mic: amzn.to/33tCz9l
🎞 USB to HDMI: amzn.to/33yW9RE
Title Ideas!
- The Future of Developing React JS will be with this Visual IDE
- Developing React with Visual IDE is now possible
- React JS can be Coded Visually
- Visually Create React JS Apps with this New IDE
- This Insane React JS IDE Lets You Design Apps Visually
- How I can now create react apps visual with this IDE called Codux
- You must try this Visual Editor for building React JS Apps in an IDE
1. "Visualize React: Revolutionizing App Development with Codux!"
2. "No More Lines? Design React JS Visually with Codux IDE!"
3. "Revolution in React Development: Dive into Visual IDE Codux!"
4. "Craft React JS Like Never Before: Go Visual with Codux!"
5. "Redefining React App Creation: The Power of Codux Visual IDE!"
6. "A Glimpse into the Future: Visual React JS Development with Codux!"
7. "Change the Way You See React: Introducing Codux Visual IDE!"
8. "From Imagination to Code: Visualize React Projects with Codux!"
9. "Bringing Ideas to Life: React JS in the Age of Visual Codux IDE!"
10. "Codux Unveiled: A New Dawn in Visual React App Development!"

Наука

Опубликовано:

22 ноя 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 157

@toddribnek6660 6 месяцев назад

1) it's free during beta which means pricing plans are sure to follow. 2) it's owned by Wix, which means that you will probably have to get on their platform to keep using it and any components you make could be used by them in the future.

@arogueotaku 6 месяцев назад

I think there is a way to add disclaimer to RU-vid videos specifying that the video is sponsored. Also please mention that fact at the start of the video instead of the end. Helps a lot if you are more transparent with your audience.

@olegtz 6 месяцев назад

Totally agree.

@hurgpt 7 месяцев назад

I think the place where it will really thrive at, is helping budding front-end developers, understand CSS better. I personally always get confused with when to use align, justify, items and the various other CSS components. It also gives you an idea of how you can structure code in react.

@vitalysuper3193 7 месяцев назад

It still doesn’t have any useful css additions so you can better understand how width works in flexbox or overflow (devtools sucks at this point). If that project just had a import from figma button i would be lost!

@jwoods9659 7 месяцев назад

Dude React devs are pushing themselves out into unemployment

@salemkittenkat 6 месяцев назад

Yes! SAME! It was always confusing for me. This would help new devs understand these concepts way better.

@owenwexler7214 6 месяцев назад

Somebody finally made Visual Basic for React!

@furycorp 7 месяцев назад

Doesn't seem any faster than a dev who knows what they're doing with a modern IDE, GPT auto-suggest (e.g. copilot), and dual monitors. I don't see how a big form of available props in the sidebar defeats just typing them with intellisense + suggest. If only the visual drag and drop mattered, did you know that Powerpoint can export to web...?

@codybishop7526 7 месяцев назад

For those of us who have difficulties grasping basic react concepts, being a newbie, this really helped me understand the idea of "components" and props. Building blocks that can have data change and vary

@h4ves0me40 7 месяцев назад

Currently learning react but that was on my tongue to say. I'm getting lost clicking 10 buttons to actually make 1 on the page.

@MrKar18 7 месяцев назад

@@codybishop7526You will not learn javascript or react this way. As a programmer you learn to code and not to configure. When yiu use visual editor, you are configuring. New developers shouldn't rely on this the first place.

@cuongay9005 7 месяцев назад

@@codybishop7526no, it's not, learning react is about to writing codes and see how code works, effects the component not creating once by clicking, don't know how long have you tried codux but have you ever had "Thinking in react" mindset since then?

@cuongay9005 7 месяцев назад

@@codybishop7526component is a react function, how do you suppose to understand react by clicking when the way to understand it is writing ?

@algor1thmprogrammer161 7 месяцев назад

Idk for me it's easier writing code rather then trying to find some button in UI. Seems like another tool for creating landings.

@najmulhc 7 месяцев назад

Though it seems interesting, you should add the data fetching and form control using codux. as these are the main use cases of react. reusability of components are okay but why you should consider codux when you need to write logics by yourself

@AdrianTwarog 7 месяцев назад

Good idea actually!

@ofjdaz 7 месяцев назад

I was very excited to see something powerful and I was dissappointed. I guess this doesn't replace the knowledge a developer needs to have, and it sits between VSCode and me as a developer. I liked it when you created several videos by specifying specific props, however that's no different than generating an array of objects with chatgpt and putting it inside a constants file. I think if AI is used more in here then I might feel it's a better tool. Imagine you created the video component, and you hit an AI magic button to create 3 ones with data for you based on the first data you just added. I would love to see the day when a tool like this totally abstracts the logic behind and I don't even have to know if the technology behind is changing (meaning, the tool could use next.js, vue, react) and I wouldn't care because all I'm doing is creating my projects with components. Oh, btw, when that day comes, I think it will be easier for anyone to become a "developer". Thanks for showing this tool buddy :)

@user-tu3ql1yt7p 6 месяцев назад

yeah, it feels figma like to me. Would really like to see the code it generated though. If it's just a component written 4 times, it would be even more disappointing. Also this seems really good for small codebase. For a large enough codebase, things would get really complicated really fast with state management and all stuff.

@codegenesis2130 7 месяцев назад

What else will it contribute to as we can write code and see it's live deployment side by side so with our normal browser and VS Code??

@subramanianchenniappan4059 6 месяцев назад

I am an experienced java developer and tech lead . I didn't know the tool you mentioned . Thanks

@armankarambakhsh4456 7 месяцев назад

Will I be able to run Fixie (AI. JSX) which is an open source model for react which runs on your LLM instead of DOM with Codux?

@francescociulla 7 месяцев назад

these editign skills are next level!

@AdrianTwarog 7 месяцев назад

Thanks Francesco!

@francescociulla 6 месяцев назад

and my typo skills are a unmatched@@AdrianTwarog

@alexsulaymoon8570 3 месяца назад

@@francescociulla 💔

@francescociulla 3 месяца назад

@@alexsulaymoon8570 ?

@vladNMP 7 месяцев назад

not posting so often mate! really enjoy your content

@fullstack-jack 7 месяцев назад

From what I understand, when creating a responsive Codux component, you are relying on the size of the component container itself as opposed to the viewport?

@altgr391 6 месяцев назад

I think the nicest thing about this app is that I could more easily verify my code by inspecting each compoent or checking responsive design, rather than going into chrome and do it myself

@pradeepthite2894 6 месяцев назад

What is problem in that ?

@pradeepthite2894 6 месяцев назад

You can see network console etc….

@Geomaverick124 7 месяцев назад

I would love to see a full webapp created with Codux

@MrAndi1281 7 месяцев назад

buildship plus flutterflow

@AdrianTwarog 7 месяцев назад

Yeah Im thinking of importing an existing project into it!

@somerandomchannel382 7 месяцев назад

this isnt code, this is static paper :D

@jaytrivedi7489 7 месяцев назад

Does it supports States, loops, hooks, event handlers?

@bosmertheincredible 6 месяцев назад

Reminds me time when Visual Borland C++ appear first time... Good job, I rly hope for improvements in Web development.

@mootal2812 7 месяцев назад

Can use this Codux IDE for React Native too?

@avrahampackouz3974 7 месяцев назад

can it accept a figma file and out a component with classes?

@asadkhantahir2737 6 месяцев назад

Hi there, I have a question can you make a tutorial on how to create a website or editing tool like Figma. Can you please tell me what are the logics behind the figma editing buttons? I mean there are customisation options how these are working or we can use a library for that purpose? Looking forward to your reply Thank you!

@lifetechrevs2105 6 месяцев назад

can we use it with material ui and need to know how api's interact with codux

@SimonHoiberg 7 месяцев назад

Uh, this looks really interesting!

@AdrianTwarog 7 месяцев назад

Thanks Simon!

@DJPapzin 7 месяцев назад

🎯 Key Takeaways for quick navigation: 00:27 🖌️ *Visual Component Building with Codex* - Introduction to Codex as an integrated development environment for building React components visually. - Comparison to traditional methods like Figma and VS Code for designing visually appealing interfaces. - Support for various technologies, including React, TypeScript, CSS, SASS, CSS modules, and Tailwind CSS. 02:07 🔄 *Changing React Development Paradigm* - Shift in the development process with Codex, allowing building components first instead of top-down. - Comparison to previous practices using hot reloading in React development. - Overview of Codex's features, including a visual IDE, code editor, styling panel, and support for third-party libraries. 04:23 🎨 *Creating React Components Visually* - Hands-on demonstration of creating a React component visually in Codex. - Explanation of adding elements, customizing styles, and resizing the frame for different viewports. - Insight into the visual coding experience, including the editor, code view, and inspector panel. 06:41 🔍 *Visual and Code Synchronization* - Codex's capability to synchronize visual changes with code, enabling concurrent visual and code editing. - Practical demonstration of coding while using Codex side by side. - Flexibility in combining visual and code-based approaches for efficient development. 08:59 🚀 *Building a Dashboard with Codex* - Step-by-step creation of a dashboard using Codex, adding multiple components and customizing their layout. - Demonstration of the power of Codex and React integration in designing complex interfaces. - Dynamic updates across components when modifying the structure of one component visually. Made with HARPA AI

@alainportant6412 4 месяца назад

more like DARPA AI

@wadudshuvro5619 6 месяцев назад

How to work with when I have to use multiple APIs to fetch data from that. How to apply this in codux?

@Btechdom 7 месяцев назад

React Studio for MacOS has been out for a long time already but noone seems to know about it based on these Codux videos lol. I think the best part about Codux is that it's available for Windows :D.

@YouTubePL666 6 месяцев назад

Codex = WIX money and possible paid promotion in future ;)

@ChrisNowsk 6 месяцев назад

One of the main points here was that it is capable on Windows

@guidoumfaroukomar6282 7 месяцев назад

with this tool my life became so much easier wow !

@olegtz 6 месяцев назад

You sound like these 1990s commercials

@Kev1305 7 месяцев назад

I tried to view some of my existing code with this, it errors every time for some reason.

@nisargjaiswal4264 7 месяцев назад

Rather than all these things, I am eager to know about your startup idea on which you were working. Make a video on that if possible

@NN-fx6oj 7 месяцев назад

I had all but forgotten about browser extensions to reload tabs. I don't miss those times, hah.

@AdrianTwarog 7 месяцев назад

Yea I know!

@utubes720 16 дней назад

So 25 years later we are full circle to Visual Basic 6.

@MrAndi1281 7 месяцев назад

I also like the combination of buildship and flutterflow

@AdrianTwarog 7 месяцев назад

oh havent tried those

@shahbazkhan-ek7hp 7 месяцев назад

No code tools?

@Statsjk 7 месяцев назад

@@shahbazkhan-ek7hpyes... No code mobile app development based on flutter

@jesamegbe1579 7 месяцев назад

@@shahbazkhan-ek7hp yeah

@avinashthakur80 7 месяцев назад

Looks promising.

@Lightroom_edits. 7 месяцев назад

How you people do this magic 🌟

@browntigerus 7 месяцев назад

Sorry, I gave it a try. If you know your css classes with VSC autocompletes, codex appears much slower to code.

@Nomadnik_ 7 месяцев назад

Can we use bootstrap too?

@warflare-monarch 7 месяцев назад

Wow, this is good

@AdrianTwarog 7 месяцев назад

Yea it's pretty interesting

@fmk6105 2 месяца назад

I don't know what is the different from Adobe Dreamweaver?

@blainefire4588 6 месяцев назад

as soon as i opened the codux app it asked me to login which then I immediately deleted.

@chrisdedavid1860 7 месяцев назад

Is there one of these for VueJS?

@fahadus 7 месяцев назад

Dreamweaver is back!

@haroldcampbell 7 месяцев назад

Was thinking the same thing: dreamweaver and frontpage

@programmerjowo 7 месяцев назад

Codux does not support react router right?

@Famouzi 7 месяцев назад

The be honest, I dont see any usecase for it, other then playing around with this tool. It doesnt really increase speed of creating a components and usually people use some kind of UI libraries for this kind of stuff, other then that you probably need to take a look at component after all and check code by yourself. Its just more friendly gui for coding, maybe useful for beginners who doesnt know properties :p

@muscleheadzzzz 7 месяцев назад

I think it can be useful if you have components that you share among different projects. You can tweak components and have them in a single repository for reference. It also would be cool if the style applied to the component gets converted to tailwind classes.

@christoherright6430 7 месяцев назад

I don't think it will make my workflow faster as I type faster than I click unless it can replace figma process.

@TangiersIntrigue 7 месяцев назад

If it can go as far as replacing a high fidelity prototype from figma or any other program, it could have a solid use case for freelancers and perhaps smaller teams. Otherwise, it would be better to separate the design and the coding. And coding is fast if you already have a prototype to work from instead of having to design AND build the app.

@mhzboxing1759 7 месяцев назад

Love it especially for building the front end...blockchain development

@gknt7234 6 месяцев назад

It seems similar to Framer, which generates React components under the hood using Figma and HTML

@gknt7234 6 месяцев назад

Changed my mind. This is completely different and seems amazing 😄

@shadow_reaper7558 7 месяцев назад

Make an app as a real life rpg gym edition, gaining exp with lifting and stuff cmon beo ive been thinking bout this for so long and i think u can do it

@MyGeorge1964 Месяц назад

What is a bottom down app?

@govorov_top 6 месяцев назад

What about @media requests?

@RonnieDenzel 6 месяцев назад

seems interesting, but I think it would be better if you were more honest by stating that the video was sponsored, adds an extra layer of transparency to it

@sshivam6955 7 месяцев назад

Gnome workbench but for react by react.

@kollabor8 7 месяцев назад

Why do I need to signup to WiX?

@mehdiyahiacherif2326 7 месяцев назад

Wow , we almost create wordpress, if we keep going in this direction , Next with be PHP and visual projects will just be Wordpress it took us a long time to rewrite wordpress in JS

@pastuh 7 месяцев назад

looks like pinegrow editor :)

@AdrianTwarog 7 месяцев назад

Or dreamweaveR?!

@SonAyoD Месяц назад

Did this project survive?

@DizzyDHayes 6 месяцев назад

I have 15+ years web dev experience to notice, that same thing was in Macromedia Dreamweaver in 2000s.. and it's dead now. People switched to plain code, I don't know exactly why. But Figma is different - before we had only Photoshop, that was a tool for photo editing, but not for web design.

@Satorisails77 6 месяцев назад

Devs decided that it took more time to work in a GUI like Dreamweaver than at code level. This is why a browser web inspector in combination with hot reloading from VSCode is the standard, and this kind of association has been the most common workflow for over a decade. If Codex cannot improve the current standard workflow, it will not survive.

@olegtz 6 месяцев назад

Because if you know what you're doing, writing code will always be faster, especially now that we have AI-based auto-complete such as Git Copilot

@pradeepthite2894 6 месяцев назад

This is great but I personally like to code 😊

@patmw 7 месяцев назад

The only thing making me apprehensive is the default light theme.... Psycopaths xD

@heysahilsingh 7 месяцев назад

Although the video is really helpful and thanks at the same time but the video feels laggy because of the animation used in.

@Nicxlive 7 месяцев назад

Nice

@user-dd7mg8mc8k 6 месяцев назад

Interesting

@olegtz 6 месяцев назад

I think VSC + Copilot + Storybook is all you need

@bebebe3000 3 месяца назад

Codux website shows blanked white page

@jgkdmdevienjjgg8866 6 месяцев назад

Looks similar to delphi/winforms visual designer

@harveylawrence9601 7 месяцев назад

I kinda like doing it in code. This way seems weird.

@laptoprelaks 7 месяцев назад

i dont understand why this isn't a thing with EVERY platform/language except since VB6...

@neodidi Месяц назад

I understand that coding gives a lot more flexibility.. But if there's a way for people who wants certain functions or components without needing to create a full web application, this would be ok. I see a lot of developers getting upset with this.. The only sad news with this is the fact that it is owned by wix. And they usually have policies that make them keep the code. This is good and would be awesome if react can be made into a visual builder with the ability to also code. Whenever a complex component or app needs to be developed, the developer can come in.. But for quick functions or components, you can easily make it. This is welcomed... But I think a different company should do it and not wix.

@seitbekir 6 месяцев назад

Zoomera reinvented Dreamweaver

@deeghame 7 месяцев назад

hmmm i don't know man I feel like coding is much faster than this. This would great for someone who does not know coding so they can play little bit with react.

@malindunimalsiri9561 6 месяцев назад

Look like WordPress for react

@swedishpsychopath8795 7 месяцев назад

Too late - React is ancient now. This could've been cool 3 years ago. Server Side Rendering is out. Single Page Apps are out. Static web pages using Server Side Events / web-sockets and PURE html + PURE css + PURE JavaScript on the client is the way to go. NO THIRD PART LIBRARIES like node / express / react / etc is needed. ONLY pure simplified web applications that are super agile (due to no libraries to boggle down the performance). Also: pure applicatons are super easy to make and maintain.

@ProfessorThock 7 месяцев назад

1:55 “with react you build components until you have a big app” “now with this visual ide I can finally code from the bottom up with components!” ???

@YouTubePL666 6 месяцев назад

This is from WIX means when it comes out of beta it will vendor lock you and demand money 😂

@Sureshk-jb3wm 6 месяцев назад

Good content but you have to reduce screen change speed, pretty fast changes and getting headache. if we reduce speed to 0.75 your voice is not matching to screen.

@KevinMpofu 7 месяцев назад

Dreamweaver? 😢

@AdrianTwarog 7 месяцев назад

Slowly we move to nocode!

@KevinMpofu 7 месяцев назад

Yeah, I think it’s a cycle though. Same loop different period.

@KevinMpofu 7 месяцев назад

Yeah, I think it’s a cycle though. Same loop different period.

@NewTypeStarling 7 месяцев назад

These no code tools are here for years but it won't replace code

@DEBUGENTITY 7 месяцев назад

Iam waiting for React CMS who can beat PHP Wordpress 😂😂😂

@__redacted__ 7 месяцев назад

This is just localhost:3000 with a wrapper

@Deepak-rg3qy 6 месяцев назад

Guys this is just for teaching purpose because in real world no use this visual Bcoz u must write logic to connect components via parent which prop pass which component so its just like css part 2 type 😂😂

@akshar234 6 месяцев назад

Historically WYSWIG editors were considered downgrades and it does seem that way in your video when you had to go through multiple mouse movements and clicks to achieve something simple.

@salman4430 7 месяцев назад

nice ad

@lucassrt007 3 месяца назад

dreamweaver again

@freedomman6 7 месяцев назад

Don't tell my employee about this. Thanks

@kharadinbrahman 7 месяцев назад

it's rather strange that humanity has lived with this idea not developping with web technologies... visual editing was there since 2000s, I remember Microsoft Page and Dreamweaver, what they could do is support export in various libraries/formats as they were developping...

@sayanmanna2511 7 месяцев назад

Good.But writing code is more satisfying than clicking.

@user-dd7mg8mc8k 6 месяцев назад

@yuriyvyatkin 6 месяцев назад

Are you sure that this way of creating components is really better than the classic one? Right now, you're hardcoding.

@1337bitcoin 6 месяцев назад

Vite is pronounced "veet". It means "fast" in French.

@muddi900 6 месяцев назад

If the logic requires code, it qdds nothing

@shamimi123 7 месяцев назад

Just like that old app I forgot it's name, it's shit in the end.

@vitalii.kaplia 7 месяцев назад

another Macromedia Dreamweaver 😅

@mustafaemin7389 6 месяцев назад

Any app will not give you as much flexibility as code

@eye.of.thestorm 7 месяцев назад

3:00 That's probably the worst way to learn, especially in technical fields. You can't be a proficient engineer by being an oonga-boonga caveman. READ THE DAMN DOC PEOPLE !

@vojtasks 7 месяцев назад

Given the AI progress this already seems outdated, altough this is interesting but not new.

@nikitaananjevs4094 7 месяцев назад

Did u know, that to create great looking app with react. First u need to know what is css;) dump

@shishirarora8808 6 месяцев назад

@diamaxel 7 месяцев назад

wtf

@champechilufya1458 7 месяцев назад

Veeet not vite please

@ciomio3703 7 месяцев назад

i dont want to see new things

@SauravTiru 6 месяцев назад

Fancy but I’ll give it a pass.

@daomingjin 6 месяцев назад

stop using REACT to build apps. you use one library that a dev decides "hey, yea, i'm going to stop supporting this, hell i might even just remove it from the NodeJS repo and Github", or for some reason it needs a Native Binary Compiled just to work on various platforms.... and they decide to not support a particular platform anymore.... everything breaks. LOL. Learn CSS Learn HTML Learn JavaScript use each one of them where they are best needed. using Javascript as the solution to every problem is like saying "a hammer is the universal tool".